Azure Active Directory (ADAL) support for ReactJS
npm install react-adal
Azure Active Directory Library (ADAL) support for React
npm install react-adal
`
index.js
`javascript
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)
`javascript
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { store } from './store';
import App from './App';
ReactDOM.render(
,
document.getElementById('root'),
);
`
adalConfig.js
`javascript
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
`javascript
import MyPage from './myPageComponent';
import Loading from './Loading';
import ErrorPage from './ErrorPage';
const MyProtectedPage = withAdalLoginApi(MyPage, () => , (error) => );
path="/onlyLoggedUsers"
render={ ()=> }
/>
`
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
`javascript
import React from 'react';
import { Navbar, Dropdown, DropdownMenu, DropdownItem } from 'reactstrap';
import { authContext } from '../adalConfig';
...
render() {
return (
...
authContext.logOut()}>
Logout
...
);
}
``