Search code examples
javascriptreactjsauthenticationnext.jskeycloak-connect

Unable to Sign In with Keycloak using NextAuth in Next.js Application [next-auth][error][SIGNIN_OAUTH_ERROR]

I'm trying to set up authentication for my Next.js application using NextAuth and Keycloak. Despite following the documentation, I'm encountering an issue when attempting to sign in with Keycloak.

My Setup

Next.js: 13.x, NextAuth: 4.x, Keycloak: 25.x

pages/api/auth/[...nextauth].js

// pages/api/auth/[...nextauth].js
import NextAuth from "next-auth";
import KeycloakProvider from "next-auth/providers/keycloak";

export default NextAuth({
  providers: [
    KeycloakProvider({
      clientId: process.env.KEYCLOAK_CLIENT_ID,
      clientSecret: process.env.KEYCLOAK_CLIENT_SECRET,
      issuer: process.env.KEYCLOAK_ISSUER,
    }),
  ],
  session: {
    jwt: true,
  },
  debug: true, // Enable debug mode
  callbacks: {
    async jwt({ token, account, user }) {
      if (account) {
        token.accessToken = account.access_token;
        token.user = token.user;
      }
      return token;
    },
    async session({ session, token }) {
      session.accessToken = token.accessToken;
      session.user = token.user;
      return session;
    },
  },
});

.env

KEYCLOAK_CLIENT_ID=your-client-id
KEYCLOAK_CLIENT_SECRET=your-client-secret
KEYCLOAK_ISSUER=http://localhost:8080/realms/myrealm

Keycloak Configuration:

I have configured my Keycloak client with the following settings:

Client ID: your-client-id
Client Protocol: openid-connect
Access Type: confidential
Root URL: http://localhost:3000
Valid Redirect URIs: http://localhost:3000/api/auth/callback/keycloak
Web Origins: http://localhost:3000

In console I see

[next-auth][error][SIGNIN_OAUTH_ERROR] https://next-auth.js.org/errors#signin_oauth_error Unable to find matching target resource method (For more on this error consult the server log at the debug level.)

What could be causing the SIGNIN_OAUTH_ERROR with the message "Unable to find matching target resource method"? How can I resolve this issue to successfully sign in with Keycloak?

Please let me know if any additional details are required or if there are specific configurations I need to double-check. Any help would be greatly appreciated!

Thanksenter image description here

Solution

  • With Keycloak 25.x, valid redirect URIs should not use auth, such as http://localhost:3000/api/auth/callback/keycloak. Instead, they should be formatted like this: http://localhost:3000/api/callback/keycloak.