Next.js Discord

Discord Forum

Microsoft Entra ID Authentication issue on Next JS 14.2.5 - App Router

Unanswered
Router Renegade posted this in #help-forum
Open in Discord
Hi, I am trying to setup auth using microsoft entra admin on my next js app that uses app router

I get this error-

Sorry, but we’re having trouble signing you in.

AADSTS50011: The redirect URI 'http://localhost:3000/api/auth/callback/microsoft-entra-id' specified in the request does not match the redirect URIs configured for the application 'fbc636dc-25fe-471e-90e5-8c8ac2dd6fb6'. Make sure the redirect URI sent in the request matches one added to your application in the Azure portal. Navigate to https://aka.ms/redirectUriMismatchError to learn more about how to fix this.


is there something i should change ?

31 Replies

I havent deplyed it, so i want to use localhost on my redirect URLs
okay I made some modifications to the prisma schema
But, I still get the same error -

is there something wrong with prisma? 💀

[auth][cause]: PrismaClientValidationError:
Invalid `prisma.account.findUnique()` invocation:

{
  where: {
    provider_providerAccountId: {
    ~~~~~~~~~~~~~~~~~~~~~~~~~~
      providerAccountId: "IjG6P5LJDi0ebo-w9En3m2w6ZC0wUetk30HIDk_OUSo",
      provider: "microsoft-entra-id"
    },
?   id?: String,
?   providerId_providerAccountId?: AccountProviderIdProviderAccountIdCompoundUniqueInput,
?   AND?: AccountWhereInput | AccountWhereInput[],
?   OR?: AccountWhereInput[],
?   NOT?: AccountWhereInput | AccountWhereInput[],
?   userId?: StringFilter | String,
?   providerType?: StringFilter | String,
?   providerId?: StringFilter | String,
?   providerAccountId?: StringFilter | String,
?   refreshToken?: StringNullableFilter | String | Null,
?   accessToken?: StringNullableFilter | String | Null,
?   accessTokenExpires?: DateTimeNullableFilter | DateTime | Null,
?   createdAt?: DateTimeFilter | DateTime,
?   updatedAt?: DateTimeFilter | DateTime,
?   user?: UserRelationFilter | UserWhereInput
  },
  select: {
    user: true
  }
}
prisma schema is like this
this is the complete logs
could someone please help me with this?
American Fuzzy Lop
Are you using Msal?
American Fuzzy Lop
Try to add the redirect url to a single-page-app platform on azure
American Fuzzy Lop
Still not working?
American Fuzzy Lop
You are getting to azure to sign in? Its just when it comes back, you get an error? Hard to debug without seeing how you are doing your msal configuration and initialization
Hi
We are trying to setup authentication on our website that is using Next JS 14.2 that is using App router and hence we are using Microsoft Azure SSO to login and register users and then perform conditional rendering by comparing user tokens

But when we click on register -> Register using microsoft SSO , an error comes up as described below -

[auth][details]: {}
[auth][error] AdapterError: Read more at https://errors.authjs.dev#adaptererror
[auth][cause]: PrismaClientValidationError:
Invalid prisma.account.findUnique() invocation:

{
where: {
provider_providerAccountId: {
~~~~~~
providerAccountId: "IjG6P5LJDi0ebo-w9En3m2w6ZC0wUetk30HIDk_OUSo",
provider: "microsoft-entra-id"
},
? id?: String,
? providerId_providerAccountId?: AccountProviderIdProviderAccountIdCompoundUniqueInput,
? AND?: AccountWhereInput | AccountWhereInput[],
? OR?: AccountWhereInput[],
? NOT?: AccountWhereInput | AccountWhereInput[],
? userId?: StringFilter | String,
? providerType?: StringFilter | String,
? providerId?: StringFilter | String,
? providerAccountId?: StringFilter | String,
? refreshToken?: StringNullableFilter | String | Null,
? accessToken?: StringNullableFilter | String | Null,
? accessTokenExpires?: DateTimeNullableFilter | DateTime | Null,
? createdAt?: DateTimeFilter | DateTime,
? updatedAt?: DateTimeFilter | DateTime,
? user?: UserRelationFilter | UserWhereInput
},
select: {
user: true
}
}

Unknown argument provider_providerAccountId. Did you mean providerId_providerAccountId? Available options are marked with ?.

The complete server logs are attached (server_logs.txt)
this is my prisma schema
complete error
this is my src/app/api/auth/[...nextuath]/route.ts -

import NextAuth from "next-auth";
import AzureADProvider from "next-auth/providers/microsoft-entra-id";
import { PrismaAdapter } from "@next-auth/prisma-adapter";
import prisma from "@/lib/prisma";

export const { handlers, auth, signIn, signOut }= NextAuth({
  adapter: PrismaAdapter(prisma),
  providers: [
    AzureADProvider({
      clientId: process.env.AZURE_AD_CLIENT_ID,
      clientSecret: process.env.AZURE_AD_CLIENT_SECRET,
      tenantId: process.env.AZURE_AD_TENANT_ID,
      //redirectUri: process.env.AZURE_AD_REDIRECT_URI,
    }),
  ],
  callbacks: {
    async jwt({
      token,
      account,
      user,
    }: {
      token: any;
      account: any;
      user: any;
    }) {
      if (account && user) {
        token.role = user.role;
      }
      return token;
    },
    async session({ session, token }: { session: any; token: any }) {
      console.log("token", token);
      if (token?.role) {
        session.user.role = token.role;
      }
      return session;
    },
  },
  session: {
    strategy: "jwt",
  },
});

export const { GET, POST } = handlers;
American Fuzzy Lop
Ahh you are using nextauth. I asked previously if you were using the msal library. Regardless I think you have some misconfiguration. Why is the redirectUrl commented out? I use both nextauth and nuxt-auth-utils with AzureAD and it works fine. You can find examples by searching and just plug in your environment variables…
I commented bcoz it was showing this error

Object literal may only specify known properties, and 'redirectUri' does not exist in type 'MicrosoftEntraIDOptions<any>'.ts(2353)
and yeah I have already set it in the .env as -

AZURE_AD_REDIRECT_URI="http://localhost:3000/api/auth/callback/microsoft-entra-id"
so I had to comment it out @American Fuzzy Lop
American Fuzzy Lop
Got it. Test it using basic nextjs app with nextauth with no prisma adapter.

Have you been able to do auth with Azure before?