Migrating from Keycloak-js

Still under construction, please wait a little before using.

package.json

 {
     dependencies: {
-        "keycloak-js": "...",
+        "oidc-spa": "..."
     }
 }

In Vite apps, this is done through a Vite Plugin (If you'd rather avoid using the Vite plugin checkout the Other SPAs tab).

vite.config.ts

import { defineConfig } from "vite";
import { oidcSpa } from "oidc-spa/vite-plugin";

export default defineConfig({
    plugins: [
        // ...
        oidcSpa({
            freezeFetch: true,
            freezeXMLHttpRequest: true,
            freezeWebSocket: true
        })
    ]
});

First rename your entry point file from main.tsx (or main.ts or whatever it is) to main.lazy.tsx

mv src/main.ts src/main.lazy.ts

Then create a new index.tsx file:

src/index.tsx

import { oidcEarlyInit } from "oidc-spa/entrypoint";

const { shouldLoadApp } = oidcEarlyInit({
    freezeFetch: true,
    freezeXMLHttpRequest: true,
    freezeWebSocket: true,
    BASE_URL: "/" // The path where your app is hosted, can also be provided later to createOidc()
});

if (shouldLoadApp) {
    // Note: Deferring the main app import adds a few milliseconds to cold start,
    // but dramatically speeds up auth. Overall, it's a net win.
    import("./index.lazy");
}

If you don't have a precise entrypoint that you can simply override, just call oidcEarlyInit as soon as possible and try canceling as much work as possible when shouldLoadApp is false.

Then:

- import Keycloak from "keycloak-js";
+ import { Keycloak } from "oidc-spa/keycloak-js";

Yes really it's that simple.

PreviousUser Session Initialization NextThird‑party cookies and session restoration

Last updated 8 hours ago

Was this helpful?