{% hint style="info" %} Before starting be aware that oidc-spa does not yet support Next.js projects.
If you are using Next the closer alternative is to use NextAuth.js (with the Keycloak adapter if you are using Keycloak).
You can refer to the phase two guide.
{% endhint %}
If you're having issues don't hesitate to reach out on Discord!
Let's install oidc-spa in your project:
{% tabs %} {% tab title="npm" %}
npm install --save oidc-spa{% endtab %}
{% tab title="yarn" %}
yarn add oidc-spa{% endtab %}
{% tab title="pnpm" %}
pnpm add oidc-spa{% endtab %}
{% tab title="bun" %}
bun add oidc-spa{% endtab %} {% endtabs %}
Create the silent-sso.htm1 file in your public directory:
{% code title="public/silent-sso.htm" %}
<!doctype html>
<html>
<body>
<script>
parent.postMessage(location.href, location.origin);
</script>
</body>
</html>{% endcode %}
Doing without the silent-sso.htm file
If for some reasons it's not fesable or practical for you to rely on the silent-sso.html file it's ok, it will work without it.
Just make sure to
- Set
publicUrltoundefinedwhen initializing oidc-spa. - Don't use
logout({ redirectTo: "home" })but explicitely tell where you want your users to be redirected after logout usinglogout({ redirectTo: "specific url", url: "/my-home" })or uselogout({ redirectTo: "current page" }).