Skip to content

keycloakify/oidc-spa

Repository files navigation

oidc-spa


We're here to help!

Home - Documentation

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 or sessionStorage.
  • 🖥️ 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.

Comparison with Existing Libraries

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.

🚀 Quick start

Heads over to the documentation website 📘!

Sponsors

Project backers, we trust and recommend their services.


Logo Dark

Logo Light


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.




Logo Dark

Logo Light


Keycloak Consulting Services - Your partner in Keycloak deployment, configuration, and extension development for optimized identity management solutions.

Showcases

This library powers the authentication of the following platforms:

Onyxia

image

The French Interministerial Base of Free Software

image