Azure AD B2C with Next-auth OPError: expected 200 OK, got: 404 Not Found

Question

I was trying to implement azure-ad-b2c login with next-auth following those articles https://next-auth.js.org/providers/azure-ad-b2c and https://next-auth.js.org/adapters/prisma . But now I'm stucked with error. Any idea what's wrong?

Error

https://next-auth.js.org/errors#signin_oauth_error expected 200 OK, got: 404 Not Found {
  error: {
    message: 'expected 200 OK, got: 404 Not Found',
    stack: 'OPError: expected 200 OK, got: 404 Not Found\n' +
      '    at processResponse (/home/leokorr/Projects/app-tests/microsoft-test/node_modules/openid-client/lib/helpers/process_response.js:41:11)\n' +
      '    at Function.discover (/home/leokorr/Projects/app-tests/microsoft-test/node_modules/openid-client/lib/issuer.js:152:20)\n' +
      '    at processTicksAndRejections (node:internal/process/task_queues:96:5)\n' +
      '    at async openidClient (/home/leokorr/Projects/app-tests/microsoft-test/node_modules/next-auth/core/lib/oauth/client.js:16:14)\n' +
      '    at async getAuthorizationUrl (/home/leokorr/Projects/app-tests/microsoft-test/node_modules/next-auth/core/lib/oauth/authorization-url.js:65:18)\n' +
      '    at async Object.signin (/home/leokorr/Projects/app-tests/microsoft-test/node_modules/next-auth/core/routes/signin.js:37:24)\n' +
      '    at async NextAuthHandler (/home/leokorr/Projects/app-tests/microsoft-test/node_modules/next-auth/core/index.js:238:26)\n' +
      '    at async NextAuthNextHandler (/home/leokorr/Projects/app-tests/microsoft-test/node_modules/next-auth/next/index.js:23:19)\n' +
      '    at async /home/leokorr/Projects/app-tests/microsoft-test/node_modules/next-auth/next/index.js:59:32\n' +
      '    at async Object.apiResolver (/home/leokorr/Projects/app-tests/microsoft-test/node_modules/next/dist/server/api-utils/node.js:366:9)',
    name: 'OPError'
  },
  providerId: 'azure-ad-b2c',
  message: 'expected 200 OK, got: 404 Not Found'
}

[...nextauth.js]

import NextAuth from "next-auth"
import AzureADB2CProvider from "next-auth/providers/azure-ad-b2c"
import { PrismaAdapter } from "@next-auth/prisma-adapter"
import { PrismaClient } from "@prisma/client"

const prisma = new PrismaClient()

export default NextAuth({
  adapter: PrismaAdapter(prisma),
  providers: [
    AzureADB2CProvider({
      tenantId: process.env.AZURE_AD_TENANT_ID,
      clientId: process.env.AZURE_AD_CLIENT_ID,
      clientSecret: process.env.AZURE_AD_CLIENT_SECRET,
      primaryUserFlow: process.env.AZURE_AD_B2C_PRIMARY_USER_FLOW,
      authorization: { params: { scope: "offline_access openid" } },
    })
  ],
})

index.js

import { signIn } from 'next-auth/react'

export default function Home() {
  const handleLoginb2c = () => signIn('azure-ad-b2c', {
    callbackUrl: `http://localhost:3000/loggedin`,
  }).catch((error) => console.log(error))


  return (
    <div>
      <button onClick={handleLoginb2c}>b2c Log in</button>
    </div>
  );
}

Answer 1

Make sure that you're using the tenant name and NOT the tenant ID, the location for this value can be found in the image below in red. It's whatever alpahnumeric value you chose when setting up the tenant (what comes before the .onmicrosoft.com).

I had the ID previously and when I switched to this value it works like a charm. Hope this helps!