Sheriff Quadri
Dec 2, 2021 ⋅ 7 min read

How to implement Keycloak authentication in React

Sheriff Quadri Software engineer

Recent posts:

Vite Adoption Guide Overview Examples And Alternatives

Vite adoption guide: Overview, examples, and alternatives

Vite is a versatile, fast, lightweight build tool with an exceptional DX. Let’s explore when and why you should adopt Vite in your projects.

David Omotayo
Nov 29, 2023 ⋅ 16 min read
Implementing Advanced Features With The Navigator.Share API

Implementing advanced features with the navigator.share API

Explore advanced capabilities for content sharing with the navigator.share API, including dynamic content sharing, custom share targets, and batch sharing.

David Omotayo
Nov 29, 2023 ⋅ 10 min read
Chas Peacock Leader Spotlight

Leader Spotlight: Scaling for the next phase of growth with Chas Peacock

We spoke with Chas to get his insights on building technology and internal processes for companies that are scaling quickly.

Jessica Srinivas
Nov 29, 2023 ⋅ 7 min read
Cypress Adoption Guide: Overview, Examples, Alternatives

Cypress adoption guide: Overview, examples, and alternatives

Cypress is one of today’s foremost tools for testing web applications. Let’s explore when and why you should adopt Cypress in your projects.

Paul Akinyemi
Nov 28, 2023 ⋅ 10 min read
View all posts

18 Replies to "How to implement Keycloak authentication in React"

  1. Hi Thank A lot for this tutorial. it’s been very helpful. I am writing because may be you can help me. After doing it I received this error: do you know how can I solved it?

    Error: authClient has not been assigned to ReactKeycloakProvider

    Thanks a lot!

    1. The error should be in the app.js file. You have add keycloak’s authclient to reactkeycloakprovider. Note the reactkaycloakprovider part in the code below.

      import React from “react”;
      import { ReactKeycloakProvider } from “@react-keycloak/web”;
      import keycloak from “./Keycloak”;
      import { BrowserRouter, Route, Routes } from “react-router-dom”;
      import Nav from “./components/Nav”;
      import WelcomePage from “./pages/Homepage”;
      import SecuredPage from “./pages/Securedpage”;
      import PrivateRoute from “./helpers/PrivateRoute”;

      function App() {
      return (

      <Route exact path="/" element={} />



      export default App;

  2. Hi Quadri, thanks for explaining such important concepts 😉

    I was wondering if you’ve tried to implement the same login process but with a Node.js API in between the frontend and keycloak? Is it even considered a best practice or shouldit be avoided?


  3. Great Tutorial!

    How about not having the LOGIN button at all, what changes would I need if the keycloak redirect is automatic when a user calls the “/” route if they are not already signed in? That way the app can get rid of a page that just shows a login nav bar because everything else has to be hidden behind authentication.

    1. keycloak.init({
      onLoad: ‘login-required’

      From the official documentation: https://wjw465150.gitbooks.io/keycloak-documentation/content/securing_apps/topics/oidc/javascript-adapter.html

      Also, for anyone using any keycloak version from 17 on, the url should not be ‘http://keycloak-server/auth’ (as correctly reported in this tutorial, that is based on version 15.0.2), but just ‘http://keycloak-server’ (without the auth). Sources: https://stackoverflow.com/questions/65711806/keycloak-redirect-page-shows-we-are-sorry-page-not-found

  4. Hi, Thank you for the tutorial!! 🙂

    I never get a keycloak.authenticated flag set to true or false it is undefined…so the logout button is never activated. When I click on the “login” button, I get the keycloak login screen and can log in and it shows as a session for the user in Keycloak admin screens. If I try to login again, it just puts more text into the URL at the top and does not bring up the keycloak login screen (assuming because it is already logged in). but still no value in keycloak.authenticated. If I use the keycloak admin screens and force the logout of that user, then the login button on the webclient again allows me to get the keycloak login screen and get logged in again and can be seen as a session in the keycloak admin screens.

    Any Suggestions would be greatly appreciated.

  5. Hi, great tutorial.!, it was very helpful
    How basic authentication can be implemented or the password sent encrypted?

  6. Hello to you when I use this tutorial I get errors after having to install @react-keycloak/web.And I would like to be directed directly to a keycloak login page without pressing a button

  7. Do not use @react-keycloak/web since it is deprecate. In general I really encourage you to use as little as possible 3rd party libs

  8. Hello! Great tutorial!

    Unfortunately I’m receiving an error.
    After finish when I try to run: “Error: A ‘Keycloak’ instance can only be initialized once.”

    Using, React 18, react-keycloak/web 3.4.0 and keycloak-js 22.

    Some ideia about it?

  9. Hi, great tutorial.!, it was very helpful
    question ,
    “What are the steps or best practices for implementing SSL (Secure Sockets Layer) for a Keycloak instance to enhance security and encrypt communication?”

Leave a Reply