arrow-left

All pages
gitbookPowered by GitBook
1 of 1

Loading...

Installation

circle-info

Before starting be aware that oidc-spa is not suited for Next.js.

If you are using Next the closer alternative is to use NextAuth.jsarrow-up-right (with the Keycloak adapterarrow-up-right if you are using Keycloak). See this guidearrow-up-right.

If you're having issues don't hesitate to reach out on Discordarrow-up-right!

hashtag
Add the lib to your dependencies

hashtag
Editing your App entrypoint

This is optional but recommended for .

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

Then create a new main.tsx file:

Comming soon, .

You can skip this for now. It will be explained in the dedicated setup guide:

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

mv src/index.tsx src/index.lazy.tsx

Then create a new index.tsx file:

src/index.tsx
import { oidcEarlyInit } from
better performances and security
follow progressarrow-up-right
routeReact Routerchevron-right
npm install oidc-spa
yarn add oidc-spa
pnpm add oidc-spa
bun add oidc-spa
mv src/main.tsx src/main.lazy.tsx
src/main.tsx
import { oidcEarlyInit } from "oidc-spa/entrypoint";

const { shouldLoadApp } = oidcEarlyInit({
    freezeFetch: true,
    freezeXMLHttpRequest: true
});

if (shouldLoadApp) {
    import("./main.lazy");
}
"
oidc-spa/entrypoint
"
;
const { shouldLoadApp } = oidcEarlyInit({
freezeFetch: true,
freezeXMLHttpRequest: true
});
if (shouldLoadApp) {
import("./index.lazy");
}