An Open ID Connect client for single page applications, particularly suitable for Vite projects.
This library is for integrating your application with OIDC Server like Keycloak, Ory Hydra or Dex.
In straightforward terms, oidc-spa enable login/registration in your web application.
When used in conjunction with Keycloak (for example),
it enables you to offer a modern and secure authentication experience with minimal coding effort.
This includes options for signing in via Google, X, GitHub, or other social media platforms. We provide comprehensive guidance from beginning to end.
- 🎓 Accessible to all skill levels: No need to be an authentication expert. And we're happy to help on Discord!
- 🛠️ Simple setup: No need to define
/login
or/logout
routes. Token refreshing is handled automatically. - 💬 Debug messages: Provides clear feedback on misconfigurations and how to resolve them.
- 🕣 Auto logout: Supports session expiration with automatic logout prompts.
- 🚪 Logout propagation: Logging out in one tab automatically logs out all others.
- ✨ React integration: Includes React utilities but works independently as well.
- 📖 Documentation & examples: Covers setup, usage, and common scenarios.
- ✅ Type safety: Strong TypeScript support with optional Zod integration for JWT validation.
- 🔒 Security: Uses Authorization Code Flow + PKCE. No token storage in
localStorage
orsessionStorage
. - 🖥️ Optional Backend tooling: Provides utilities for access token validation in JavaScript backends (Node, Deno, WebWorker).
- 🔗 Multi-instance support: Allows authentication against multiple APIs (using different OIDC clients) within the same application.
While oidc-client-ts
serves as a comprehensive toolkit to support all sort of applications, our library aims to provide a simplified, easy-to-setup adapter
specifically tailored for SPAs.
react-oidc-context
is a React wrapper around oidc-client-ts
.
oidc-spa
also feature a carefully crafted React API that comes with example
integration with:
The official OIDC Client for Keycloak. It only works with Keycloak and will eventually be deprecated.
NextAuth.js is a authentication solution for Next.js and features a Keycloak adapter.
oidc-spa
is specifically designed for Single Page Applications, Next.js projects do not fall in this category, so NextAuth.js is what you should use if you're using Next.js.
NOTE: We might create in the future a
oidc-mpa
library for Multi Page Applications that would aim at supporting Next.js projects.
Heads over to the documentation website 📘!
Project backers, we trust and recommend their services.
Keycloak as a Service - Keycloak community contributors of popular extensions providing free and dedicated Keycloak hosting and enterprise Keycloak support to businesses of all sizes.
This library powers the authentication of the following platforms:

