How to configure Keycloak for a Web App
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.
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:
In the Name field type the name of the realm, I will call mine webapp, then click create:
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.
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.
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.
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!
