Quickstart

Install the module with:

Register a web application

npm install azure-ad-login-authentication

Register your Application

1. Sign in to the Azure portal.
2. If you have access to multiple tenants, use the Directories + subscriptions filter in the top menu to switch to the tenant in which you want to register the application.
3. Search for and select Azure Active Directory. Under Manage, select App registrations > New registration.
4. When the Register an application page appears, enter a name for your application.
5. Under Supported account types, select Accounts in any organizational directory and personal Microsoft accounts.
6. Select Register. On the app Overview page, note the Application (client) ID value for later use.
7. Under Manage, select Authentication.
8. Under Platform configurations, select Add a platform. In the pane that opens select Single-page application.
9. Set the Redirect URIs value to http://localhost:3000/. This is the default port NodeJS will listen on your local machine. We’ll return the authentication response to this URI after successfully authenticating the user.
10. Select Configure to apply the changes.
11. Under Platform Configurations expand Single-page application.
12. Confirm that under Grant types Already configured Your Redirect URI is eligible for the Authorization Code Flow with PKCE.

Depedency Required

npm install react-router-dom --save

npm install @azure/msal-browser

Getting Started

Import Login to your React Page Component

import Login from '../node_modules/azure-ad-login-authentication/dist/component/Login'

Create .env file in your root folder, add values of registered app in .env file.

.env file

REACT_APP_APPID=<Enter your application ID here>
REACT_APP_BASE_URL=<Enter your base URL here on which application runs>
REACT_APP_SCOPES=<Enter scope here>
REACT_APP_AUTHORITY=<Enter authority here>
REACT_APP_LANDING_PAGE_PATH=<Enter path of landing page after login>

.env file Example

REACT_APP_APPID=605283c9-ed67-478e-b870-5fc1a84fr436
REACT_APP_BASE_URL=http://localhost:3000
REACT_APP_SCOPES=user.read
REACT_APP_AUTHORITY=https://login.microsoftonline.com/<organisation name>.com
REACT_APP_LANDING_PAGE_PATH=home

How to use

and then in your app.js file import component-

import Login from '../node_modules/azure-ad-login-authentication/dist/component/Login'
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import Home from './component/home';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Login></Login>}/>
        <Route path="/home" element={<Home></Home>}></Route>
        
      </Routes>
    </BrowserRouter>
  );
}

Example

import Login from '../node_modules/azure-ad-login-authentication/dist/component/Login'
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import Home from './component/home';
function App() {
  return (
   <BrowserRouter>
      <Routes>
        <Route path="/" element={<Login></Login>}/>
        <Route path="/home" element={<Home></Home>}></Route>
        
      </Routes>
    </BrowserRouter>
  );
}

export default App;