gatsby-browser.js

const React = require("react")
const Keycloak = require("keycloak-js")
const { KeycloakProvider } = require("@react-keycloak/web")

const keycloak = new Keycloak({
  realm: 'alicek106',
  url: 'https://auth.alicek106.com/auth',
  clientId: 'react-frontend',
})

const Loading = () => <div>getting ready...</div>

exports.wrapRootElement = ({ element }) => {
  return (
    <KeycloakProvider
      keycloak={keycloak}
      initConfig={{
        promiseType: "native",
        onLoad: "check-sso",
        checkLoginIframe: false,
        pkceMethod: "S256",
        silentCheckSsoRedirectUri:
          window.location.origin + "/silent-check-sso.xhtml",
      }}
      LoadingComponent={<Loading />}
    >
      {element}
    </KeycloakProvider>
  )
}