react-adal-with-claims

    0.4.22 • Public • Published

    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 /> } 
    />
     

    changelog

    v0.4.22
    !support old sid #issue 7
    !withAdalLogin HOC componentWillMount deprecated removed
    !withAdalLogin HOC check mounted before setState
    
    v0.4.19
    +support MFA redirect - merged pr
    
    v0.4.18
    !adalFetch options fix
    +es5 lib
    
    v0.4.17
    +update adal.js to 1.0.17
    +added withAdalLogin HOC for login only on a single Route
    +added example for single route login
    
    v0.3.15
    !fix eslint and packages dep
    !fix devDependencies
    +update readme
    
    v0.1.15
    +first release
    +include AdalJS v.1.0.15
    

    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!

    Install

    npm i react-adal-with-claims

    DownloadsWeekly Downloads

    2

    Version

    0.4.22

    License

    MIT

    Unpacked Size

    181 kB

    Total Files

    12

    Last publish

    Collaborators

    • curtisrutland