[Keycloak] TypeError: fetch failed #11915
-
Provider typeKeycloak EnvironmentReproduction URLhttps://github.com/JHansen2000/KeycloakAuth Describe the issueI am trying to implement a very basic Keycloak authentication flow to my app, but get the following error when attempting to sign in. Keycloak logs show no communication attempt from the application (which is obvious given the error, below). How to reproduce
Expected behaviorThis should navigate to the keycloak login endpoint. |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 4 replies
-
|
@balazsorban44 Any help would be appreciated! |
Beta Was this translation helpful? Give feedback.
-
|
https://next-auth-example.vercel.app/ has a hosted serverless example. https://nextjs-docker-example.authjs.dev is the docker one from https://authjs.dev/getting-started/deployment Anyway, if all set up correctly, everything should work, hence the move to discussions. Otherwise the repro didn't show how keycloak was hosted, etc. might be a local connection issue. FWIW, I'm regularly using our test keycloak instance for local development, works without any issues. So I understand it's frustrating, but since I cannot reproduce this, it's highly unlikely a bug in Auth.js |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for your response, I'll look into the linked resources to see if I can figure something out. What version of Keycloak are you running against locally? I'm curious if Keycloak v25 made breaking changes, so I would like to roll back to a version of Keycloak that is known to work with Auth.js. Let me know! |
Beta Was this translation helpful? Give feedback.
-
|
@JHansen2000 I'm experiencing the same exact issue as you. Did you ever find out what was causing it? |
Beta Was this translation helpful? Give feedback.
-
|
@billgloff I was able to get my setup working, notes below:
# Keycloak Variables
AUTH_KEYCLOAK_ID=<Keycloak Client ID>
AUTH_KEYCLOAK_SECRET=<Keycloak Client Secret>
AUTH_KEYCLOAK_ISSUER=https://<domain>/auth/realms/<realm>
# Client Variables
NEXTAUTH_URL=<App URL>
AUTH_SECRET=<Auth Secret> # Added by `npx auth`. Read more: https://cli.authjs.dev
# Misc Variables
AUTH_TRUST_HOST=1 # Required because my Keycloak is behind an NGINX proxy
NODE_TLS_REJECT_UNAUTHORIZED=0 # Required for using self-signed certs: https://github.com/nextauthjs/next-auth/issues/212
// auth.ts
import NextAuth, { NextAuthConfig } from "next-auth";
import Keycloak from "next-auth/providers/keycloak";
import { NextResponse } from 'next/server';
// Hacky .env type workaround
const toBoolean = (value: string | undefined): boolean => {
return value === '1' || value === 'true';
};
export const authConfig: NextAuthConfig = {
providers: [
Keycloak({
clientId: process.env.AUTH_KEYCLOAK_ID,
clientSecret: process.env.AUTH_KEYCLOAK_SECRET,
issuer: process.env.AUTH_KEYCLOAK_ISSUER
})
],
trustHost: toBoolean(process.env.AUTH_TRUST_HOST),
callbacks: {
async authorized({ request, auth }) {
const isAuthenticated = !!auth;
const nextUrl = request.nextUrl || new URL(request.url);
// Redirect to sign-in if not authenticated
if (!isAuthenticated) {
return NextResponse.redirect(new URL('/api/auth/signin', nextUrl));
}
if (isAuthenticated && nextUrl.pathname === '/api/auth/signin') {
return NextResponse.redirect(new URL('/', nextUrl));
}
return true;
},
},
};
export const { auth, handlers, signIn, signOut } = NextAuth(authConfig);Hopefully this helps you move in the right direction. If you are still struggling, I would recommend making sure your Keycloak is deployed and configured correctly. I spent a large amount of time troubleshooting just to find that my Keycloak (deployed in Kubernetes) was behind an 'NGINX Ingress' proxy instead of an 'Ingress-NGINX' proxy. As a note to the NextAuth team, it would be really helpful to have some better error handling for this. I've had |
Beta Was this translation helpful? Give feedback.
@billgloff I was able to get my setup working, notes below:
fetch failederror seems to be a catch-all for a large variety of errors. I received the same error for issues stemming from both Keycloak misconfiguration and NextAuth failures.auth.tshelped a lot.