add svelte adapter

examples/svelte/.env.local.sample

@@ -0,0 +1,24 @@
+# Pick one of the following configurations, those are not mock credentials, you can use them for testing purposes.  
+
+# ======= Keycloak =================
+VITE_OIDC_ISSUER_URI=https://cloud-iam.oidc-spa.dev/realms/oidc-spa
+VITE_OIDC_CLIENT_ID=example-react-router
+
+# ======= Microsoft Entra ID =======
+#VITE_OIDC_ISSUER_URI=https://login.microsoftonline.com/71a0a621-363a-4182-8209-86364aa6de03/v2.0
+#VITE_OIDC_CLIENT_ID=3c8f72b4-4dd9-4aa2-a01d-43349ba90394
+#VITE_OIDC_SCOPE="profile api://example-multi-providers/access_as_user"
+
+# ======= Google OAuth =============
+#VITE_OIDC_ISSUER_URI=https://accounts.google.com
+#VITE_OIDC_CLIENT_ID=928024164279-ifjvmsffi64slkk81h3gmoh7p03ev68k.apps.googleusercontent.com
+#VITE_OIDC_CLIENT_SECRET=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
+#VITE_OIDC_USE_ID_TOKEN_AS_ACCESS_TOKEN=true
+#VITE_OIDC_SCOPE="profile email"
+
+# ======= Auth0 ====================
+#VITE_OIDC_ISSUER_URI=https://auth0.oidc-spa.dev
+#VITE_OIDC_CLIENT_ID=DkoDtyQkYj4UPk3gKk4MjtnD9nskUhpt
+#VITE_OIDC_AUDIENCE=https://oidc-spa-example
+#VITE_OIDC_SSO_SESSION_IDLE_SECONDS=120
+

examples/svelte/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

examples/svelte/README.md

