Hello all and thank you in advance for your assistance.

I have a NextJS app that I am working on, I am new to NextJS and React but fairly experienced in other web technologies such as Angular & ASP.NET. The app is running node@20.17.10, next@15.1.3 & React@18.3.1. If you feel like I have a version problem I haven't picked these for any particular reason but I was getting package dependency problems for React@19.x.x.

I'm using an authConfig.tsx w/ the b2cPolicies, msalConfig, loginRequest, silentRequest blocks exported and some logging configured so that I can see the events firing in the console. Here is a brief overview of the project.

- components
  - auth
    - Authenticated.tsx (HOC - msal instance getActiveAccount or Redirect to Azure AD Login)
    - msalContext.tsx (AuthProvider)
- pages
  - auth
    - auth-callback.tsx (Azure AD Redirect URI : /auth/auth-callback)
  - _app.tsx (Wraps everything in the <AuthProvider><Component {...pageProps} /></AuthProvider>)
  - protected.tsx (this exports the Protected class wrapped in the Authentication.tsx component: export default withAuth(Protected); ) 

So...

I have some experience setting up Azure AD B2C User Flows and Custom Policies for other platforms and integrations and I'm fairly certain that piece of the puzzle is working correctly. I can test the flows, register, and login.

The problem is that when I navigate to /Protected, I am redirected to the login, I login successfully, but it looks like no account(s) are being returned so a null account is set, I am redirected to the paged I requested, which starts a loop because my msalInstance does not have an active account being set.

Incidentally, do get an id_token back after login, when I debug in in jwt.io it's valid with all the expected user information.

If anyone has experience with the best practices approach for authentication w/ Azure AD B2C I would be happy to provide more information.

Best Regards & Thanks in Advance!