How to set up oidc-client-ts with a React application?

Install the library via npm, configure a UserManager instance with your provider's OIDC metadata, and use React context or hooks to manage auth state. While the README provides an Angular sample, community examples for React are available online.

What's the difference between oidc-client-ts and the original oidc-client-js?

oidc-client-ts is a TypeScript fork with a similar API but removes support for deprecated flows like implicit grant to align with OAuth 2.1. Migration notes in the docs help transition from the older library.

Does oidc-client-ts work with Vue.js or Svelte?

Yes, it's framework-agnostic and can be integrated with any client-side JavaScript framework, but you'll need to handle the binding yourself as there are no official wrapper libraries provided.

How to handle token expiration and silent refresh in oidc-client-ts?

Use the silent refresh token flow via iframe, as documented in the protocols. Configure the UserManager to automatically renew tokens in the background, but test for browser compatibility issues with iframes.

oidc-client-ts vs Auth0 SDK: which one should I choose?

Choose oidc-client-ts if you need a provider-agnostic solution for any OIDC/OAuth2 server, offering flexibility. Opt for Auth0 SDK if you're exclusively using Auth0 services for tighter integration and managed features.

What are common errors when using oidc-client-ts and how to fix them?

Common issues include misconfigured redirect URIs or CORS problems with identity providers. Double-check your OIDC settings and ensure your provider allows the required origins, as detailed in the library's documentation.

Open-Awesome

oidc-client-ts

Apache-2.0TypeScriptv3.5.0

A TypeScript library for OpenID Connect and OAuth2 protocol support in browser-based JavaScript applications.

Visit Website GitHub

1.9k stars272 forks0 contributors

What is oidc-client-ts?

oidc-client-ts is a TypeScript library that implements OpenID Connect (OIDC) and OAuth2 protocols for browser-based JavaScript applications. It solves the problem of secure authentication and authorization in client-side apps by providing robust token management, session handling, and support for modern OAuth 2.1 standards.

Target Audience

Frontend developers building single-page applications (SPAs) or browser-based apps that require secure authentication with identity providers like Auth0, Okta, or custom OIDC/OAuth2 servers.

Value Proposition

Developers choose oidc-client-ts for its TypeScript-first design, comprehensive protocol support (including PKCE), and focus on security by deprecating outdated flows like implicit grant. It's a maintained fork of the popular oidc-client-js with active development and modern standards alignment.

Overview

OpenID Connect (OIDC) and OAuth2 protocol support for browser-based JavaScript applications

Use Cases

Best For

Adding OpenID Connect login to a React or Angular single-page application
Implementing OAuth2 authorization with PKCE for enhanced security
Managing user sessions and token refresh silently in background iframes
Migrating from the deprecated oidc-client-js library to a TypeScript solution
Building browser-based apps that authenticate with identity providers like Auth0 or Okta
Handling access token lifecycle and storage securely in client-side JavaScript

Not Ideal For

Applications requiring OAuth2 implicit grant flow for compatibility with older or non-compliant identity providers
Projects built with server-side rendering frameworks like Next.js that aim to minimize client-side JavaScript
Teams wanting pre-built, styled authentication UI components without implementing their own login interfaces
Native mobile app development, as it's designed exclusively for browser-based JavaScript environments

Pros & Cons

Pros

TypeScript First Design

The library is ported to TypeScript, offering type safety and improved developer experience, as highlighted in the README's migration from oidc-client-js.

Modern OAuth 2.1 Alignment

Focuses on secure, up-to-date protocols by deprecating risky flows like implicit grant and prioritizing PKCE, as stated in the philosophy section.

Comprehensive Protocol Support

Implements key grants including authorization code with PKCE, refresh token, and silent iframe refresh, detailed in the documented protocols.

Active Maintenance and Fork

As a maintained fork of the deprecated oidc-client-js, it receives ongoing updates and community contributions, ensuring longevity and modern standards compliance.

Cons

No Implicit Grant Support

Deliberately drops the OAuth2 implicit grant, which can break integration with legacy identity providers that haven't adopted PKCE or authorization code flow.

Iframe-Based Silent Refresh

Silent token renewal relies on iframes, making it vulnerable to browser security policies like SameSite cookie restrictions or iframe blocking, which can cause failures.

Configuration Complexity

Requires manual setup with identity provider endpoints and settings, which can be error-prone for developers unfamiliar with OIDC/OAuth2 specifications.

Frequently Asked Questions

Related Projects

Better Auth

The most comprehensive authentication framework

Stars29,300

Forks2,736

Last commit23 hours ago

openid-client

OAuth 2 / OpenID Connect Client API for JavaScript Runtimes

Stars2,372

Forks409

Last commit6 days ago

angular-oauth2-oidc

Support for OAuth 2 and OpenId Connect (OIDC) in Angular.

Stars1,980

Forks689

Last commit19 days ago

nuxt-auth for Nuxt 2

Zero-boilerplate authentication support for Nuxt 2

Stars1,926

Forks900

Last commit2 days ago

Community-curated · Updated weekly · 100% open source

Found a gem we're missing?

Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.

Submit a project Star on GitHub