Loading session…
\n\n\n```\n\nRun this module when those elements are available, including on the callback route:\n\n```javascript\nimport { OidcClient } from '@axa-fr/oidc-client';\n\nconst configuration = {\n client_id: 'your-public-client',\n authority: 'https://issuer.example.com',\n redirect_uri: `${window.location.origin}/authentication/callback`,\n scope: 'openid profile',\n};\n\nconst oidcClient = OidcClient.getOrCreate(() => fetch)(configuration);\nconst status = document.getElementById('session-status');\nconst loginButton = document.getElementById('login');\nconst logoutButton = document.getElementById('logout');\n\nfunction showError() {\n status.textContent = 'Authentication could not be completed. Please try again.';\n}\n\nloginButton.addEventListener('click', () => {\n oidcClient.loginAsync('/').catch(showError);\n});\nlogoutButton.addEventListener('click', () => {\n oidcClient.logoutAsync('/').catch(showError);\n});\n\nasync function start() {\n if (window.location.pathname === new URL(configuration.redirect_uri).pathname) {\n const { callbackPath } = await oidcClient.loginCallbackAsync();\n window.history.replaceState(null, '', callbackPath || '/');\n } else {\n await oidcClient.tryKeepExistingSessionAsync();\n }\n\n const isAuthenticated = oidcClient.tokens != null;\n status.textContent = isAuthenticated ? 'Signed in' : 'Not signed in';\n loginButton.hidden = isAuthenticated;\n logoutButton.hidden = !isAuthenticated;\n}\n\nstart().catch(showError);\n```\n\nThis minimal example uses browser storage, not a service worker. Read the next section before choosing a token-storage strategy for production.\n\n### Call a protected API\n\nUse the client's fetch wrapper after authentication:\n\n```javascript\nconst oidcFetch = oidcClient.fetchWithTokens(fetch);\nconst response = await oidcFetch('https://api.example.com/profile');\n\nif (!response.ok) {\n throw new Error(`API request failed with status ${response.status}`);\n}\nconst profile = await response.json();\n```\n\nThe wrapper attaches an access token, or a token placeholder when the service worker hides it, and integrates with token renewal. Only use it for API URLs you trust: the wrapper itself is not a destination allowlist. HTTP error responses still need an explicit `response.ok` check.\n\n\n\n## Service worker\n\nThe optional service worker can keep access and refresh tokens outside the application's JavaScript context and attach access tokens to configured API requests. It does **not** prevent XSS: injected code can still act through your application and make requests. Continue to use normal XSS defenses, carefully restrict trusted destinations, and avoid rendering or logging raw tokens.\n\n```mermaid\nsequenceDiagram\n participant App as Browser application\n participant IdP as Identity provider\n participant SW as OIDC service worker\n participant API as Trusted API\n App->>IdP: Authorization request with PKCE\n IdP-->>App: Redirect with authorization code\n App->>SW: Token request\n SW->>IdP: Exchange code and verifier\n IdP-->>SW: Tokens\n SW-->>App: Token placeholders and session information\n App->>SW: Protected API request\n SW->>API: Request with access token\n API-->>App: Response through service worker\n```\n\nThe diagram shows worker mode with access-token hiding enabled. The ID token and decoded claims may still be available to application code.\n\n### Install and update the worker\n\n```sh\nnode ./node_modules/@axa-fr/oidc-client/bin/copy-service-worker-files.mjs public\n```\n\nReplace `public` with your application's static-assets directory, and ensure that directory exists before running the command. This creates or updates `OidcServiceWorker.js` and creates `OidcTrustedDomains.js` if it does not already exist. Keep the worker version aligned with the client package; for example, merge this script into your `package.json`:\n\n```json\n{\n \"scripts\": {\n \"postinstall\": \"node ./node_modules/@axa-fr/oidc-client/bin/copy-service-worker-files.mjs public\"\n }\n}\n```\n\nEdit `public/OidcTrustedDomains.js`, not the generated worker:\n\n```javascript\nconst trustedDomains = {\n default: {\n oidcDomains: [/^https:\\/\\/issuer\\.example\\.com(?:\\/|$)/],\n accessTokenDomains: [/^https:\\/\\/api\\.example\\.com\\//],\n },\n};\n```\n\nInclude the provider's endpoint origins if they differ from its issuer URL. Keep access-token destinations as narrow as possible; patterns can include paths. String entries are interpreted as regular-expression prefixes, not exact origin matches. The example uses anchored regular expressions with escaped dots and hostname boundaries to avoid unintended matches. The `default` key must match the OIDC configuration name.\n\nAdd these options to your client configuration:\n\n```javascript\nservice_worker_relative_url: '/OidcServiceWorker.js',\nservice_worker_only: true,\n```\n\nServe the worker from a URL whose scope covers your application, using HTTPS (or localhost for development). With `service_worker_only: true`, login requires an available service worker. With `false` (the default), the client can fall back to browser storage when worker mode is unavailable. Choose that fallback deliberately.\n\n### Trusted-domain options\n\nThese options belong in each named entry in `OidcTrustedDomains.js`, not in `OidcConfiguration`.\n\n| Option | Purpose |\n| --------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| `oidcDomains` | Provider URLs the worker is allowed to handle. |\n| `accessTokenDomains` | API URLs to which the worker may attach an access token. |\n| `domains` | Shorthand for a shared provider/API destination list; separate lists give finer control. |\n| `showAccessToken` | Defaults to `false`. Set to `true` only when an integration requires the real access token in application JavaScript; refresh tokens remain hidden in worker mode. |\n| `allowMultiTabLogin` | Isolates login state, nonce, and PKCE verifier by tab. Requires the OIDC fetch wrapper for protected API requests; see below. |\n| `convertAllRequestsToCorsExceptNavigate` | Defaults to `false`; optionally changes non-navigation requests to CORS mode. |\n| `setAccessTokenToNavigateRequests` | Defaults to `true`; controls token attachment to matching navigation requests. |\n| `bypassAllNonOidcRequests` | Defaults to `false`. When enabled for all initialized worker configurations, requests outside OIDC and access-token destinations are left to the browser. |\n| `demonstratingProofOfPossession` | Enables worker-side DPoP for this configuration. |\n| `demonstratingProofOfPossessionOnlyWhenDpopHeaderPresent` | Defaults to `true` when worker DPoP is enabled. Requires a DPoP header before worker-side DPoP injection; set to `false` to remove that condition. |\n| `demonstratingProofOfPossessionConfiguration` | Overrides the worker's cryptographic algorithms; see [DPoP](#dpop). |\n\nWith `allowMultiTabLogin: true`, **use `oidcClient.fetchWithTokens(fetch)` for protected API requests**. Its tab-specific token placeholder tells the worker which session to use. Plain `fetch` or a default Axios request does not provide that marker, so automatic token attachment cannot select the tab's token and requests may receive HTTP 401. Use the OIDC fetch directly, or an integration that actually routes requests through it.\n\n## Configuration\n\nThe public [`OidcConfiguration` type](./src/types.ts) is the complete reference. Required fields are `client_id`, `authority`, `redirect_uri`, and `scope`.\n\n| Option | Default / behavior |\n| ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| `authority_configuration` | Supply endpoint metadata instead of discovery. See `AuthorityConfiguration` in the type reference, including PAR metadata. |\n| `storage` | `sessionStorage` when worker storage is not used. `localStorage` persists across tabs and browser sessions, but both are accessible to application JavaScript. |\n| `login_state_storage` | Defaults to `storage`; separates authorization state, verifier, nonce, and login parameters from token storage. If tokens use `localStorage`, consider `sessionStorage` here to avoid cross-tab login races. |\n| `silent_redirect_uri` | Enables the iframe-based silent-login flow. Must differ from `redirect_uri`; register it with the provider. |\n| `silent_login_uri` | Page that starts silent login; derived from `silent_redirect_uri` if omitted. |\n| `silent_login_timeout` | `12000` milliseconds. |\n| `refresh_time_before_tokens_expiration_in_second` | `120` seconds; the client applies random jitter when this setting is greater than 60. |\n| `token_renew_mode` | `'access_token_or_id_token_invalid'`; alternatives are `'access_token_invalid'` and `'id_token_invalid'`. |\n| `token_automatic_renew_mode` | `TokenAutomaticRenewMode.AutomaticBeforeTokenExpiration`; see [token renewal](#token-renewal). |\n| `token_request_timeout` | Token-request timeout in milliseconds. |\n| `extras` | Additional authorization-request parameters, such as `{ prompt: 'consent' }`. |\n| `token_request_extras` | Additional token-request parameters. Never use this to embed a browser client secret. |\n| `par`, `par_request_timeout` | `'disabled'` and `10000` milliseconds; see [PAR](#pushed-authorization-requests-par). |\n| `authority_time_cache_wellknowurl_in_second` | Discovery-cache lifetime; defaults to one hour. |\n| `authority_timeout_wellknowurl_in_millisecond` | Discovery timeout; defaults to `10000` milliseconds. |\n| `monitor_session` | `false`; enables OIDC session monitoring when supported by the provider and browser. |\n| `logout_tokens_to_invalidate` | `['access_token', 'refresh_token']`; token types to revoke during standard logout. |\n| `preload_user_info` | `false`; fetch user information during login/session restoration instead of waiting for a consumer. |\n| `demonstrating_proof_of_possession` | `false`; see [DPoP](#dpop). |\n| `demonstrating_proof_of_possession_configuration` | Cryptographic settings for client-side DPoP. |\n| `service_worker_relative_url` | URL of the worker; omit to disable worker mode. |\n| `service_worker_only` | `false`; disallows browser-storage fallback when `true`. |\n| `service_worker_keep_alive_path` | `'/'`; path used by worker keep-alive requests. |\n| `service_worker_activate` | Function to override the default browser-based activation decision. |\n| `service_worker_register` | Custom `(url) => Promise