I am trying to redirect to home page after login authentication using Azure Msal library. But after authentication it redirects back to login for few seconds and then goes to home page. I've pasted the code below. Please help.

login.tsx

import { SignInButton } from "../../ponents/button";
const Login:React.FC = () => {
   return(
    <div>
     <SignInButton />
   </div>);
}

Private Route.tsx

import React from "react";
import { Route, Redirect } from "react-router-dom";
import { useIsAuthenticated, useMsal } from "@azure/msal-react";
import '../../theme/styles.css';

const PrivateRoute: React.FC<{
  ponent?: React.FC;
  path: string;
  exact: boolean;
  render?: any;
  isLoggedIn: boolean
}> = (props) => {
   const { ponent, path, exact } = props;
   const isAuthenticated = useIsAuthenticated();
   const {instance, accounts, inProgress} = useMsal();

   return (isAuthenticated) ? (<Route path={path} exact={exact} ponent={ponent}/>) : (<Redirect to="/login" />);
 };

 export default PrivateRoute;

App.tsx

 //other imports
 import Login from './pages/login';
 import PrivateRoute from './ponents/privateroute';
 import { useHistory } from "react-router";
 import { useIsAuthenticated, useMsal } from '@azure/msal-react';
 const App: React.FC = () => {
 const isAuth = useIsAuthenticated();
 const history = useHistory();
 useEffect(() => {
 if(isAuth){
  history.push("/");
  }
 },[isAuth])

 return (
   <IonApp>
     <Layout>
       <Switch>
         <PrivateRoute exact path="/" isLoggedIn={true} ponent={Home} />
         <PrivateRoute exact path="/frsevents" isLoggedIn={true} ponent={FRSEvents} />
       </Switch>
     </Layout>
     <Route exact path="/login" ponent={Login} />
   </IonApp>
  );
 }

 export default App;    

I am trying to redirect to home page after login authentication using Azure Msal library. But after authentication it redirects back to login for few seconds and then goes to home page. I've pasted the code below. Please help.

login.tsx

import { SignInButton } from "../../ponents/button";
const Login:React.FC = () => {
   return(
    <div>
     <SignInButton />
   </div>);
}

Private Route.tsx

import React from "react";
import { Route, Redirect } from "react-router-dom";
import { useIsAuthenticated, useMsal } from "@azure/msal-react";
import '../../theme/styles.css';

const PrivateRoute: React.FC<{
  ponent?: React.FC;
  path: string;
  exact: boolean;
  render?: any;
  isLoggedIn: boolean
}> = (props) => {
   const { ponent, path, exact } = props;
   const isAuthenticated = useIsAuthenticated();
   const {instance, accounts, inProgress} = useMsal();

   return (isAuthenticated) ? (<Route path={path} exact={exact} ponent={ponent}/>) : (<Redirect to="/login" />);
 };

 export default PrivateRoute;

App.tsx

 //other imports
 import Login from './pages/login';
 import PrivateRoute from './ponents/privateroute';
 import { useHistory } from "react-router";
 import { useIsAuthenticated, useMsal } from '@azure/msal-react';
 const App: React.FC = () => {
 const isAuth = useIsAuthenticated();
 const history = useHistory();
 useEffect(() => {
 if(isAuth){
  history.push("/");
  }
 },[isAuth])

 return (
   <IonApp>
     <Layout>
       <Switch>
         <PrivateRoute exact path="/" isLoggedIn={true} ponent={Home} />
         <PrivateRoute exact path="/frsevents" isLoggedIn={true} ponent={FRSEvents} />
       </Switch>
     </Layout>
     <Route exact path="/login" ponent={Login} />
   </IonApp>
  );
 }

 export default App;    

• javascript
• reactjs
• azure-active-directory
• conditional-rendering

Share Improve this question Follow asked Mar 30, 2022 at 5:01 Sriharsha KSriharsha K 32322 gold badges66 silver badges1919 bronze badges 1

• Hey @Sriharsha K, I did reproduce this issue and the solution worked for me; do let me know if it solved your problem else share more details so I can troubleshoot? – Kartik Bhiwapurkar Commented May 2, 2022 at 12:45

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

• MSAL supports passing the ‘redirectStartPage’ parameter, which tells MSAL where to navigate after ing back from the redirect. Note, this requires ‘auth.navigateToLoginRequestUrl’ to be enabled. The usage of this parameter can be done as below: -

    const redirectStartPage = this.getDestinationUrl(url);

    this.authService.loginRedirect({
        redirectStartPage,
        scopes: this.msalAngularConfig.consentScopes,
        extraQueryParameters: this.msalAngularConfig.extraQueryParameters

To know more regarding the proper usage of the above parameters, kindly refer to the sample angular(reactjs) application code as it states how to use the same in MSAL Angular in the link below: -

https://github./AzureAD/microsoft-authentication-library-for-js/blob/msal-angular-v1/lib/msal-angular/src/msal-guard.service.ts#L75

• Also, for your reference, please go through the Github issue below which discusses the redirection flow of the MSAL React app as below: -

a. Protected route checks if .getAccount() returns data. If not - the user redirects to /login.

b. Login page registers a callback registerRedirectionCallback and if the .getAccount() returns nothing - auth.loginRedirect(GRAPH_REQUESTS.LOGIN) is executed.

c. once the account is there it redirect the user to a previous path.

d. in case API receives error code 401 I'm going to execute window.location.reload()

https://github./AzureAD/microsoft-authentication-library-for-js/issues/1474