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:

typescript object destructuring

TypeScript object destructuring and you

Whether you’re part of the typed club or not, one function within TypeScript that can make life a lot easier is object destructuring.

Lewis Cianci
Jan 22, 2025 ⋅ 5 min read
master state management hydration Nuxt usestate

Nuxt state management and hydration with useState

useState can effectively replace ref in many scenarios and prevent Nuxt hydration mismatches that can lead to unexpected behavior and errors.

Yan Sun
Jan 20, 2025 ⋅ 8 min read
React Native List Components: FlashList, FlatList, And More

React Native list components: FlashList, FlatList, and more

Explore the evolution of list components in React Native, from `ScrollView`, `FlatList`, `SectionList`, to the recent `FlashList`.

Chimezie Innocent
Jan 16, 2025 ⋅ 4 min read
Building An AI Agent For Your Frontend Project

Building an AI agent for your frontend project

Explore the benefits of building your own AI agent from scratch using Langbase, BaseUI, and Open AI, in a demo Next.js project.

Ivaylo Gerchev
Jan 15, 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