Azure Active Directory Library (ADAL) support for React
react-adal for adfs
Azure Active Directory Library (ADAL) and Active Directory Federation Services (ADFS) support for ReactJS
npm install reactjs-adal-adfs
index.js
;; const DO_NOT_LOGIN = false; ;
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)
;;;;; ReactDOM;
adalConfig.js
; const adalConfig = tenant: '14d71d65-f596-4eae-be30-27f079bf8d4b' clientId: '14d71d65-f596-4eae-be30-27f079bf8d4b' endpoints: api: '14d71d65-f596-4eae-be30-27f079bf8d4b' cacheLocation: 'localStorage'; const authContext = adalConfig; const adalApiFetch = ; const withAdalLoginApi = ;
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
;;; const MyProtectedPage = ; <Route path="/onlyLoggedUsers" render= <MyProtectedPage /> />
Extra token JWT
To get extra token (JWT) with custom information you could use the form_post in front config
const adalConfig = ... "isFormPostResponseMode": true
NB: make sure your REDIRECT_URI is a route accept a post request
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
;;; ... { return <header> <NavBar> ... <Dropdown> <DropdownMenu> <DropdownItem onClick= authContext> Logout </DropdownItem> </DropdownMenu> </Dropdown> ... </NavBar> </header> ; }
changelog
view -> CHANGELOG.md
tutorials from the web
https://medium.com/@dmitrii.korolev1/react-adal-typescript-pnp-sp-93ef69eddd18
inspired by
https://blog.mastykarz.nl/building-office-365-web-applications-react/
MS adal.js
https://github.com/AzureAD/azure-activedirectory-library-for-js
credits
That's all. Enjoy!