Azure Active Directory Library (ADAL) support for ReactJS
npm install react-adal
index.js
import { runWithAdal } from 'react-adal';
import { authContext } from './adalConfig';
runWithAdal(authContext, () => {
// eslint-disable-next-line
require('./indexApp.js');
});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)
import 'babel-polyfill';
import 'matchmedia-polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import 'normalize.css';
import { store } from './store';
import App from './App';
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root'),
);adalConfig.js
import { AuthenticationContext, adalFetch } 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);use adalApiFetch with your favorite "fetch" in your api call.
v0.3.15
!fix eslint and packages dep
!fix devDependencies
+update readme
v0.1.15
+first release
+include AdalJS v.1.0.15
https://blog.mastykarz.nl/building-office-365-web-applications-react/
That's all. Enjoy!