Offline Access Example

Small demo React app using oidc-client-ts to demonstrate OIDC Authorization Code + PKCE, refresh tokens, and a protected profile page that calls the userinfo endpoint.

Quick start

1. Install deps: npm install
2. Create a .env file at project root with OIDC settings (example below)
3. Run: npm run dev

Example .env (Vite exposes env vars prefixed with VITE_):

VITE_OIDC_AUTHORITY=https://{your-zitadel-domain}
VITE_OIDC_CLIENT_ID={your-client-id}
VITE_OIDC_REDIRECT_URI=http://localhost:5173/callback
VITE_OIDC_POST_LOGOUT_REDIRECT_URI=http://localhost:5173/
VITE_OIDC_USERINFO=https://{your-zitadel-domain}/oauth/v2/userinfo

Zitadel setup notes

• Create an application in Zitadel of type "Web App".
• Allowed callback URL: http://localhost:5173/callback
• Allowed logout URL: http://localhost:5173/
• Ensure the application is granted the scopes: openid profile offline_access
• Use the issuer (authority) URL shown in Zitadel as VITE_OIDC_AUTHORITY (e.g. https://{your-zitadel-domain}).

Behavior & notes

• The app logs requests and IdP-related events to a persisted audit trail stored in localStorage (key: offline-example-audit). Use the "Clear" button in the UI to clear it.
• If refresh token renewal (silent signin) fails the app will perform a full interactive signin (redirect).
• userinfo is called from the protected profile page using the current access token.