React Router
The example setup is live here: https://example-react-router.oidc-spa.dev/
Run it locally with:
npx degit https://github.com/keycloakify/oidc-spa/examples/react-router oidc-spa-react-router
cd oidc-spa-react-router
cp .env.local.sample .env.local
yarn
yarn dev
This is for setting for integrating oidc-spa with react-router in Framework Mode.
IMPORTANT NOTICE:
React Router "Framework" does not expose the abstractions nessesary to implement a full stack auth experience. If you want to use it with oidc-spa you need to enable SPA mode.
Because React Router Framwork does not expose a true entrypoint you won't benefit from the same security guarenties you get with any other solution. oidc-spa is not any less secure than another client side OIDC client, but it's unique security feature do not apply here.
React Router "Framwork" dependencies optimization is wreird, you might get strange errors when navigating to a new page for the first time in localhost, it's not on oidc-spa 🤷♂️
TL,DR: React Router is a hard sell compared to TanStack Router/Start.
Enabling SPA mode
As of today, to use oidc-spa you need to enable SPA mode.
import type { Config } from "@react-router/dev/config";
export default {
ssr: false
} satisfies Config;Learning with the Example
npx gitpick keycloakify/oidc-spa/tree/main/examples/react-router-framework rr-framework-oidc
cd rr-framework-oidc
cp .env.local.sample .env.local
yarn
yarn devLast updated
Was this helpful?