TanStack Start

The Example/Tutorial

TanStack Start Starterexample-tanstack-start.oidc-spa.dev

npx gitpick keycloakify/oidc-spa/tree/main/examples/tanstack-start start-oidc
cd start-oidc
npm install
npm run dev

# By default, the example runs against Keycloak.
# You can edit the .env file to test other providers.

oidc-spa/examples/tanstack-start at main · keycloakify/oidc-spaGitHub

---

Instalations

npm

npm install oidc-spa zod

yarn

yarn add oidc-spa zod

pnpm

pnpm add oidc-spa zod

bun

bun add oidc-spa zod

Note: Zod is optional but highly recommended. Writing validators manually is error-prone, and skipping validation means losing early guarantees about what your auth server provides.

---

Add the plugin to your vite.config.ts:

import { defineConfig } from "vite";
import { tanstackStart } from "@tanstack/react-start/plugin/vite";
import viteReact from "@vitejs/plugin-react";
import viteTsConfigPaths from "vite-tsconfig-paths";
import tailwindcss from "@tailwindcss/vite";
import { oidcSpa } from "oidc-spa/vite-plugin";

export default defineConfig({
  plugins: [
    viteTsConfigPaths({ projects: ["./tsconfig.json"] }),
    tailwindcss(),
    tanstackStart(),
    oidcSpa(),
    viteReact(),
  ],
});

---

Usage

You should be able to learn everything there is to know by checkout out the example! You're journey will start by looking at src/oidc.ts.