search

itpropro / nuxt-oidc-auth

OIDC (OpenID connect) focused auth module for Nuxt
https://nuxtoidc.cloud
MIT License
84 stars 22 forks source link

Token Request Failed - OIDC Keycloak 23.0.6 #51

Closed denyFh closed 1 month ago

denyFh commented 2 months ago

Hello, I am having an issue on using keycloak with the nuxt-oidc-auth. Currently I'm cloning your main repository branch and editing the nuxt.config.ts while focusing on using the Keycloak 23.0.6 as the defaultProvider and adding some baseUrl and clientId + secret like this.

oidc: {
    defaultProvider: 'keycloak',
    providers: {
      keycloak: {
        audience: 'account',
        baseUrl: 'process.env.NUXT_OIDC_PROVIDERS_KEYCLOAK_BASE_URL',
        clientId: 'process.env.NUXT_OIDC_PROVIDERS_KEYCLOAK_CLIENT_ID',
        clientSecret: 'process.env.NUXT_OIDC_PROVIDERS_KEYCLOAK_CLIENT_SECRET',
        redirectUri: 'http://localhost:3001/auth/keycloak/callback',
      },
    },
    session: {
      expirationCheck: true,
      automaticRefresh: true,
      expirationThreshold: 3600,
    },
    middleware: {
      globalMiddlewareEnabled: true,
      customLoginPage: true,
    },
    devMode: {
      enabled: false,
      generateAccessToken: true,
      userName: 'Test User',
      providerInfo: { providerName: 'test' },
      claims: { customclaim01: 'foo', customclaim02: 'bar' },
      issuer: 'dev-issuer',
      audience: 'dev-app',
      subject: 'dev-user',
    },
  },

It does direct me to my keycloak login and then after logging in, it does record the logged session into the keycloak but the UI for the localhost:3001/auth/keycloak/callback doesn't return to '/' and show this instead. image

while the console on the chrome returns this. image

For my keycloak, I already set this configuration to accept all redirects image

So, is there any example config on the keycloak admin console I need to enable this token request process? or is there anything needs to be configured more in the nuxt.config.ts? Hope you can help reply soon...

ah for the nuxt here's my nuxt info

nuxt-oidc-auth % npx nuxi info
Working directory: /Sites/nuxt-oidc-auth                                                                                                                    
Nuxt project info: (copied to clipboard)                                                                                                                                    5:55:01 PM

------------------------------
- Operating System: Darwin
- Node Version:     v20.17.0
- Nuxt Version:     3.13.0
- CLI Version:      3.13.1
- Nitro Version:    2.9.7
- Package Manager:  pnpm@9.10.0
- Builder:          -
- User Config:      -
- Runtime Modules:  -
- Build Modules:    -
------------------------------

Thanks!

itpropro commented 2 months ago

Hi, are you running Nuxt in SSR mode? KeyCloak has some problems as it leads users to misuse access and identity tokens to contain a lot of user information, which can lead to the cookies exceeding the maximum defined cookie size. The example config from the playground works with a blank keycloak docker container in the current version.

Have you also considered these two hints from the docs?

