How to configure Keycloak for a Web App

Nikolay Mihaylov
3 min readOct 19, 2020

--

Your Web App needs to use Keycloak to authenticate its users or simply to acquire an access token? Here is how you can configure Keycloak to accept its requests.

Keycloak configuration for a web app

Create a realm

Firstly, let’s create a new realm. If you already have a realm you want to use you can skip this section.

In your Keycloak’s Admin Console look for the drop-down in the upper left corner and click on Add Realm:

Add realm button

In the Name field type the name of the realm, I will call mine webapp, then click create:

Create a new realm

Once the new realm is created it will automatically be selected and we can now move to the next step.

Create a new client

In the side menu, select clients and then click the Create button.

For the name, I will use again webapp, Client Protocol should be openid-connect by default.

Configuring the client

Now, here comes the tricky party. In the client’s settings, you must set the Valid Redirect URL to the URL of your app with the forward slash at the end. My app runs on localhost:8000 so I used http://localhost:8000/. In Web Origins, however, you must type in the Web app's URL again without the forward slash at the end. Direct Grant should be off if you don’t need it and Access Type should be public.

Configure the client

Create a user

The final thing we need to do is create a user, which will be used to login when authenticating through the web app. Go to Users and Add new, type its name and click save.

Create a new user

In the users' settings, open the Credentials tab, and create a new password. If you make it temporary it will be used only for the initial authentication and the user will be prompted to create a new one.

Set password

And voilà, you are all set up to receive authentication requests from your web app.

Where to go from here

To hook up your web app to Keycloak you will need the realm name, client id (the name of the client), and the URL of your Keycloak server. For an example on how to do that you can check out my article on Keycloak integration with Gatsby/React. Cheers!

--

--