How To Integrate Keycloak in NuxtJs

Step by step guide to integrate the keycloak in NuxtJs

Photo by Pankaj Patel on Unsplash

I’m Anamol Soman and I’m a web developer. In this blog, we will see how to integrate the keycloak with NuxtJs for authentication management. So let's start without wasting any time

What is keycloak

Keycloak is an open-source Identity and Access Management solution targeted towards modern applications and services. In keycloak, we can handle user authentication and authorization workflow very easily without writing a single API. In this blog, we will cover only the authentication part (Login and Logout). for better understanding we can say keycloak is like a Content Management System where we can handle all authentication workflow by only setting some fields, and it's completely free.

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

Setup Keycloak Admin

If you choose the dockerized setup then you can pass username and password in command for admin login or if you are using rar file then it will show you a screen to set up the admin credentials.

Create a realm

After login, the first thing we are going to do is create a realm. by default, there is the master 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 client Id, Here we are using test-client as 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 users and then add users. here we will create a test user and set a username and email for it. after user creation, click on the user and then goes to the credentials tab and sets the password. just remember one thing turn off the temporary option in the credentials tab.

we are done with the keycloak initial setup. note one thing in this blog we are not covering the email validation or forgot password action. I will write separate blogs for it.

Install And Setup Nuxt Auth Module

Install the keycloak nuxt auth module. then go to nuxt.config.js and setup the configuration which is shown below

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 that valid redirect URL which we configure in the keycloak client and use the below method for logout. That's it, our login logout workflow is ready without writing any API.

this.$auth.logout();

Conclusion

We learn how to integrate keycloak login and logout with nuxtjs in this blog. In the next blogs, we will see how to handle forgot password, setup SMTP, and User role management in Vuejs/Nuxtjs. If you have any issues let me know in the comment section or you can mail me directly I will try my best to help you.

“If you enjoyed my content, consider supporting my work by buying me a coffee on Ko-fi. Your contribution fuels my creativity and helps me keep producing quality content. Every coffee is deeply appreciated! Thanks for being an awesome supporter! Buy a Coffee”

Thank You