Redirect to home page after React Azure AD login

Question

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 "../../components/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<{
  component?: React.FC;
  path: string;
  exact: boolean;
  render?: any;
  isLoggedIn: boolean
}> = (props) => {
   const { component, path, exact } = props;
   const isAuthenticated = useIsAuthenticated();
   const {instance, accounts, inProgress} = useMsal();

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

 export default PrivateRoute;

App.tsx

 //other imports
 import Login from './pages/login';
 import PrivateRoute from './components/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} component={Home} />
         <PrivateRoute exact path="/frsevents" isLoggedIn={true} component={FRSEvents} />
       </Switch>
     </Layout>
     <Route exact path="/login" component={Login} />
   </IonApp>
  );
 }

 export default App;    

Answer 1

• MSAL supports passing the ‘redirectStartPage’ parameter, which tells MSAL where to navigate after coming 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.com/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.com/AzureAD/microsoft-authentication-library-for-js/issues/1474