Nuxt auth-next with keycloak CORS problem

Question

Versions:

keycloak 12.0.2
nuxt: 2.14.6 
nuxt/auth-next: 5.0.0-1622918202.e815752

Configs:

nuxt.config.js

    auth: {
        strategies: {
            keycloak: {
                scheme: '~/plugins/keycloak.js',
                endpoints: {
                  authorization:'https://keycloak.bgzchina.com/auth/realms/bgzchina/protocol/openid-connect/auth',
                  token:'https://keycloak.bgzchina.com/auth/realms/bgzchina/protocol/openid-connect/token',
                  userInfo: "https://keycloak.bgzchina.com/auth/realms/bgzchina/protocol/openid-connect/token",
                  logout:'https://keycloak.bgzchina.com/auth/realms/bgzchina/protocol/openid-connect/logout',
                },
                responseType: 'id_token token',
                clientId: 'centuari-portal-fe',
                scope: ['openid'],
              }
        },
        redirect: {
            login: '/login',
            logout: '/logout',
            callback: '/callback',
            home: '/',
          }
    },
    router: {
      middleware: ['auth']
    },

due to a issue with current version nuxt/auth-next, I created a custom scheme by extending oauth2

/plugin/keycloak.js

import { Oauth2Scheme } from '~auth/runtime'

function encodeQuery(queryObject) {
    return Object.entries(queryObject)
        .filter(([_key, value]) => typeof value !== 'undefined')
        .map(([key, value]) => encodeURIComponent(key) + (value != null ? '=' + encodeURIComponent(value) : ''))
        .join('&')
}

export default class KeycloakScheme extends Oauth2Scheme {
    logout() {
        if (this.options.endpoints.logout) {
            const opts = {
                client_id: this.options.clientId,
                post_logout_redirect_uri: this._logoutRedirectURI
            }
            const url = this.options.endpoints.logout + '?' + encodeQuery(opts)
            window.location.replace(url)
        }
        return this.$auth.reset()
    }
}

but when doing login, browser will block the token request due to CORS. keycloak server response for the preflight specify allowed method is POST, OPTIONS, but auth-next use GET to fetch token.

Is there any work around ?

CORS is related to the backend or the service that you're using for the auth, here you need to whitelist `localhost` and your `production` URLs. — kissu, Jun 11 '21 at 07:36
`GET` to fetch token? Really, https://openid.net/specs/openid-connect-core-1_0.html#TokenRequest - I would use library, which follows OIDC specification (so `POST` for token request). I bet that Keycloak will reject that GET request when you resolve CORS problem. — Jan Garaj, Jun 11 '21 at 09:30
I do have `POST` to fetch my JWT tokens, while using `nuxt-auth`. Didn't changed the configuration on this point AFAIK. Maybe `tokenRequired: true, tokenType: 'JWT',` ? — kissu, Jun 11 '21 at 09:34

score 0 · Answer 1 · answered Dec 31 '21 at 13:00

You need to add/register the url into keycloak admin dashboard.

Go to keycloak admin dashboard
Menu Clients => select the client
On Settings tab, scroll down the page and find Web Origins. Add your frontend url (nuxt url) on it. Don't forget to add into Valid Redirect URIs too.

Nuxt auth-next with keycloak CORS problem

1 Answers1