Microsoft Entra provider throwing an error stating that the JWT is invalid and must use compact JWS serialization

[devopsbob]

I'm having trouble configuring the 5.0.0-beta.25 to communicate with TenantID, also referenced as issuer-specific authentication. Starting a discussion with the group to see if there are any tips or suggestions. I've scoured the internet and tried many things. I'll work on an isolated project reproduction in coming days but ideas and suggestions are appreciated!!

Here's my environment:
npx envinfo --system --binaries --npmPackages "{next,react,next-auth,@auth}"

System:
OS: Linux 5.15 Ubuntu 22.04.5 LTS 22.04.5 LTS (Jammy Jellyfish)
CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1185G7 @ 3.00GHz
Memory: 14.09 GB / 15.48 GB
Container: Yes
Shell: 5.1.16 - /bin/bash
Binaries:
Node: 22.13.1 - ~/.nvm/versions/node/v22.13.1/bin/node
npm: 11.0.0 - ~/.nvm/versions/node/v22.13.1/bin/npm
npmPackages:
next-auth: beta => 5.0.0-beta.25
react: 19.0.0 => 19.0.0

Here's where the errors show in my console:
node_modules/jose/dist/node/esm/util/decode_jwt.js

export function decodeJwt(jwt) {
if (typeof jwt !== 'string')
throw new JWTInvalid('JWTs must use Compact JWS serialization, JWT must be a string');
const { 1: payload, length } = jwt.split('.');
if (length === 5)
throw new JWTInvalid('Only JWTs using Compact JWS serialization can be decoded');
if (length !== 3)
throw new JWTInvalid('Invalid JWT');
if (!payload)
throw new JWTInvalid('JWTs must contain a payload');
let decoded;
try {

node_modules/next-auth/node_modules/@auth/core/lib/actions/callback/oauth/callback.js

if (provider[conformInternal]) {
    switch (provider.id) {
        case "microsoft-entra-id":
        case "azure-ad": {

Here's my auth.ts with many trial/error comments:

import NextAuth, { type DefaultSession } from 'next-auth';
import 'next-auth/jwt';

import { GitHubAuthConfig } from './auth.config.github';
import { MicrosoftEntraIDAuthConfig } from './auth.config.entra';

import { TypeORMAdapter } from '@auth/typeorm-adapter';
import * as customEntities from '@/entity/app-entities';

import { DEFAULT_SESSION_EXPIRY, DEFAULT_DEV_SESSION_EXPIRY } from './constants';
import { apiExternalAuth } from '@/lib/api-external-auth';
import { redirect } from 'next/navigation';
import MicrosoftEntraID from 'next-auth/providers/microsoft-entra-id';

/**
 * 300 for 5min, 60 * 60 * 24 * 7 for 1 week, 60 * 60 * 24 for 1 day
 */
const sessionExpiry = process.env.NODE_ENV === 'development' ? DEFAULT_DEV_SESSION_EXPIRY : DEFAULT_SESSION_EXPIRY;

/**
 * 
 * node_modules/next-auth/node_modules/@auth/core/src/lib/symbols.ts
 * /**
 * @internal
 *
 * Used to mark some providers for processing within the core library.
 *
 * **Do not use or you will be fired.**
 *
 */
// function conformInternal(...args: Parameters<typeof fetch>): ReturnType<typeof fetch> {
//   // @ts-expect-error `undici` has a `duplex` option
//   return undici(args[0], { ...args[1], dispatcher })
// }

export const { handlers, auth, signIn, signOut } = NextAuth({
  debug: true, // !!process.env.AUTH_DEBUG,
  // ...MicrosoftEntraIDAuthConfig,
  providers: [
    MicrosoftEntraID({
      conformInternal: false,
      clientId: process.env.AUTH_MICROSOFT_ENTRA_ID_ID ?? '',
      clientSecret: process.env.AUTH_MICROSOFT_ENTRA_ID_SECRET ?? '',
      tenantId: process.env.AUTH_MICROSOFT_ENTRA_ID_TENANT_ID ?? '',
      issuer: process.env.AUTH_MICROSOFT_ENTRA_ID_TENANT_ID,
      authorization: {
        url: process.env.AUTH_MICROSOFT_ENTRA_ID_AUTHORIZATION_URL,
        params: {
          prompt: "select_account",
          // prompt: 'consent',
          // scope: 'openid profile email',
          // response_type: 'id_token',
          // response_mode: 'form_post',
          // maxAge: 60,
          // grant_type: "authorization_code",
        },
      },
      // checks: ['none'],
      // checks: ['pkce'],
      checks: ['pkce', 'state'], // this is the last working version
      // checks: ["pkce", "nonce", "state"],
      // checks: ["pkce", "nonce"],
      // authorization: 'https://login.microsoftonline.com/common/oauth2/v2.0/authorize',
      // token: 'https://login.microsoftonline.com/common/oauth2/v2.0/token',
      token: { url: process.env.AUTH_MICROSOFT_ENTRA_ID_TOKEN_URL },
      // checks: ["pkce", "state"],
      profile: (profile) => {
        return {
          id: profile.id,
          name: profile.displayName,
          email: profile.emails?.[0].address,
          image: profile.photos?.[0].value,
          // Add extra fields here as defined in the extended User object in types/next-auth-extensions.d.ts
          // need to work out how to get the user's role from the profile
          // provider: 'microsoft-entra-id',
          // role: 'viewer',
        };
      },
    }),
  ],
  // adapter: TypeORMAdapter(
  //   {
  //     type: 'better-sqlite3',
  //     database: process.env.NODE_ENV === 'production' ? './data/app.db' : './src/data/app.db',
  //     // do not set synchronize to true in production; it will drop the database; you may need synchronize in development to create the database
  //     synchronize: true,
  //     logging: false,
  //   },
  //   { entities: customEntities },
  // ),
  // basePath: '/api/auth',
  // pages: {
  //   signIn: '/auth/login',
  //   error: '/auth/error',
  // },
  session: {
    strategy: 'jwt',
    maxAge: sessionExpiry,
  },
  // jwt: {
  //   maxAge: sessionExpiry,
  //   async encode({ token, secret }) {
  //     // Custom encoding logic here
  //     return token;
  //   },
  //   async decode({ token, secret }) {
  //     // Custom decoding logic here
  //     return token;
  //   },
  // },
  callbacks: {
    // async jwt({ token, user, account, profile, isNewUser }) {
    async jwt({ token, account, user }) {
      // Add custom claims or properties to the JWT token
      console.log('BKR-----JWT token', token);
      if (account && user) {
        token.accessToken = account.access_token;
        token.id = user.id;
        token.role = user.role;
      }
      return token;
    },
    async authorized({ request, auth }) {
      return true;
      // AuthJS does not work with middleware due to Edge runtime issues
      // const { pathname } = request.nextUrl;
      // if (pathname === '/middleware-example') return !!auth;

      // console.log('BKR-----authorized', auth);
      // const isAuthenticated = !!auth?.user;
      // console.log('BKR-----isAuthenticated', isAuthenticated);
      // return isAuthenticated;
    },
    /*
     * Debugging shows that this is called after the user has been authenticated in the authorize callback.
     * We are including the authorize callback in the credentials provider.
     * We are attempting to make the inclusion of the authorize callback file based on the provider.
     * as by default, the authorize callback is not included in the credentials provider.
     * this import name will be adjust per provider: import { AuthConfig as authConfig, providers } from './auth.config.creds';
     */
    async signIn(params) {
      const { user, account, profile, credentials } = params;
      return true;
      // if (user) {
      //   console.log('authorized user role', user.role);
      //   const userRole = await apiExternalAuth(user.email as string);
      //   const currentRole = userRole?.AccountStatus ?? 'Unknown';
      //   if (currentRole !== user.role) {
      //     console.log('User role for {user.email} changed since created in this application. Changed to:', currentRole);
      //     return '/auth/role-change';
      //   } else {
      //     console.log('User role has not changed since created in this application. Role:', currentRole);
      //     return true;
      //   }
      // }

      /**
       * Add your own logic here to handle sign in
       * Lets add a new user to the database if it does not exist
       * And check the external API for profile info
       */

      // Return true to continue the sign-in process, or false to interrupt it
      // return true;
    },
    async session({ session, user }) {
      if (session?.accessToken) session.accessToken = session.accessToken.toString();
      // console.log('Session user role', user.role);
      session.user.role = user.role ?? 'session';
      session.somevalue = 'somevalue';
      return session;
    },
  },
  // experimental: { enableWebAuthn: true },
  // Found method is renamed to  "name": "authjs.pkce.code_verifier",
  // cookies: {
  //   pkceCodeVerifier: {
  //     name: 'authjs.pkce.code_verifier',
  //     options: {
  //       httpOnly: true,
  //       sameSite: 'none',
  //       path: '/',
  //       secure: process.env.NODE_ENV === 'production',
  //     },
  //   },
  // },
  // secret: process.env.AUTH_SECRET,
});

declare module 'next-auth' {
  interface User {
    role?: string;
    // By default, TypeScript merges new interface properties and overwrites existing ones.
    // In this case, the default user properties will be overwritten,
    // with the new ones defined above. To keep the default user properties,
    // you need to add them back into the newly declared interface.
    id?: string;
    name?: string | null;
    email?: string | null;
    image?: string | null;
  }

  interface Session {
    accessToken?: string;
    somevalue?: string;
    user: {
      role?: string;
    } & DefaultSession['user'];
  }
}

declare module 'next-auth/jwt' {
  interface JWT {
    accessToken?: string;
    id?: string;
    role?: string;
  }
}

[EvrenGursoy]

Looking at your code, I don't see anything significantly different than what I'm doing. However, I set up the provider - particularly the issuer - slightly differently. Maybe it's worth a try:

MicrosoftEntraID({
    clientId: process.env.AUTH_AZURE_AD_ID || "",
    clientSecret: process.env.AUTH_AZURE_AD_SECRET || "",
    issuer: `https://login.microsoftonline.com/${process.env.AUTH_AZURE_AD_TENANT_ID}/v2.0`,
    authorization: {
      params: {
        scope: "openid profile offline_access", 
      },
    },
    async profile(profile) {
      return {
        roles: profile.userRoles,
        ...profile,
      };
    },
  }),

[devopsbob]

@EvrenGursoy, tried your suggestions, thanks. Still not having much luck. Carrying on in an issue discussion here: #12560

Did you run this code with 'debug=true' for your setup? I found that authorization: { url: } and token: { url: } are defaulting to authjs endpoint URIs so makes me think you have other configs somewhere. And whether you might also be running node 22.13.1 and npm 11...or using lower versions of node/npm. node 20 -> 22 growing pains, npm 9 -> 10 -> 11 growing pains...

I was trying to figure out how to use signIn("microsoft-entra-id", {options}, {AuthorizationParams}) in my sign-in.tsx to override or overcome my issues. Have you done that by chance?

[devopsbob]

Abandoned this approach specifically for entra-id due to the number of challenges getting this to work correctly.

[EvrenGursoy]

Hey devopsbob, sorry couldn't get back sooner, working against a deadline. We are currently on node 23.7.0, but pretty sure this was working with v22 as well. I have only recently bumped node up. I'm using pnpm 9.12.2, npm 10.9.2. But both local build and pipelines are using pnpm.

I and the rest of team haven't been running this with debug enabled for some time so really haven't observed what it does as, I take it we have been lucky, it just works. Until 2~3 weeks ago, we were using AzureAD as the provider but the deprecation warning was bugging me so I literally spent only half an hour to switch to EntraID. My biggest head scratching moment was due to forgetting to configure callback on the Azure App Registration side as EntraID has a (sensibly) different callback URL to AzureID.

The only changes in my code was switching the provider and the callback configuration I mentioned. I didn't have to touch anything else as far as I recall. I'll get back to you again, I'll go and dig out the PR to confirm.

System:
    OS: Linux 5.15 Ubuntu 24.04.1 LTS 24.04.1 LTS (Noble Numbat)
    CPU: (16) x64 11th Gen Intel(R) Core(TM) i9-11900H @ 2.50GHz
    Memory: 26.64 GB / 31.21 GB
    Container: Yes
    Shell: 5.2.21 - /bin/bash
  Binaries:
    Node: 23.7.0 - /usr/local/bin/node
    npm: 10.9.2 - /usr/local/bin/npm
    pnpm: 9.12.2 - /usr/local/bin/pnpm
  npmPackages:
    next-auth: ^5.0.0-beta.25 => 5.0.0-beta.25 
    react: ^19.0.0 => 19.0.0 

[EvrenGursoy]

OK, nothing else has changed, we are also on the same version of next-auth beta. We use the JWT strategy. We have an auto-signin page. Fairly simplistic:

import { AutoSignIn } from "@/app/signin/auto-sign-in";
import { auth, providerMap } from "@/auth";
import { Spinner } from "@/components/spinner";
import { redirect } from "next/navigation";

export default async function SignInPage() {
  const session = await auth();

  if (session?.user?.email) {
    return redirect("/");
  }
  return (
    <div className="flex w-screen h-screen justify-center items-center gap-1 cursor-progress">
      <Spinner />
      <AutoSignIn provider={providerMap?.[0].id} />
    </div>
  );
}

"use client";

import { signIn } from "next-auth/react";
import { useEffect } from "react";

export function AutoSignIn({ provider }: { provider: string }) {
  useEffect(() => {
    if (provider) {
      signIn(provider, undefined, { prompt: "select_account" });
    }
  }, [provider]);
  return <div>Signing in...</div>;
}

[devopsbob]

Hey, thanks for this, I will try it and see if I get better results.

How long have you been using the appId/registration? Some warnings were observed in code about before/after I think 2018. Curious if there is a feature flag being maintained for backward compat by MS for your client/tenant.

[EvrenGursoy]

This app reg was created around May / June. I wouldn't be entirely surprised if there is some coupling between older versions of app registrations and Azure AD, hopefully that is not the case though! Good luck, hope you don't have to mess around with that.