Invalid grant error after registration

Core Library

MSAL.js (@azure/msal-browser)

Core Library Version

3.7.1

Wrapper Library

MSAL React (@azure/msal-react)

Wrapper Library Version

2.0.10

Public or Confidential Client?

Public

Description

The Next.js version is 13.5.6 and I use app router feature.

Error Message

After registration, I get an invalid grant error: Error subError: bad_token Error name: InteractionRequiredAuthError Error errorCode: invalid_grant

MSAL Logs

Network Trace (Preferrably Fiddler)

[ ] Sent
[ ] Pending

MSAL Configuration

auth: {
   clientId: process.env.CLIENT_ID,
   authority: process.env.AUTH,
   redirectUri: 'http://localhost:3000/',
},
export const scopes = [
  'api://***/***.Read',
];
export const loginRequest = {
  scopes,
};

Relevant Code Snippets

app/layout.tsx:

export const msalInstance = new PublicClientApplication(msalConfig);

msalInstance.initialize().then(() => {
  // Account selection logic is app dependent. Adjust as needed for different use cases.
  const accounts = msalInstance.getAllAccounts();
  if (accounts.length > 0) {
    msalInstance.setActiveAccount(accounts[0]);
  }

  msalInstance.addEventCallback((event: EventMessage) => {
    const payload = event.payload as AuthenticationResult;
    if (event.eventType === EventType.LOGIN_SUCCESS && payload.account) {
          const account = payload.account;
          msalInstance.setActiveAccount(account);
    }
  });
});

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang='en'>
      <body suppressHydrationWarning={true}>
        <MsalProvider instance={msalInstance}>
          {children}
        </MsalProvider>
      </body>
    </html>
  );
}

/dashboard/layout.tsx:
```tsx
function ErrorComponent({error}: MsalAuthenticationResult) {

  return (<div className="">
    <p>Error errorMessage: {error?.errorMessage}</p>
    <br />
    <p>Error correlationId: {error?.correlationId}</p>
    <br />
    <p>Error errorCode: {error?.errorCode}</p>
    <br />
    <p>Error message: {error?.message}</p>
    <br />
    <p>Error name: {error?.name}</p>
    <br />
    <p>Error stack: {error?.stack}</p>
    <br />
    <p>Error subError: {error?.subError}</p>
  </div>);
}

export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode;
}) {

  const authRequest: RedirectRequest  = {
   // import from config
    scopes,
  };

  return (
    <MsalAuthenticationTemplate interactionType={InteractionType.Redirect} errorComponent={ErrorComponent}  loadingComponent={Loader}  authenticationRequest={authRequest} >
      // content
    </MsalAuthenticationTemplate>
  );
}



### Reproduction Steps

1. run app
2. register as a new user
3. redirect to the app

### Expected Behavior

MSAL token request should return 200 and entra data.

### Identity Provider

Entra ID (formerly Azure AD) / MSA

### Browsers Affected (Select all that apply)

Chrome, Firefox, Edge, Safari, None (Server)

### Regression

_No response_

### Source

External (Customer)

AzureAD / microsoft-authentication-library-for-js

Invalid grant error after registration #6852