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
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
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!