All Projects → salvoravida → React Adal

salvoravida / React Adal

Licence: mit
Azure Active Directory Library (ADAL) support for ReactJS

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to React Adal

Automatedlab
AutomatedLab is a provisioning solution and framework that lets you deploy complex labs on HyperV and Azure with simple PowerShell scripts. It supports all Windows operating systems from 2008 R2 to 2019, some Linux distributions and various products like AD, Exchange, PKI, IIS, etc.
Stars: ✭ 1,194 (+465.88%)
Mutual labels:  directory, azure
Azure Cli
Azure Command-Line Interface
Stars: ✭ 2,862 (+1256.4%)
Mutual labels:  azure
Machinelearningnotebooks
Python notebooks with ML and deep learning examples with Azure Machine Learning Python SDK | Microsoft
Stars: ✭ 2,790 (+1222.27%)
Mutual labels:  azure
Lyra
Open Source Workflow Engine for Cloud Native Infrastructure
Stars: ✭ 203 (-3.79%)
Mutual labels:  azure
Ldapcherry
Web UI for managing users and groups in multiple directory services.
Stars: ✭ 194 (-8.06%)
Mutual labels:  directory
Mmlspark
Simple and Distributed Machine Learning
Stars: ✭ 2,899 (+1273.93%)
Mutual labels:  azure
Azure Services Map
A visual representation and reference to Azure services
Stars: ✭ 189 (-10.43%)
Mutual labels:  azure
Azure In Bullet Points
☁️ Azure summary in bullet points
Stars: ✭ 205 (-2.84%)
Mutual labels:  azure
Azure Gaming
Cloud Gaming Made Easy
Stars: ✭ 204 (-3.32%)
Mutual labels:  azure
Azure Cosmos Js
@azure/cosmos has moved to a new repo https://github.com/Azure/azure-sdk-for-js
Stars: ✭ 201 (-4.74%)
Mutual labels:  azure
Penpal
A promise-based library for securely communicating with iframes via postMessage.
Stars: ✭ 197 (-6.64%)
Mutual labels:  iframe
Checkov
Prevent cloud misconfigurations during build-time for Terraform, Cloudformation, Kubernetes, Serverless framework and other infrastructure-as-code-languages with Checkov by Bridgecrew.
Stars: ✭ 3,572 (+1592.89%)
Mutual labels:  azure
Azure Maven Plugins
Maven plugins for Azure
Stars: ✭ 203 (-3.79%)
Mutual labels:  azure
Drone Cache
A Drone plugin for caching current workspace files between builds to reduce your build times
Stars: ✭ 194 (-8.06%)
Mutual labels:  azure
Openapi Directory
🌐 Wikipedia for Web APIs. Directory of REST API definitions in OpenAPI 2.0/3.x format
Stars: ✭ 2,635 (+1148.82%)
Mutual labels:  azure
Vscode Azurefunctions
Azure Functions extension for VS Code
Stars: ✭ 191 (-9.48%)
Mutual labels:  azure
Spring Cloud Azure
Spring Cloud integration with Azure services
Stars: ✭ 197 (-6.64%)
Mutual labels:  azure
Azure Sdk For Net
This repository is for active development of the Azure SDK for .NET. For consumers of the SDK we recommend visiting our public developer docs at https://docs.microsoft.com/dotnet/azure/ or our versioned developer docs at https://azure.github.io/azure-sdk-for-net.
Stars: ✭ 3,079 (+1359.24%)
Mutual labels:  azure
Blackbelt Aks Hackfest
Microsoft Intelligent Cloud Blackbelt Team :: Hackfest Repo
Stars: ✭ 209 (-0.95%)
Mutual labels:  azure
Terraform Provider Azurerm
Terraform provider for Azure Resource Manager
Stars: ✭ 3,007 (+1325.12%)
Mutual labels:  azure

react-adal

Azure Active Directory Library (ADAL) support for React

react-adal

Azure Active Directory Library (ADAL) support for ReactJS

npm install react-adal

index.js

import { runWithAdal } from 'react-adal';
import { authContext } from './adalConfig';

const DO_NOT_LOGIN = false;

runWithAdal(authContext, () => {

  // eslint-disable-next-line
  require('./indexApp.js');

},DO_NOT_LOGIN);

This index wrap is needed because ADAL use iframes for token silent refresh, and we do not want to have duplicated ReactApp started on iframes too!

indexApp.js (your real app index as it already is - example below)

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { store } from './store';
import App from './App';

  ReactDOM.render(
    <Provider store={store}>
      <App />
    </Provider>,
    document.getElementById('root'),
  );

adalConfig.js

import { AuthenticationContext, adalFetch, withAdalLogin } from 'react-adal';

export const adalConfig = {
  tenant: '14d71d65-f596-4eae-be30-27f079bf8d4b',
  clientId: '14d71d65-f596-4eae-be30-27f079bf8d4b',
  endpoints: {
    api: '14d71d65-f596-4eae-be30-27f079bf8d4b',
  },
  cacheLocation: 'localStorage',
};

export const authContext = new AuthenticationContext(adalConfig);

export const adalApiFetch = (fetch, url, options) =>
  adalFetch(authContext, adalConfig.endpoints.api, fetch, url, options);

export const withAdalLoginApi = withAdalLogin(authContext, adalConfig.endpoints.api);

use adalApiFetch with your favorite "fetch" in your api call.

withAdalLoginApi HOC

change DO_NOT_LOGIN to true on index.js to stop login on index.js

import MyPage from './myPageComponent';
import Loading from './Loading';
import ErrorPage from './ErrorPage';

const MyProtectedPage = withAdalLoginApi(MyPage, () => <Loading />, (error) => <ErrorPage error={error}/>);

<Route 
   path="/onlyLoggedUsers"
   render={ ()=> <MyProtectedPage /> } 
/>

Logging Out

The AuthenticationContext object (authContext) has a built in function (logOut) to log out of a session. This function redirects user to the logout endpoint. After logout, the user will be redirected to the postLogoutRedirectUri if it was added as a property on the config object. The following code shows an example of how to create a Log Out dropdown in a NavBar

import React from 'react';
import { Navbar, Dropdown, DropdownMenu, DropdownItem } from 'reactstrap';
import { authContext } from '../adalConfig';

...

  render() {
    return (
      <header>
        <NavBar>
          ...
            <Dropdown>
              <DropdownMenu>
                <DropdownItem onClick={() => authContext.logOut()}>
                  Logout
                </DropdownItem>
              </DropdownMenu>
            </Dropdown>
          ...
        </NavBar>
      </header>
    );
  }

changelog

view -> CHANGELOG.md

tutorials from the web

https://itnext.io/a-memo-on-how-to-implement-azure-ad-authentication-using-react-and-net-core-2-0-3fe9bfdf9f36

https://medium.com/@dmitrii.korolev1/react-adal-typescript-pnp-sp-93ef69eddd18

inspired by

https://blog.mastykarz.nl/building-office-365-web-applications-react/

https://medium.com/@adpreg/react-with-redux-app-with-azure-ad-auth-and-net-core-starter-project-88b1bbdb7856

https://docs.microsoft.com/en-us/azure/active-directory/develop/active-directory-v2-protocols-implicit

MS adal.js

https://github.com/AzureAD/azure-activedirectory-library-for-js

credits

That's all. Enjoy!

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].