Client Side Rendering Architecture | Persist token problem

[gokhangunduz]

Hello, I'm opening this issue because I couldn't solve a problem.

There is client rendering architecture in my project, so I use React but not Next and its alternatives. For this reason, I cannot use SSR.

My problem is, I want to be able to persist the token I got from keycloak, I want to use the token I persisted even though the page is reloaded. Because every time the page is reloaded, I have to acquire tokens again.

I am attaching the codes I used, thanks in advance for your interest.

keycloak.ts;

import Keycloak from "keycloak-js";

const keycloak = Keycloak({
  url: process.env.REACT_APP_KEYCLOAK_URL!,
  realm: process.env.REACT_APP_KEYCLOAK_REALM!,
  clientId: process.env.REACT_APP_KEYCLOAK_CLIENT_ID!,
});

export default keycloak;

index.tsx;

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { ReactKeycloakProvider } from "@react-keycloak/web";
import keycloak from "./auth/keycloak";
const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);

root.render(
  <ReactKeycloakProvider
    authClient={keycloak}
    autoRefreshToken={true}
  >
    <App />
  </ReactKeycloakProvider>
);