@@ -0,0 +1,47 @@
+# Svelte + TS + Vite
+
+This template should help get you started developing with Svelte and TypeScript in Vite.
+
+## Recommended IDE Setup
+
+[VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).
+
+## Need an official Svelte framework?
+
+Check out [SvelteKit](https://github.com/sveltejs/kit#readme), which is also powered by Vite. Deploy anywhere with its serverless-first approach and adapt to various platforms, with out of the box support for TypeScript, SCSS, and Less, and easily-added support for mdsvex, GraphQL, PostCSS, Tailwind CSS, and more.
+
+## Technical considerations
+
+**Why use this over SvelteKit?**
+
+-   It brings its own routing solution which might not be preferable for some users.
+-   It is first and foremost a framework that just happens to use Vite under the hood, not a Vite app.
+
+This template contains as little as possible to get started with Vite + TypeScript + Svelte, while taking into account the developer experience with regards to HMR and intellisense. It demonstrates capabilities on par with the other `create-vite` templates and is a good starting point for beginners dipping their toes into a Vite + Svelte project.
+
+Should you later need the extended capabilities and extensibility provided by SvelteKit, the template has been structured similarly to SvelteKit so that it is easy to migrate.
+
+**Why `global.d.ts` instead of `compilerOptions.types` inside `jsconfig.json` or `tsconfig.json`?**
+
+Setting `compilerOptions.types` shuts out all other types not explicitly listed in the configuration. Using triple-slash references keeps the default TypeScript setting of accepting type information from the entire workspace, while also adding `svelte` and `vite/client` type information.
+
+**Why include `.vscode/extensions.json`?**
+
+Other templates indirectly recommend extensions via the README, but this file allows VS Code to prompt the user to install the recommended extension upon opening the project.
+
+**Why enable `allowJs` in the TS template?**
+
+While `allowJs: false` would indeed prevent the use of `.js` files in the project, it does not prevent the use of JavaScript syntax in `.svelte` files. In addition, it would force `checkJs: false`, bringing the worst of both worlds: not being able to guarantee the entire codebase is TypeScript, and also having worse typechecking for the existing JavaScript. In addition, there are valid use cases in which a mixed codebase may be relevant.
+
+**Why is HMR not preserving my local component state?**
+
+HMR state preservation comes with a number of gotchas! It has been disabled by default in both `svelte-hmr` and `@sveltejs/vite-plugin-svelte` due to its often surprising behavior. You can read the details [here](https://github.com/rixo/svelte-hmr#svelte-hmr).
+
+If you have state that's important to retain within a component, consider creating an external store which would not be replaced by HMR.
+
+```ts
+// store.ts
+// An extremely simple external store
+import { writable } from "svelte/store";
+export default writable(0);
+```

examples/svelte/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Svelte + TS</title>
+  </head>
+  <body style="background-color: #242424;">
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

examples/svelte/package.json

@@ -0,0 +1,27 @@
+{
+    "name": "svelte",
+    "private": true,
+    "version": "0.0.0",
+    "type": "module",
+    "scripts": {
+        "prepare": "[ ! -f .env.local ] && cp .env.local.sample .env.local || true",
+        "dev": "vite",
+        "build": "vite build",
+        "preview": "vite preview",
+        "check": "svelte-check --tsconfig ./tsconfig.app.json && tsc -p tsconfig.node.json"
+    },
+    "dependencies": {
+        "oidc-spa": "file:../../dist"
+    },
+    "devDependencies": {
+        "@mateothegreat/svelte5-router": "^2.16.19",
+        "@sveltejs/vite-plugin-svelte": "^6.2.1",
+        "@tsconfig/svelte": "^5.0.5",
+        "@types/node": "^24.6.0",
+        "svelte": "^5.39.6",
+        "svelte-check": "^4.3.2",
+        "typescript": "~5.9.3",
+        "vite": "^7.1.7",
+        "zod": "^4.1.11"
+    }
+}

examples/svelte/src/App.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+    import { Router } from "@mateothegreat/svelte5-router";
+    import AutoLogoutWarningOverlay from "./components/AutoLogoutWarningOverlay.svelte";
+    import Header from "./components/Header.svelte";
+    import { routes } from "./routes";
+</script>
+
+<Header></Header>
+<Router {routes}></Router>
+<AutoLogoutWarningOverlay></AutoLogoutWarningOverlay>

examples/svelte/src/Fallback.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+
+</script>
+
+<p>Loading...</p>

examples/svelte/src/app.css

@@ -0,0 +1,100 @@
+:root {
+    font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+    line-height: 1.5;
+    font-weight: 400;
+
+    color-scheme: light dark;
+    color: rgba(255, 255, 255, 0.87);
+    background-color: #242424;
+
+    font-synthesis: none;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+    font-weight: 500;
+    color: #646cff;
+    text-decoration: inherit;
+}
+a:hover {
+    color: #535bf2;
+}
+
+body {
+    margin: 0;
+    display: flex;
+    place-items: center;
+    min-width: 320px;
+    min-height: 100vh;
+}
+
+h1 {
+    font-size: 3.2em;
+    line-height: 1.1;
+}
+
+.card {
+    padding: 2em;
+}
+
+#app {
+    max-width: 1280px;
+    margin: 0 auto;
+    padding: 2rem;
+    text-align: center;
+}
+
+button {
+    border-radius: 8px;
+    border: 1px solid transparent;
+    padding: 0.6em 1.2em;
+    font-size: 1em;
+    font-weight: 500;
+    font-family: inherit;
+    background-color: #1a1a1a;
+    cursor: pointer;
+    transition: border-color 0.25s;
+}
+button:hover {
+    border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+    outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+    :root {
+        color: #213547;
+        background-color: #ffffff;
+    }
+    a:hover {
+        color: #747bff;
+    }
+    button {
+        background-color: #f9f9f9;
+    }
+}
+
+.logo {
+    height: 6em;
+    padding: 1.5em;
+    will-change: filter;
+    transition: filter 300ms;
+}
+.logo:hover {
+    filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.svelte:hover {
+    filter: drop-shadow(0 0 2em #ff3e00aa);
+}
+
+.card {
+    padding: 2em;
+}
+
+.read-the-docs {
+    color: #888;
+}

examples/svelte/src/components/AutoLogoutWarningOverlay.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+    import { useOidc } from "../oidc";
+
+    const { useAutoLogoutWarningCountdown } = useOidc();
+    const { secondsLeft } = useAutoLogoutWarningCountdown({ warningDurationSeconds: 45 });
+</script>
+
+{#if $secondsLeft}
+    <div
+        style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.5); backdrop-filter: blur(10px); display: flex; justify-content: center; align-items: center; z-index: 1000;"
+    >
+        <div>
+            <p>Are you still there?</p>
+            <p>You will be logged out in {secondsLeft}</p>
+        </div>
+    </div>
+{/if}

examples/svelte/src/components/Header.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+    import { route } from "@mateothegreat/svelte5-router";
+    import { useOidc } from "../oidc";
+    import LoggedInAuthButton from "./LoggedInAuthButton.svelte";
+    import NotLoggedInAuthButton from "./NotLoggedInAuthButton.svelte";
+
+    const { isUserLoggedIn, initializationError } = useOidc();
+</script>
+
+<div
+    style="display: flex; justify-content: space-between; align-items: center; position: absolute; top: 0; left: 0; width: 100%;"
+>
+    <span>OIDC-SPA + Svelte5 Router</span>
+    <!-- You do not have to display an error here, it's just to show that if you want you can
+        But it's best to enable the user to navigate unauthenticated and to display an error
+        only if he attempt to login (by default it display an alert) -->
+    {#if initializationError !== undefined}
+        <div style="color: red;">
+            {initializationError.isAuthServerLikelyDown
+                ? "Sorry our Auth server is down"
+                : `Initialization error: ${initializationError.message}`}
+        </div>
+    {/if}
+
+    <div>
+        <a use:route href="/"> Home </a>
+        &nbsp; &nbsp; &nbsp;
+        <a use:route href="/protected">My protected page</a>
+    </div>
+    {#if isUserLoggedIn}
+        <LoggedInAuthButton></LoggedInAuthButton>
+    {:else}
+        <NotLoggedInAuthButton></NotLoggedInAuthButton>
+    {/if}
+</div>

examples/svelte/src/components/LoggedInAuthButton.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+    import { useOidc } from "../oidc";
+
+    const { decodedIdToken, logout } = useOidc({ assert: "user logged in" });
+</script>
+
+<div>
+    <span>Hello {decodedIdToken.name}</span>
+    &nbsp; &nbsp;
+    <button onclick={() => logout({ redirectTo: "home" })}>Logout</button>
+</div>

examples/svelte/src/components/NotLoggedInAuthButton.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+    import { createKeycloakUtils, isKeycloak } from "oidc-spa/keycloak";
+    import { useOidc } from "../oidc";
+
+    const {
+        login,
+        params: { issuerUri }
+    } = useOidc({ assert: "user not logged in" });
+
+    const keycloakUtils = isKeycloak({ issuerUri }) ? createKeycloakUtils({ issuerUri }) : undefined;
+
+    const isAuth0 = issuerUri.includes("auth0");
+</script>
+
+<div>
+    <button onclick={() => login()}>Login</button>{" "}
+    {#if keycloakUtils !== undefined}
+        <button
+            onclick={() =>
+                login({
+                    transformUrlBeforeRedirect: keycloakUtils.transformUrlBeforeRedirectForRegister
+                })}
+        >
+            Register
+        </button>
+    {/if}
+    {#if isAuth0}
+        <button
+            onclick={() =>
+                login({
+                    extraQueryParams: {
+                        screen_hint: "signup"
+                    }
+                })}
+        >
+            Register
+        </button>
+    {/if}
+</div>

examples/svelte/src/env.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+    readonly VITE_OIDC_ISSUER: string;
+    readonly VITE_OIDC_CLIENT_ID: string;
+}
+
+interface ImportMeta {
+    readonly env: ImportMetaEnv;
+}

examples/svelte/src/lib/Counter.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  let count: number = $state(0)
+  const increment = () => {
+    count += 1
+  }
+</script>
+
+<button onclick={increment}>
+  count is {count}
+</button>