AuthProvider

AuthProvider is the top-level component that manages OIDC state. It creates an OidcClient instance, handles the authorization callback, and provides authentication state to all child components via Svelte’s context API.

Installation

npm install oidc-js-svelte

Usage

<script lang="ts">
  import { AuthProvider } from "oidc-js-svelte";

  const config = {
    issuer: "https://auth.example.com",
    clientId: "my-app",
    redirectUri: "http://localhost:5173/callback",
    scopes: ["openid", "profile", "email", "offline_access"],
    postLogoutRedirectUri: "http://localhost:5173",
  };
</script>

<AuthProvider {config}>
  <App />
</AuthProvider>

Props

Prop	Type	Default	Description
config	OidcConfig	required	OIDC configuration (issuer, clientId, redirectUri, etc.)
fetchProfile	boolean	true	Whether to fetch the UserInfo endpoint after login
onLogin	(returnTo: string) => void	-	Called after successful login with the URL to restore
onError	(error: Error) => void	-	Called when an error occurs during initialization
children	Snippet	required	Child content to render

onLogin callback

By default, AuthProvider restores the pre-login URL using window.history.replaceState. If you use SvelteKit, handle navigation yourself:

<script lang="ts">
  import { goto } from "$app/navigation";
  import { AuthProvider } from "oidc-js-svelte";
</script>

<AuthProvider config={config} onLogin={(returnTo) => goto(returnTo, { replaceState: true })}>
  <slot />
</AuthProvider>

Lifecycle

1. On mount, AuthProvider creates an OidcClient and calls client.init()
2. init() fetches the OIDC discovery document
3. If the URL contains a code and state parameter (callback from IdP), it exchanges the code for tokens
4. If the URL contains an error parameter, it calls onError
5. On destroy, it unsubscribes and destroys the client