add svelte adapter

examples/svelte-multi-providers/.env.local.sample

@@ -0,0 +1,23 @@
+# 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_MICROSOFT=https://login.microsoftonline.com/71a0a621-363a-4182-8209-86364aa6de03/v2.0
+VITE_OIDC_CLIENT_ID_MICROSOFT=3c8f72b4-4dd9-4aa2-a01d-43349ba90394
+VITE_OIDC_SCOPE_MICROSOFT="profile api://example-multi-providers/access_as_user"
+
+# ======= Google OAuth =============
+VITE_OIDC_ISSUER_URI_GOOGLE=https://accounts.google.com
+VITE_OIDC_CLIENT_ID_GOOGLE=928024164279-ifjvmsffi64slkk81h3gmoh7p03ev68k.apps.googleusercontent.com
+VITE_OIDC_CLIENT_SECRET_GOOGLE=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
+VITE_OIDC_SCOPE_GOOGLE="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-multi-providers/.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-multi-providers/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.
+
+If you have state that's important to retain within a component, consider creating an external store which would not be replaced by HMR. You can read the details in the [svelte-hmr documentation](https://github.com/rixo/svelte-hmr#svelte-hmr).
+
+```ts
+// store.ts
+// An extremely simple external store
+import { writable } from "svelte/store";
+export default writable(0);
+```

examples/svelte-multi-providers/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-multi-providers/package.json

@@ -0,0 +1,28 @@
+{
+    "name": "svelte-multi-providers",
+    "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",
+        "evt": "2.5.9",
+        "svelte": "^5.39.6",
+        "svelte-check": "^4.3.2",
+        "typescript": "~5.9.3",
+        "vite": "^7.1.7",
+        "zod": "^4.1.11"
+    }
+}

examples/svelte-multi-providers/src/App.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+    import { Router } from "@mateothegreat/svelte5-router";
+    import Google from "./components/Google.svelte";
+    import Header from "./components/Header.svelte";
+    import Microsoft from "./components/Microsoft.svelte";
+    import SelectProviderDialog from "./components/SelectProviderDialog.svelte";
+    import { initializeOidc } from "./oidc";
+    import { routes } from "./routes";
+
+    const { google, microsoft } = initializeOidc();
+</script>
+
+<Google {google}>
+    <Microsoft {microsoft}>
+        <Header></Header>
+        <Router {routes}></Router>
+        <SelectProviderDialog></SelectProviderDialog>
+    </Microsoft>
+</Google>

examples/svelte-multi-providers/src/app.css

@@ -0,0 +1,96 @@
+: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);
+}
+
+.read-the-docs {
+    color: #888;
+}

examples/svelte-multi-providers/src/components/AutoLogoutWarningOverlay.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+    import { useOidc_assertUserLoggedIn } from "../oidc";
+
+    const { useAutoLogoutWarningCountdown } = useOidc_assertUserLoggedIn();
+    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-multi-providers/src/components/Google.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+    import { OidcInitializationError } from "oidc-spa";
+    import type { Snippet } from "svelte";
+    import { initializeOidc } from "../oidc";
+
+    const {
+        google,
+        children
+    }: { google: ReturnType<typeof initializeOidc>["google"]; children: Snippet } = $props();
+
+    const googleProps = google.props;
+    const oidcOrInitializationError = $derived($googleProps.oidcOrInitializationError);
+    const isOidcInitializationError = (
+        value: typeof oidcOrInitializationError
+    ): value is OidcInitializationError => {
+        return value !== undefined && value instanceof OidcInitializationError;
+    };
+</script>
+
+{#if oidcOrInitializationError === undefined}
+    <p>Loading...</p>
+{:else if isOidcInitializationError(oidcOrInitializationError)}
+    {@const initializationError = oidcOrInitializationError}
+    <h1 style:color="red">
+        An error occurred while initializing the OIDC client:&nbsp;
+        {initializationError.message}
+    </h1>
+{:else}
+    {@const oidc = oidcOrInitializationError}
+    <google.OidcContextProvider {oidc} setOidcContext={google.setOidcContext}>
+        {@render children()}
+    </google.OidcContextProvider>
+{/if}

examples/svelte-multi-providers/src/components/Header.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+    import { route } from "@mateothegreat/svelte5-router";
+    import { useIsUserLoggedIn } from "../oidc";
+    import LoggedInAuthButton from "./LoggedInAuthButton.svelte";
+    import NotLoggedInAuthButton from "./NotLoggedInAuthButton.svelte";
+
+    const isUserLoggedIn = useIsUserLoggedIn();
+</script>
+
+<div
+    style="display: flex; justify-content: space-between; align-items: center; position: absolute; top: 0; left: 0; width: 100%;"
+>
+    <span>OIDC-SPA + Svelte5: Login with Google or Microsoft example</span>
+
+    <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-multi-providers/src/components/LoggedInAuthButton.svelte

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

examples/svelte-multi-providers/src/components/Microsoft.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+    import { OidcInitializationError } from "oidc-spa";
+    import type { Snippet } from "svelte";
+    import { initializeOidc } from "../oidc";
+
+    const {
+        microsoft,
+        children
+    }: { microsoft: ReturnType<typeof initializeOidc>["microsoft"]; children: Snippet } = $props();
+
+    const microsoftProps = microsoft.props;
+    const oidcOrInitializationError = $derived($microsoftProps.oidcOrInitializationError);
+    const isOidcInitializationError = (
+        value: typeof oidcOrInitializationError
+    ): value is OidcInitializationError => {
+        return value !== undefined && value instanceof OidcInitializationError;
+    };
+</script>
+
+{#if oidcOrInitializationError === undefined}
+    <p>Loading...</p>
+{:else if isOidcInitializationError(oidcOrInitializationError)}
+    {@const initializationError = oidcOrInitializationError}
+    <h1 style:color="red">
+        An error occurred while initializing the OIDC client:&nbsp;
+        {initializationError.message}
+    </h1>
+{:else}
+    {@const oidc = oidcOrInitializationError}
+    <microsoft.OidcContextProvider {oidc} setOidcContext={microsoft.setOidcContext}>
+        {@render children()}
+    </microsoft.OidcContextProvider>
+{/if}