Iam working on a React web application which use Next.js 14 and App Router. Iam using Msal-React dependency for the same.
I have configured MSAL and tried to access with my React app. After authenticating., it is redirecting me to UnauthenticatedTemplate which is not expected behaviour.
It is supposed to redirect me to redirectURI which is happening., but I see UnauthenticatedTemplate on screen.
As per configuration., After Authentication., my app is supposed to stay at https://myapp.com/dashboard page.
I see URL redirection is happening., but loading UnauthenticatedTemplate on screen.
Can you help me with this configuration issue?
Here is my Msal.ts configuration:
import {
PublicClientApplication,
Configuration,
LogLevel,
} from "@azure/msal-browser";
console.log(
"env",
process.env.NEXT_PUBLIC_AZURE_AD_CLIENT_ID,
process.env.NEXT_PUBLIC_AZURE_AD_TENANT_ID,
process.env.NEXT_PUBLIC_APP_REDIRECT_URL
);
const msalConfig: Configuration = {
auth: {
clientId: process.env.NEXT_PUBLIC_AZURE_AD_CLIENT_ID || "default-client-id", // Azure AD client id
authority: `https://login.microsoftonline.com/${process.env.NEXT_PUBLIC_AZURE_AD_TENANT_ID}`, // zure AD tenant id
redirectUri: process.env.NEXT_PUBLIC_APP_REDIRECT_URL, // app redirect URL
postLogoutRedirectUri: "/", // app logout URL
},
cache: {
cacheLocation: "sessionStorage", // This configures where your cache will be stored
storeAuthStateInCookie: false, // If you are having issues on IE11, you may need to set this to true
},
system: {
loggerOptions: {
loggerCallback: (level, message, containsPii) => {
if (containsPii) {
return;
}
switch (level) {
case LogLevel.Error:
console.error(message);
return;
case LogLevel.Info:
console.info(message);
return;
case LogLevel.Verbose:
console.debug(message);
return;
case LogLevel.Warning:
console.warn(message);
return;
}
},
logLevel: LogLevel.Info,
piiLoggingEnabled: false,
},
},
};
const msalInstance = new PublicClientApplication(msalConfig);
export default msalInstance;This is my layout.tsx which is a wrapper to my React App:
"use client";
import React, { useRef } from "react";
import "./globals.css";
import { Box } from "@mui/material";
import { AppStore, makeStore, persistor } from "@/lib/store";
import { Provider } from "react-redux";
import { PersistGate } from "redux-persist/integration/react";
import msalInstance from "@/lib/Msal";
import {
AuthenticatedTemplate,
MsalProvider,
UnauthenticatedTemplate,
} from "@azure/msal-react";
import Home from "./page";
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
const storeRef = useRef<AppStore>();
if (!storeRef.current) {
storeRef.current = makeStore();
}
return (
<html lang="en">
<body>
<Provider store={storeRef.current}>
<PersistGate loading={null} persistor={storeRef.current.__persistor}>
<MsalProvider instance={msalInstance}>
<Box sx={{ display: "flex" }}>
<UnauthenticatedTemplate>
<Home />
</UnauthenticatedTemplate>
<AuthenticatedTemplate>{children}</AuthenticatedTemplate>
</Box>
</MsalProvider>
</PersistGate>
</Provider>
</body>
</html>
);
}This is my login.tsx code:
"use client";
import React, { useState } from "react";
import { Container, Button, Box } from "@mui/material";
import MyLogo from "@/images/NationgridLogo2";
import { useMsal } from "@azure/msal-react";
const LoginComp: React.FC = () => {
const { instance } = useMsal();
const handleLoginClick = async () => {
const loginRequest = {
scopes: ["openId", "profile", "User.Read"],
};
instance
.loginRedirect(loginRequest)
.then((response) => console.log(response))
.catch((err) => console.log(err));
};
return (
<Box>
<Container maxWidth="xs" style={{}}>
<MyLogo />
<Box margin="normal">
<Button
variant="contained"
color="primary"
fullWidth
onClick={handleLoginClick}
>
Login
</Button>
</Box>
</Container>
</Box>
);
};
export default LoginComp;This is the generated log:
: @azure/[email protected] : Info - Emitting event: msal:initializeEnd
Msal.ts:36 : @azure/[email protected] : Info - Emitting event: msal:handleRedirectStart
Msal.ts:36 : @azure/[email protected] : Info - Emitting event: msal:loginFailure
Msal.ts:36 : @azure/[email protected] : Info - Emitting event: msal:handleRedirectEnd
Msal.ts:36 : @azure/[email protected] : Info - MsalProvider - msal:handleRedirectStart results in setting inProgress from startup to handleRedirect
Msal.ts:36 : @azure/[email protected] : Info - MsalProvider - msal:handleRedirectStart results in setting inProgress from startup to handleRedirect
Msal.ts:36 : @azure/[email protected] : Info - MsalProvider - msal:handleRedirectEnd results in setting inProgress from handleRedirect to none
Msal.ts:36 : @azure/[email protected] : Info - MsalProvider - msal:handleRedirectEnd results in setting inProgress from handleRedirect to none