skip to Main Content

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 Foundn' +
      '    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:32n' +
      '    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>
  );
}

2

Answers


  1. tenantId, clientId, clientSecret should be different envs. Tenant id must be tenant name without .onmicrosoft.com.
    If not worked check in azure application Redirect URIs for:
    http://localhost:3000/api/auth/callback/azure-ad-b2c
    enter image description here

    Login or Signup to reply.
  2. 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).

    enter image description here

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

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search