2021-12-02
2217
#react
Sheriff Quadri
80289
Dec 2, 2021 ⋅ 7 min read

How to implement Keycloak authentication in React

Sheriff Quadri Software engineer

Recent posts:

A Guide To Object.groupBy: An Alternative To Array.reduce

A guide to Object.groupBy: An alternative to Array.reduce

Learn how Object.groupBy and Map.groupBy improve JavaScript data grouping over reduce, with performance benchmarks and comparisons.

Sebastian Weber
Feb 5, 2025 ⋅ 4 min read
Best CI/CD tools for React Native

Best CI/CD tools for React Native

Get a high-level comparison of five of the most popular and well-used CI/CD tools for React Native apps, including the features they support.

Hussain Arif
Feb 5, 2025 ⋅ 7 min read
chrome dev tools for API mocking

How to use Chrome DevTools for API mocking

API Mocking allows frontend developers to simulate the responses and behaviors of a live API, such as error handling, timeouts, and specific status codes in real time. Chrome DevTools Local Overrides make this even easier.

Emmanuel John
Feb 4, 2025 ⋅ 7 min read
How To Implement View Transitions In Multi-Page Apps

How to implement view transitions in multi-page apps

Enhance navigation in multi-page apps using the View Transition API, CSS, and JavaScript — no heavy frameworks needed.

Rob O'Leary
Jan 31, 2025 ⋅ 12 min read
View all posts

24 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={} />
      <Route
      path="/secured"
      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?

    Thanks

  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
      https://www.keycloak.org/migration/migrating-to-quarkus

  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
    Question
    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?”

  10. Getting below error in PrivateRoute.js file

    Could not load content for http://localhost:3000/static/js/@react-keycloak/web/useKeycloak.ts (HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE)

    Could not load content for http://localhost:3000/static/js/@react-keycloak/web/provider.ts (HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE)

    Could not load content for http://localhost:3000/static/js/@react-keycloak/web/context.ts (HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE)

    Could not load content for http://localhost:3000/static/js/@react-keycloak/core/provider.tsx (HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE)

    1. Fixed this issue.
      .tsx and .ts files is missing in web / core folder. So, create a new useKeycloak.ts and other missing files and place it in corresponding folder.

  11. hello, have a question on how to have two protected routes. I tried it but every time i click on a secured link, it call the Keycloak.login and re authenticates the user, any idea how can I stop this

  12. DEPRECATED and UNMAINTAINED

    This library is deprecated and will no longer be maintained or updated.

    Instead, it is recommended to use:

    react-oidc-context for React SPA projects instead of @react-keycloak/web
    NextAuth.js for Next.js projects instead of @react-keycloak/ssr

Leave a Reply