Your NuxtJS application can now be authenticated easily with Keycloak.

In this post, we will see how to integrate the keycloak with NuxtJs for authentication management. So let’s start right away.

Keycloak

Keycloak is an open-source Identity and Access Management solution designed for modern applications and services. It is very easy to handle user authentication and authorization workflow with keycloak since we don’t need to write a single API for it. In this article, we will focus on the authentication part (Login and Logout). The keycloak system is similar to a Content Management System, where you can manage all authentication workflows by setting a few fields, and it’s completely free.

NuxtJS

Nuxt.js is a free and open-source JavaScript library grounded on Vue.js, Node.js, Webpack andBabel.js. Nuxt is inspired by Next.js, which is a frame of analogous purpose, grounded on React.js.

Authentication made easy in Nuxt.js with Keycloak

Keycloak Installation

There are multiple ways to install keycloak we can use dockerized keycloak or download a RAR file and run it on the server. I have written a separate blog for it please go through that blog — Step by step keycloak installation

Create a realm

By clicking on add realm we can add our test realm. just add realm name and click on save.

Create a client

Click on clients and add a client by adding just the client Id, Here we are using test-client as the client id

After creating a client we need to set the root URL, redirection URL, base Url, etc. In the below screen, I have set all the required fields you just need to place your local URL where your nuxt project is running and click on save

Create a User

Click on druggies and also add druggies. then we will produce a test stoner and set a username and dispatch for it. after stoner creation, click on the stoner and also goes to the credentials tab and sets the word. just remember one thing turn off the temporary option in the credentials tab.

We are finished with the initial keycloak configuration. Note one thing in this blog, we do not cover e-mail confirmation or password action forgotten.

Install And Setup Nuxt Auth Module

We assume that you have a default Nuxt setup and an understanding of the Nuxt operation.

Install the keycloak nuxt auth module. Then go to nuxt.config.js and configure the module

yarn add --exact @nuxtjs/auth-next
yarn add @nuxtjs/axios

// or 

npm install --save-exact @nuxtjs/auth-next
npm install @nuxtjs/axios

nuxt.config.js

{
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/auth-next'
  ],
   auth: {
    strategies: {
      local: false,
      keycloak: {
        scheme: "oauth2",
        endpoints: {
          authorization:
            process.env.KEYCLOAK_API_URL +
            "auth/realms/test-realm/protocol/openid-connect/auth",
          token:
            process.env.KEYCLOAK_API_URL +
            "auth/realms/test-realm/protocol/openid-connect/token",
          userInfo:
            process.env.KEYCLOAK_API_URL +
            "auth/realms/test-realm/protocol/openid-connect/userinfo",
          logout:
            process.env.KEYCLOAK_API_URL +
            "auth/realms/test-realm/protocol/openid-connect/logout?redirect_uri=" +
            encodeURIComponent("http://localhost:3000/home"),
        },
        token: {
          property: "access_token",
          type: "Bearer",
          name: "Authorization",
          maxAge: 300,
        },
        refreshToken: {
          property: "refresh_token",
          maxAge: 60 * 60 * 24 * 30,
        },
        responseType: "code",
        grantType: "authorization_code",
        clientId: "test-client",
        scope: ["openid", "profile", "email"],
        codeChallengeMethod: "S256",
      },
    },
    redirect: {
      login: "/home",
      // logout: "/login",
      home: "/",
    },
  },
}

Here is the process.env.KEYCLOAK_API_URL means your localhost URL where your keycloak is running. then add the realm name and client Id after this our configuration part is done now we just need to call the login page. for that, we need this method

this.$auth.loginWith("keycloak");

This will redirect to the keycloak login page and after login. it redirects to the valid redirect URL we have configured in the keycloak client.
Use the method below to login out. That’s it, our log-on and log-out workflow is ready without writing any API.

this.$auth.logout();

References

https://auth.nuxtjs.org/schemes/oauth2

https://www.keycloak.org/securing-apps/vue