Optional authentication using Keycloak

Currently most of the React SPA applications I have, we require authentication before user can access the site, this is done using this inside the index.js when the app starts:

window.keycloak
  .init({
    onLoad: "login-required",
    checkLoginIframe: false,
    promiseType: "native",
  })
  .then((authenticated) => {
    ReactDOM.render(<App />, document.getElementById("root"));
  })
  .catch(() => {
    console.error("failed to initialize");
  });

However, now I need to allow the user to be able to browse the site also in an unauthenticated way (authentication becomes optional basically). And only when user desires, then I have to redirect her to login page.

How can I do this using keycloak?

There is a similar question here, but it is 5 years old and also the library which one of the answers seems to recommend seems to be deprecated. So I was wondering if there were better approaches.

I had this issue a while ago.

Change the onLoad option to "check-sso" instead of "login-required". This checks if the user is authenticated but won't force to log in.

onLoad: "check-sso",

Inside components use Keycloak to check if the user is authenticated and redirect to the login page.

import React from "react";
export default function ProtectedComponent(){
  if(!window.keycloak.authenticated){
    window.keycloak.login();
    return null;
  }
  return <div>U shall not pass</div>;
}