A Detailed Guide to Securing React applications with Keycloak

GETTING STARTED WITH KEYCLOAK

Quick steps to get started with Keycloak:

  • Install and boot your keycloak server by downloading the server zip file, unzipping it and booting it using standalone.bat in windows and standalone.sh in Linux
  • Once the server boots, you can open the server in your browser using http://localhost:8080/auth and see the welcome page which shows that the server is running.
Get started with Keycloak — WalkingTree technologies
  • First create the admin account, using which you can login to the master realm’s administration console, from which you can create other realms and users and also register your applications to be secured by Keycloak.
    The realm is like a namespace for the configuration that allows you to manage the entire metadata/configuration within different buckets called realms. By default you get the master realm, which should be used for administration purposes only, and you should avoid creating your configuration in the master. You can create multiple realms based on your requirement and create your users and register your applications within them.
  • Next you can login to the admin console (http://localhost:8080/auth/admin/) using the admin account details you created in step 3.
  • In the admin console, you can create a new Realm called demo from the Master drop-down menu by clicking Add Realm option.
  • Include the identity provider by adding social networks like Google, using which you want to facilitate sign-in by providing the google app client id and secret key.
  • For this, you need to add your application in the google developers console(https://console.developers.google.com/).
  • Create a new google project.
  • Setup OAuth consent screen by selecting external/internal depending on the level of google authentication you wish to apply.
  • Create credentials by providing the keycloak url(http://localhost:8080/auth/realms/demo/broker/google/endpoint) as the Authorised redirect URIs. This will give you the client id and secret key which you will use in the next step for adding identity providers
  • Add identity provider by using the client id and client secret you got from google console for your new application
  • Now select the newly created Realm from the drop-down, you can perform the other metadata setup.
  • Next, create a Client for your React application which you want to secure with Keycloak Root Url: Application Hostname
    Client ID: demo
    Protocol: ‘OpenID-Connect/SAML’

PROCESS TO SETUP REACT APPLICATION WITH KEYCLOAK

  • Let’s first create our application using the below command.
    npx create-react-app react-keycloak-app
  • Install the keycloak-js dependency
    npm install keycloak-js
  • The keycloak configuration can be saved as a json file under the public folder by creating a resources subfolder.

Conclusion

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store