> For the complete documentation index, see [llms.txt](https://docs.oidc-spa.dev/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.oidc-spa.dev/docs/v7/setup-guides/react-router.md). # React Router {% tabs %} {% tab title="Declarative or Data Mode" %} The example setup is live here: [https://example-react-router.oidc-spa.dev/](https://example-react-router-framework.oidc-spa.dev/) Run it locally with: ```bash 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 ``` {% embed url="" %} {% endtab %} {% tab title="Framework Mode" %} This is for setting for integrating oidc-spa with react-router in [`Framework Mode`](https://reactrouter.com/start/modes). ### Enabling SPA mode As of today, to use oidc-spa you need to [enable SPA mode](https://reactrouter.com/how-to/spa).

import type { Config } from "@react-router/dev/config";

export default {
    ssr: false
} satisfies Config;

### (Optional) Improve dev mode by pre-optimizing dependencies In dev mode, listing your dependencies in `optimizeDeps.include` can prevent annoying glitches that forces you to reload your page manually.

import { reactRouter } from "@react-router/dev/vite";
import { defineConfig } from "vite";

export default defineConfig({
    plugins: [reactRouter()],
    optimizeDeps: {
        include: [
            "oidc-spa/react",
            "oidc-spa/entrypoint",
            "oidc-spa/tools/parseKeycloakIssuerUri",
            "oidc-spa/tools/decodeJwt",
            "zod"
        ]
    }
});

### oidc.client.ts Make sure you create a `app/oidc.client.ts` file, (instead of `app/oidc.ts`). {% embed url="" %} Example of oidc.client.ts file {% endembed %} ### Setting up the entrypoint Create thoses two files: {% embed url="" %} app/entry.client.tsx {% endembed %} {% embed url="" %} app/entry.client.lazy.tsx {% endembed %} ### Protecting pages and using the Page Loaders Let's say we have an invoice page and you want this page to be accessible only when the user is logged in. \ You also want to fetch the API to get the invoces of the user. \ This is how you would implement it:

import { enforceLogin, fetchWithAuth } from "../oidc.client";
import type { Route } from "./+types/invoices";
import { useLoaderData } from "react-router";

export async function clientLoader(params: Route.ClientLoaderArgs) {
    // If you have `autoLogin: true` this isn't nessesary.  
    await enforceLogin(params);
    // If we are here, the user is logged in.
    const invoices = await fetchWithAuth("/api/invoices").then(r => r.json());
    return invoices;
}

export function HydrateFallback() {
    return <div>Loading invoices...</div>;
}

export default function Invoices() {
    const invoices = useLoaderData<typeof clientLoader>();

    return (
        <div>
            {invoices.map(invoice => (
                <div key={invoice.id}>{invoice.amount}</div>
            ))}
        </div>
    );
}

### Running the example The example setup is live here: Run it locally with: ```bash npx degit https://github.com/keycloakify/oidc-spa/examples/react-router-framework oidc-spa-react-router cd oidc-spa-react-router cp .env.local.sample .env.local yarn yarn dev ``` {% embed url="" %} {% endtab %} {% endtabs %} --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://docs.oidc-spa.dev/docs/v7/setup-guides/react-router.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.