After having cloned the repository, just access it and enter the Keycloak environment folder, and run the environments with Docker compose.

$cd keycloak-nextjs-nodejs$cd docker/keycloak$ docker-compose up -d

Now go tohttp://localhost:8080 and see if Keycloak opens in your browser.

ARealm manages a set of users, credentials, roles, and groups. A user belongs to and logs into a realm. Realms are isolated from one another and can only manage and authenticate the users that they control.

1. Go tohttp://localhost:8080/auth/admin and log in to the Keycloak Admin Console using the admin credentials, by default the user isadmin and the password isadmin.
2. From theMaster drop-down menu, clickAdd Realm. When you are logged in to the master realm this drop-down menu lists all existing realms.
3. Typeapps in theName field and clickCreate.

When the realm is created, the main admin console page opens. Notice the current realm is now set toapps. Switch between managing themaster realm and the realm you just created by clicking entries in theSelect realm drop-down menu.

Make sureapps is selected for the below configurations. Avoid using the master realm. You don’t have to create the realm every time. It’s a one time process.

Clients are entities that can request Keycloak to authenticate a user. Most often, clients are applications and services that want to use Keycloak to secure themselves and provide a single sign-on solution. Clients can also be entities that just want to request identity information or an access token so that they can securely invoke other services on the network that are secured by Keycloak.

1. Click on theClients menu from the left pane. All the available clients for the selected Realm will get listed here.

2. To create a new client, clickCreate. You will be prompted for aClient ID, aClient Protocol and aRoot URL. A good choice for the client ID is the name of your application, the client protocol should be set toopenid-connect and the root URL should be set to the application URL.

After saving you will be presented with the client configuration page where you can assign a name and description to the client if desired.

Set theAccess Type toconfidential,Authorization Enabled toON,Service Account Enabled toON and clickSave.

Credentials tab will show theClient Secret which is required for the Node.js Application Keycloak configurations.

Go toClient Roles tab to create thenodejs role definitions. Imagine the Application that you are building with have different types of users with different user permissions. Ex: users and administrators.

• Some APIs would only be accessible to users only.
• Some APIs would be accessible to administrators only.
• Some APIs would be accessible to both users and administrators.

As per the example, let’s create two roles:user andadmin by clickingAdd Role button.

After saving you will be presented with the client configuration page where you can assign a name and description to the client if desired.

Set theAccess Type toconfidential,Authorization Enabled toON,Service Account Enabled toON and clickSave.

Credentials tab will show theClient Secret which is required for the Next Auth configurations.

Applications often assign access and permissions to specific roles rather than individual users as dealing with users can be too fine grained and hard to manage.

Let’s createapp-user andapp-admin Realm roles by assigning correspondingnodejs roles (user,admin).

1. Click on theRoles menu from the left pane. All the available roles for the selected Realm will get listed here.

2. To createapp-user realm role, clickAdd Role. You will be prompted for aRole Name, and aDescription. Provide the details as below andSave.

AfterSave, enabledComposite Roles and Search fornodejs underClient Roles field. Selectuser role of thenodejs and ClickAdd Selected >.

This configuration will assignnodejsuser client role to theapp-user realm role. If you have multiple clients with multiple roles, pick and choose the required roles from each client to create realm roles based on the need.

3. Follow the same steps to create theapp-admin user but assignadmin client role instead ofuser role.

Users are entities that are able to log into your system. They can have attributes associated with themselves like email, username, address, phone number, and birth day. They can be assigned group membership and have specific roles assigned to them.

Let’s create following users and grant themapp-user andapp-admin roles for testing purposes.

• employee1 withapp-user realm role
• employee2 withapp-admin realm role
• employee3 withapp-user &app-admin realm roles

1. From the menu, clickUsers to open the user list page.

2. On the right side of the empty user list, clickAdd User to open the add user page.

3. Enter a name in theUsername field; this is the only required field. Flip theEmail Verified switch fromOff toOn and clickSave to save the data and open the management page for the new user.

4. Click theCredentials tab to set a temporary password for the new user.

5. Type a new password and confirm it. Flip theTemporary switch fromOn toOff and clickReset Password to set the user password to the new one you specified. For simplicity let’s set the password tomypassword for all the users.

6. Click theRole Mappings tab to assign realm roles to the user. Realm roles list will be available inAvailable Roles list. Select one required role and click on theAdd Selected > to assign it to the user.

After role assignment, assigned roles will be available underAssigned Roles list. Role assignments foremployee1,employee2, andemployee3 would be as below.

Yes, it was a bit of a hassle to go through all the configurations. But when you keep using Keycloak, these configurations will become a piece of cake. For new application getting added, you don’t need to do all of the above. You just need to add a new client with client roles and assign the client roles to corresponding realm roles.

Let’s quickly test the authentication of some user created above and see if the tokens are being generated correctly.

1. Go toRealm Settings of theapps from the left menu and click onOpenID Endpoint Configuration to view OpenID Endpoint details.

Keycloak Realm OpenID Endpoint Configuration

2. Copytoken_endpoint from theOpenID Endpoint Configuration. URL would look like:

<KEYCLOAK_SERVER_URL>/auth/realms/<REALM_NAME>/protocol/openid-connect/tokenEx: http://localhost:8080/auth/realms/apps/protocol/openid-connect/token

3. Use the following CURL command to generate user credentials. ReplaceKEYCLOAK_SERVER_URL,REALM_NAME,CLIENT_ID,USERNAME,PASSWORD with correct values.

curl -X POST '<KEYCLOAK_SERVER_URL>/auth/realms/<REALM_NAME>/protocol/openid-connect/token' \  --header 'Content-Type: application/x-www-form-urlencoded' \  --data-urlencode 'grant_type=password' \  --data-urlencode 'client_id=<CLIENT_ID>' \  --data-urlencode 'username=<USERNAME>' \  --data-urlencode 'password=<PASSWORD>'

Execute the CURL from Terminal or use Insomnia/Postman. The response would look like below.

To access this setting you need to go to:Realm settings and thenTokens.

You can change the expiration time of the tokens, by default theaccess_token has an expiration of5min and therefresh_token has an expiration of30min, you can increase this time if you want.

In this case, I have the following configuration:

• access_token: 30min
• refresh_token: 1day

This application is very simple, it has some endpoints that are protected with Keycloak, that is, the user to be able to consume that endpoint needs to be authenticated and have all the roles that the endpoint needs to access it.

First install all dependencies

$cd keycloak-nextjs-nodejs/nodejs$ npm install

Now execute API

$cd keycloak-nextjs-nodejs/nodejs$ npm run dev

The API after running will be available on port 3333.

First access the nextjs app folder

$cd keycloak-nextjs-nodejs/nextjs

Install all dependencies

$ npm install

Configure environment variables, some variables where inserted, add a value to variableKEYCLOAK_CLIENT_SECRET from yourclient in Keycloak

$ cp .env.local.example .env.local

Now execute app

$cd keycloak-nextjs-nodejs/nextjs$ npm run dev

The app after running will be available on port 3000.

Logged

Logged out

This application, when making a request to the API endpoints in Node.js, if the access token expires, an Axios interceptor was created to monitor and perform the auto refresh token and with that the call that failed due to the token being invalid will work.