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:

Implementing Infinite Scroll In Next Js With Server Actions

Implementing infinite scroll in Next.js with Server Actions

Infinite scrolling in Next.js no longer requires external libraries — Server Actions let us fetch initial data directly on the server.

Rahul Chhodde
Apr 19, 2024 ⋅ 10 min read
Integrating Django Templates With React For Dynamic Webpages

Integrating Django templates with React for dynamic webpages

Create a dynamic demo blog site using Django and React to demonstrate Django’s server-side functionalities and React’s interactive UI.

Kayode Adeniyi
Apr 18, 2024 ⋅ 7 min read
Using Aoi Js To Build A Bot For Discord

Using aoi.js to build a bot on Discord

Explore how the aoi.js library makes it easy to create Discord bots with useful functionalities for frontend applications.

Rahul Padalkar
Apr 17, 2024 ⋅ 9 min read
Web Components Adoption Guide: Overview, Examples, And Alternatives

Web Components adoption guide: Overview, examples, and alternatives

Evaluate Web Components, a set of standards that allow you to create custom HTML tags for more reusable, manageable code.

Elijah Asaolu
Apr 16, 2024 ⋅ 11 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={} />
      <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?”

Leave a Reply