When i go to my site it redirects me to the external login and i perform a login. Good so far, but then it redirects me to my site and i get the errors.
Warning: Cannot update a component (HotReload) while rendering a different component (MsalAuthenticationTemplate). To locate the bad setState() call inside MsalAuthenticationTemplate, follow the stack trace as described in https://reactjs.org/link/setstate-in-render
MsalAuthenticationTemplate.js:48 Uncaught TypeError: Cannot read properties of null (reading '__PRIVATE_NEXTJS_INTERNALS_TREE')
Code from root file:
"use client"
import {Inter} from "next/font/google";
import "./globals.css";
import {EventType, PublicClientApplication, InteractionType} from "@azure/msal-browser";
import {MsalProvider, MsalAuthenticationTemplate} from "@azure/msal-react";
import {msalConfig} from "@/config/authConfig";
import error from './error';
const inter = Inter({subsets: ["latin"]});
const msalInstance = new PublicClientApplication(msalConfig);
export default function RootLayout({children}) {
return (
<html lang="en">
<body className={inter.className}>
<MsalProvider instance={msalInstance}>
<MsalAuthenticationTemplate
interactionType={InteractionType.Redirect}
// errorComponent={error}
// loadingComponent={Loading}
>
{children}
</MsalAuthenticationTemplate>
</MsalProvider>
</body>
</html>
);
}
I would like for it to check if you are logged in and if not it goes to the login page. Then you log in and go back to my site.
I've tried doing it without loading in the children, only some text because maybe the issue lies there. But then it still results in errors.