Security News
cURL Project and Go Security Teams Reject CVSS as Broken
cURL and Go security teams are publicly rejecting CVSS as flawed for assessing vulnerabilities and are calling for more accurate, context-aware approaches.
react-adal
Advanced tools
Azure Active Directory Library (ADAL) support for React
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.
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 /> }
/>
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
import React from 'react';
import { Navbar, Dropdown, DropdownMenu, DropdownItem } from 'reactstrap';
import { authContext } from '../adalConfig';
...
render() {
return (
<header>
<NavBar>
...
<Dropdown>
<DropdownMenu>
<DropdownItem onClick={() => authContext.logOut()}>
Logout
</DropdownItem>
</DropdownMenu>
</Dropdown>
...
</NavBar>
</header>
);
}
view -> CHANGELOG.md
https://medium.com/@dmitrii.korolev1/react-adal-typescript-pnp-sp-93ef69eddd18
https://blog.mastykarz.nl/building-office-365-web-applications-react/
https://github.com/AzureAD/azure-activedirectory-library-for-js
That's all. Enjoy!
FAQs
Azure Active Directory (ADAL) support for ReactJS
The npm package react-adal receives a total of 3,807 weekly downloads. As such, react-adal popularity was classified as popular.
We found that react-adal demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
cURL and Go security teams are publicly rejecting CVSS as flawed for assessing vulnerabilities and are calling for more accurate, context-aware approaches.
Security News
Bun 1.2 enhances its JavaScript runtime with 90% Node.js compatibility, built-in S3 and Postgres support, HTML Imports, and faster, cloud-first performance.
Security News
Biden's executive order pushes for AI-driven cybersecurity, software supply chain transparency, and stronger protections for federal and open source systems.