Question posted in 
Authconfig.js
export const msalConfig = {auth: {clientId: "client-id",authority: "``https://login.microsoftonline.com/tenant-id``",redirectUri: "``http://localhost:5173/home``",},cache: {cacheLocation: "sessionStorage", issuesstoreAuthStateInCookie: false,},};
main.jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { MsalProvider } from '@azure/msal-react';
import { PublicClientApplication } from '@azure/msal-browser';
import { msalConfig } from './Authconfig';
import { RouterProvider, createBrowserRouter } from 'react-router-dom';
import { ProtectedRoutes } from './utils/ProtectedRoutes.jsx';
import { AboutComponent } from './AboutComponent.jsx';
import { AdminComponent } from './AdminComponent.jsx';
import { BuildComponent } from './BuildComponent.jsx';
import { ContactusComponent } from './ContactusComponent.jsx';
import { FeedbackComponent } from './FeedbackComponent.jsx';
import { LandingPageComponent } from './LandingPageComponent.jsx';
import { LoginPageComponent } from './LoginPageComponent.jsx';
import { ReleasenotesComponent } from './ReleasenotesComponent.jsx';
import { UserHomeComponent } from './UserHomeComponent.jsx';
import { PricingComponent } from './PricingComponent.jsx';
import { UserProfileComponent } from './UserProfileComponent.jsx';
import './index.css';
import { AuthProvider } from './utils/AuthContext';
const msalInstance = new PublicClientApplication(msalConfig);
const router = createBrowserRouter([
{
path: '/',
element: <LandingPageComponent />,
errorElement: <div>404 not found</div>,
children: [
{ path: '', element: <AboutComponent /> },
{ path: 'pricing', element: <PricingComponent /> },
{ path: 'releasenotes', element: <ReleasenotesComponent /> },
{ path: 'contactus', element: <ContactusComponent /> },
{ path: 'signin', element: <LoginPageComponent /> },
{
element: <ProtectedRoutes />,
children: [
{ path: 'home', element: <UserHomeComponent /> },
{ path: 'build', element: <BuildComponent /> },
{ path: 'admin', element: <AdminComponent /> },
{ path: 'userprofile', element: <UserProfileComponent /> },
{ path: 'feedback', element: <FeedbackComponent /> },
],
},
],
},
]);
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<MsalProvider instance={msalInstance}>
<AuthProvider>
<RouterProvider router={router} />
</AuthProvider>
</MsalProvider>
</React.StrictMode>
);
Loginpagecomponent.jsx
import React, { useContext, useEffect } from 'react';
import { useMsal } from '@azure/msal-react';
import { loginRequest } from './Authconfig';
import { useNavigate } from 'react-router-dom';
import loginimage from './assets/loginimage.svg';
import { AuthContext } from './utils/AuthContext';
export const LoginPageComponent = () => {
const { instance } = useMsal();
const navigate = useNavigate();
const { login } = useContext(AuthContext);
const handleLogin = () => {
instance.loginRedirect(loginRequest);
};
useEffect(() => {
instance.handleRedirectPromise()
.then((response) => {
if (response) {
console.log('Authentication Response:', response);
login(response.account);
navigate('/home');
}
})
.catch((error) => {
console.error('Authentication Error:', error);
});
}, [instance, navigate, login]);
return (
<div className="bg-white">
<div className="grid grid-cols-2 justify-center items-center m-20">
<div>
<img
loading="lazy"
src={loginimage}
className="self-end max-w-full aspect-square w-[540px]"
/>
</div>
<div className="flex flex-col ml-5">
<div className="flex flex-col p-10 mt-5 w-fit items-center justify-center rounded-lg shadow-sm bg-sky-600 bg-opacity-20 text-zinc-800 max-md:px-5 max-md:mt-10">
<div className="text-4xl font-black text-sky-600">
<span className="font-medium">Welcome to</span>
<br />
<span className="text-5xl text-sky-600 leading-[62px]">
buildNow Portal
</span>
</div>
<button onClick={handleLogin} className="w-96 px-8 py-3 ml-6 rounded-lg bg-indigo-500 text-gray-100 border border-gray-200 placeholder-gray-500 text-sm tracking-wide font-semibold hover:bg-indigo-700 transition-all duration-300 ease-in-out flex items-center justify-center focus:shadow-outline focus:outline-none mt-5">
<svg className="w-6 h-6 -ml-2" fill="none" stroke="currentColor">
<path d="M16 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2" />
<circle cx="8.5" cy="7" r="4" />
<path d="M20 8v6M23 11h-6" />
</svg>
<span className="ml-3">
LOGIN
</span>
</button>
</div>
</div>
</div>
</div>
);
};
Authcontext.jsx
import React, { createContext, useState } from 'react';
const AuthContext = createContext();
const AuthProvider = ({ children }) => {
const [user, setUser] = useState(() => {
const storedUser = localStorage.getItem('user');
return storedUser ? JSON.parse(storedUser) : null;
});
const login = (account) => {
setUser(account);
localStorage.setItem('user', JSON.stringify(account));
};
const logout = () => {
setUser(null);
localStorage.removeItem('user');
};
return (
<AuthContext.Provider value={{ user, setUser, login, logout }}>
{children}
</AuthContext.Provider>
);
};
export { AuthContext, AuthProvider };
After clicking on SSO button it needs to validate the user and needs to redirect to Userhomecomponent.jsx page.
I have configured http://localhost:5173/home as redirectUri in azure . Also i have added the scopes openid,email and profile.I have enabled access token and id token also
I have tried to configure SSO using MSAL and azure in my react application. But while clicking sso button it redirecting to /home page and within seconds it is coming back to /signin. Also i can see that token is not generting in network tab.Please help to resolve this
2
Answers
I fixed the issue by adding the below code in the LoginPageComponent.
I was successfully redirect to the home page after logging in.
Below is the complete code of Loginpagecomponent.
Loginpagecomponent.jsx:
Authcontext.jsx:
I used the below ProtectedRoutes ensured that only authenticated users can access certain routes.
utils/ProtectedRoutes.jsx:
Output:
After clicking the login button, I was successfully redirected to the home page and was able to see the access token.