Skip to content

Keycloak with nuxt-auth module

ggorlen
zakaria Bouzangad

I’m using this auth-module with Keycloak.

My configuration in nuxt.config.js:

keycloak: {
    _scheme: 'oauth2',
    client_id: 'client-bo',
    userinfo_endpoint: 'SERVER/protocol/openid-connect/userinfo',
    authorization_endpoint: 'SERVER/protocol/openid-connect/auth',
    //userinfo_endpoint: false,
    access_type: 'offline',
    access_token_endpoint: 'SERVER/protocol/openid-connect/token',
    //response_type: 'code',
    response_type: 'token id_token',
    token_type: 'Bearer',
    token_key: 'access_token',
    scope: ['openid', 'profile', 'email'],
    redirect_uri: 'http://127.0.0.1:3000/'        
}

The connection is OK.

When I click on the “connect” button, I am redirected to my Keycloak environment. Once authenticated by Keycloak, I am redirected to my nuxt.js application.

However, the problem is that my store is empty. Do you have any ideas about what causes this problem?

loggedIn: is always false

user: is always null

Can you tell me why it doesn’t work?

Advertisement

Answer

I had similar issue, and was finally able to get it to work with the following configuration:

package.json

 "@nuxtjs/auth-next": "5.0.0-1607534757.1122b76"

nuxt-config.json

auth: {
keycloak: {
    scheme: 'oauth2',
    endpoints: {
        authorization: `${process.env.KEYCLOAK_HOST}/auth/realms/${process.env.KEYCLOAK_REALM}/protocol/openid-connect/auth`,
        userInfo: `${process.env.KEYCLOAK_HOST}/auth/realms/${process.env.KEYCLOAK_REALM}/protocol/openid-connect/userinfo`,
        token: `${process.env.KEYCLOAK_HOST}/auth/realms/${process.env.KEYCLOAK_REALM}/protocol/openid-connect/token`,
        logout: `${process.env.KEYCLOAK_HOST}/auth/realms/${process.env.KEYCLOAK_REALM}/protocol/openid-connect/logout?redirect_uri=` + encodeURIComponent(String(process.env.HOME_URI))
    },
    token: {
        property: 'access_token',
        type: 'Bearer',
        name: 'Authorization',
        maxAge: 1800 // Can be dynamic ?
    },
    refreshToken: {
        property: 'refresh_token',
        maxAge: 60 * 60 * 24 * 30 // Can be dynamic ? 
    },
    responseType: 'code',
    grantType: 'authorization_code',
    clientId: process.env.KEYCLOAK_CLIENT_ID,
    scope: ['openid', 'profile', 'email'],
    codeChallengeMethod: 'S256',
},
    redirect: {
        logout: '/',
        callback: '/',
        home: '/dashboard'
    },
}

Login function:

 login() {
  this.$auth.loginWith("keycloak");
},

I had seen that GitHub had issues reported on the Nuxt Auth module, but was able to get it to work with this configuration. Hope this helps someone.