Having trouble connecting to Keycloak

[samuel-esp]

Question 💬

I'm having some trouble integrating Keycloak with Next-Auth, i keep getting "signin?error=OAuthSignin - try signin in with a different account" as soon as i click the Keycloak button that should redirect me to the Keycloak sign in page.

My env file:

KEYCLOAK_ID=clientID
KEYCLOAK_SECRET=token generated in the Keycloak credentials section with "Client and Secret ID" option set
KEYCLOAK_ISSUER=http://localhost:8080/realms/myrealmname

NEXTAUTH_URL=http://localhost:3000/

This is the error i get from the console

  error: {
    message: 'connect ECONNREFUSED ::1:8080',
    stack: 'Error: connect ECONNREFUSED ::1:8080\n' +
      '    at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1237:16)',
    name: 'Error'
  },
  providerId: 'keycloak',
  message: 'connect ECONNREFUSED ::1:8080'
}

How to reproduce ☕️

My env file:

KEYCLOAK_ID=clientID
KEYCLOAK_SECRET=token generated in the Keycloak credentials section with "Client and Secret ID" option set
KEYCLOAK_ISSUER=http://localhost:8080/realms/myrealmname

NEXTAUTH_URL=http://localhost:3000/

Keycloak access type is set to confidential

This is the error i get from the console

  error: {
    message: 'connect ECONNREFUSED ::1:8080',
    stack: 'Error: connect ECONNREFUSED ::1:8080\n' +
      '    at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1237:16)',
    name: 'Error'
  },
  providerId: 'keycloak',
  message: 'connect ECONNREFUSED ::1:8080'
}

_AppJs file

import '../styles/globals.css'
import { SessionProvider } from "next-auth/react"

function MyApp({ Component, pageProps: { session, ...pageProps } }) {
  return (
      <SessionProvider session={pageProps.session}>
          <Component {...pageProps} />
      </SessionProvider> )
}

export default MyApp

index.js

import {signIn, signOut, useSession} from "next-auth/react";

export default function Home() {
  const { data: session } = useSession()

  if (session) {
    return (
        <> Signed in as {session.user.email} <br />
          <button onClick={() => signOut()}>Sign out</button>
        </>
    )
  }
  return (
      <> Not signed in <br />
        <button onClick={() => signIn()}>Sign in</button>
      </>
  )
}

dependencies

{
  "name": "dragonblocks-gui",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "12.2.3",
    "next-auth": "^4.10.2",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.7",
    "eslint": "8.20.0",
    "eslint-config-next": "12.2.3",
    "postcss": "^8.4.14",
    "tailwindcss": "^3.1.6"
  }
}

Contributing 🙌🏽

Yes, I am willing to help answer this question in a PR

[samuel-esp]

I'm still trying but not luck, I added the github provider and it works like a charm i really don't know what's wrong with keycloak

[enfochannel]

did you check if your keycloak server is running? It says connection refused. So make sure your Keycloak app is running on port 8080. In my case I had same issue and realized that my keycloak_issuer URL was wrong and server was not running as well. After fixing both, it works just fine.

Here is my [...nextauth].ts file:

import KeycloakProvider from "next-auth/providers/keycloak";
export const authOptions: NextAuthOptions = {
 providers: [
KeycloakProvider({
      clientId: process.env.KEYCLOAK_ID,
      clientSecret: process.env.KEYCLOAK_SECRET,
      issuer: process.env.KEYCLOAK_ISSUER,
    })
],
...
env.local
NEXTAUTH_URL=http://localhost:3000

KEYCLOAK_ID=client
KEYCLOAK_SECRET=xxxx
KEYCLOAK_ISSUER=http://localhost:8080/realms/[realm-name]

Ref: https://next-auth.js.org/providers/keycloak

[robinnepomukmai]

Hey @samuel-esp,

As you can see in the error message your Keycloak address http://localhost:8080 is somehow translated to ::1:8080, which is the IPv6 address equivalent of localhost. Somehow IPv6 seems to be disabled in your setup.

You can "fix" your error by changing your Keycloak Issuer URI from http://localhost:8080... to http://0.0.0.0:8080.

I hope was able to help you 👋

[NickEsColR]

I am having the same trouble and already try using the ip 0.0.0.0:8080 but still got the error.

[DavidPotentor]

Do you can solve this?

[nvijayap]

I am also facing this issue

[indapublic]

+1

[longheng369]

I also had this problem, but when I ran Keycloak inside a Docker container and ran Next.js separately on the host machine, it worked.