Please include the realm you want to use in the baseUrl (e.g. https:///realms/). Also remember to enable Client authentication to be able to get a client secret.

denyFh commented 2 months ago

Yes, i'm currently running the Nuxt in SSR mode as is because I haven't done any changes other than the oidc settings for keycloak and for the .env here's the one i use, as for the baseUrl is already included with realms and the Client authentication is already set to 'ON' from the previous image in the keycloak image configuration

image

Now my current experiment got some progress when I serve keycloak on two ports where each use http and https. The one with http does redirect me to the redirect page from your playground where it returns the user object full of user information. But then when I tried to use the keycloak realms served in https it proceed with the error I encounter in this issue.

itpropro commented 2 months ago

Fan you share your Keycloak config, so I can reproduce that locally?

denyFh commented 2 months ago

Sure here's the keycloak i serve using docker config and please do correct me if there's something I wrongly implement on the keycloak config!

networks: keycloak-network: external: true name: keycloak-network


- Dockerfile (I included extra command for keycloakify starter for login page theme which I think you can safely remove)
```# Stage 1: Build keycloak themes with keycloakify
FROM node:18 as keycloakify_jar_builder

# Install dependencies
RUN apt-get update && apt-get install -y default-jdk maven

# Copy package files and install dependencies for keycloak-theme
WORKDIR /opt/keycloak-theme
COPY ./keycloak-theme/package.json ./keycloak-theme/yarn.lock ./
RUN yarn install --frozen-lockfile

# Copy the rest of the keycloak-theme files and build
COPY ./keycloak-theme/ ./
RUN yarn build-keycloak-theme

# Stage 2: Build Keycloak with custom themes
FROM quay.io/keycloak/keycloak:23.0.6 as builder

WORKDIR /opt/keycloak

# Copy the built theme jar from the previous stage
COPY --from=keycloakify_jar_builder /opt/keycloak-theme/dist_keycloak/keycloak-theme-for-kc-22-and-above.jar /opt/keycloak/providers/

# Build Keycloak
RUN /opt/keycloak/bin/kc.sh build

# Stage 3: Final Keycloak image with custom themes
FROM quay.io/keycloak/keycloak:23.0.6

COPY --from=builder /opt/keycloak/ /opt/keycloak/

# Set environment variables
# ENV KC_HOSTNAME=localhost
ENV KC_HOSTNAME=myserversitename.com

# Start Keycloak
ENTRYPOINT ["/opt/keycloak/bin/kc.sh", "start-dev"]
itpropro commented 2 months ago

Sure here's the keycloak i serve using docker config and please do correct me if there's something I wrongly implement on the keycloak config!

  • docker-compose.yml (currently the crt and key is generated from openSSL) ...

Start Keycloak

ENTRYPOINT ["/opt/keycloak/bin/kc.sh", "start-dev"]

Thanks for that! I will test that tomorrow and provide feedback and a bugfix or a config fix :)

itpropro commented 1 month ago

I was not able to reproduce the issue. I created a new realm called oidc-test and configured a client with these settings: image image

My oidc-auth settings are these: nuxt.config.ts

  oidc: {
    defaultProvider: 'github',
    providers: {
      keycloak: {
        audience: 'account',
        baseUrl: '',
        clientId: '',
        clientSecret: '',
        redirectUri: 'http://localhost:3000/auth/keycloak/callback',
      },
    },
    session: {
      expirationCheck: true,
      automaticRefresh: true,
      expirationThreshold: 3600,
    },
    middleware: {
      globalMiddlewareEnabled: true,
      customLoginPage: true,
    }
  },

.env:

# KEYCLOAK ID PROVIDER CONFIG
NUXT_OIDC_PROVIDERS_KEYCLOAK_CLIENT_SECRET=XXX
NUXT_OIDC_PROVIDERS_KEYCLOAK_CLIENT_ID=9a8386f2-5665-4983-8538-ac665e870967
NUXT_OIDC_PROVIDERS_KEYCLOAK_BASE_URL=http://localhost:8080/realms/oidc-test
itpropro commented 1 month ago

Could you verify your keycloak config and test with the most current version of the package @denyFh ?

denyFh commented 1 month ago

Okay gonna try it with your config and another one with the most updated version of the keycloak. And may I ask which version of the keycloak you use for reproducing the problems? and have you tried with the https port?

PS: I might retry it and exploring again on 3 days from now because of work-related issue

itpropro commented 1 month ago

Okay gonna try it with your config and another one with the most updated version of the keycloak. And may I ask which version of the keycloak you use for reproducing the problems? and have you tried with the https port?

PS: I might retry it and exploring again on 3 days from now because of work-related issue

I have tried the current Keycloak Docker Image version (25) as well as 24 and 23.

denyFh commented 1 month ago

Hi sorry with the late-late response, I already retry it with your current settings and it doesn't return the 500 code on each login like it used to. But instead the 500 code will showed up when I try to login after idling in the Keycloak login page for about 30 mins or so. Yes the Keycloak does tell me that the login process will restart from beginning but the app will return a 500 code error first and it will vanish after I re-access localhost:3000. So I suppose it has to do with the token or session settings in my Keycloak?

And so my experiment goes further up to Trying to build a production version of the App with pnpm run build on a node server using Docker and Jenkins which successfully built but then it returns back another 500 code error on each login even after I add the new UrI for valid redirect URIs :cold_sweat:

itpropro commented 1 month ago

Hi sorry with the late-late response, I already retry it with your current settings and it doesn't return the 500 code on each login like it used to. But instead the 500 code will showed up when I try to login after idling in the Keycloak login page for about 30 mins or so. Yes the Keycloak does tell me that the login process will restart from beginning but the app will return a 500 code error first and it will vanish after I re-access localhost:3000. So I suppose it has to do with the token or session settings in my Keycloak?

And so my experiment goes further up to Trying to build a production version of the App with pnpm run build on a node server using Docker and Jenkins which successfully built but then it returns back another 500 code error on each login even after I add the new UrI for valid redirect URIs 😰

I unfortunately cannot reproduce that without additional information. I tested multiple KeyCloak versions with different configurations and if nuxt is configured accordding to the documentation, I couldn't identify any problems with KeyCloak. It has to be said that KeyCloak can be configured very granularly and my configuration tests were limited to the basic realm config as seen above and additional adjustments to token lifetimes, claims and features to make sure the core oidc functions are available. I would recommend to test around with token lifetimes or try out the most current beta version.

denyFh commented 1 month ago

Sure thanks for the help for this issue. Next time I will dig more deeper for the production version and surely create new issue if I stumble upon new case! Thanks!