How can I configure a React application so that my Keycloak login comes after I click on a link?

Question

I have a React applicaion created with create-react-app in which I have a simple routing scheme. The intent of this routing scheme is to allow for an user to click on a button to redirect to a Keycloak login page. I also have a UserPage page in which I set up keycloak-jsaccording to the docs.

However, I am not getting the intended result. I desire to create a flux in which someone enters my React application through the Homepage, clicks on a button to log, is greeted with the Keycloak login interface and, after logging in, is able to see UserPage.

How would I go about this and what can I do/use to create the desired flux?

Code (if necessary more parts of the code can be shown)

App.js

import {BrowserRouter, Routes, Route} from 'react-router-dom';
import './App.css';
import Homepage from './pages/Homepage';
import UserPage from './pages/UserPage';
import ErrorPage from './pages/ErrorPage';

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Routes>
          <Route index element={<Homepage/>}/>
          <Route path="/home" element={<Homepage/>}/>
          <Route path="/login" element={<UserPage/>}/>
          <Route path="*" element={<ErrorPage/>}/>
        </Routes>
      </BrowserRouter>
    </div>
  );
}

export default App;

UserPage.js (where Keycloak is set up)

import Header from "../components/Header";
import React from 'react';
import Keycloak from 'keycloak-js'

const kcConfig = {
  "url": "http://localhost:8080",
  "realm": "react-realm",
  "clientId": "react-client"   
}
const kc = new Keycloak(kcConfig);

try {
  const authenticated = await kc.init({onLoad: 'login-required', pkceMethod: 'S256', checkLoginIframe: false});
  console.log(`User is ${authenticated ? 'authenticated' : 'not authenticated'}`);
} catch (error) {
    console.error('Failed to initialize adapter:', error);
}

function UserPage() {
  return (
    <div>
        <Header/>
        <h2>Página do usuário</h2>
        <p>Aqui estarão informações do usuário</p>
        <button><a href="/">Voltar</a></button>
    </div>
  )  
}

export default UserPage

Answer 1

If you want to log users in manually you will have to replace login-required with check-sso when initializing Keycloak JS. The former will force the user to sign in, whereas the latter only checks the sign-in status.

You can then manually call the .login() method when you want the user to sign in, for example:

const authenticated = await kc.init({ onLoad: 'check-sso' });

Then in your React component:

<button type="button" onClick={() => kc.login()}>Sign in</button>

You can find more information in the documentation.