How to login SSO Keycloak with ReactJs and Typescript

Tram Ho

Single Sign-On (SSO) is a user authentication technique that allows users to sign in to many different applications without having to enter a login name and password for each application. SSO makes it easy for users to manage their accounts and reduces the number of times users have to enter login information.

Keycloak is a free and open source Identity and Access Management (IAM) system that allows you to build SSO solutions for web and mobile applications. Keycloak provides a user interface to manage users, accounts and access rights, and can integrate with various authentication systems such as LDAP, SAML, etc. Keycloak also supports security features like password security, two-factor authentication, etc.

To use SSO (Single Sign-On) Keycloak in React, you can do the following steps:

  1. Install keycloak-js library:
  • First, you need to install the keycloak-js library with the following command:

  • You can then instantiate a Keycloak object like so:

In the above code, we initialize Keycloak with the following information:

  • url: Keycloak server address.
  • realm: The realm name configured on the Keycloak server.
  • clientId: The client name configured on the Keycloak server.
  1. Next, write a function that implements all the methods of the newly created keycloak object.

  1. Use the function just created above in the application’s container class to check the login:

  1. After the initialization is complete, we create 2 router classes to navigate for the application:
  • The class is only accessible when logged in:

  • Class accessed without login will check against the above class:

  1. Connect API:
  • After the user is successfully logged in, you can use the user access token to call APIs that require authentication. To get the access token, you can use the keycloak.token method. Eg:


Share the news now

Source : Viblo