Azure Active Directory Library (ADAL) support for React
react-adal-adfs
Azure Active Directory Library (ADAL) support for ReactJS Form Post
npm install react-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 /> />
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
v0.4.24
+upgrade to babel 7
+SSR support
+fix ie10
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://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!