openid-client vs oidc-client-ts vs react-oidc-context vs oidc-client vs oidc-provider
OpenID Connect Libraries Comparison
1 Year
openid-clientoidc-client-tsreact-oidc-contextoidc-clientoidc-provider
What's OpenID Connect Libraries?

OpenID Connect libraries facilitate the implementation of the OpenID Connect protocol, which is an identity layer on top of the OAuth 2.0 protocol. These libraries help developers manage authentication and authorization in web applications, enabling secure access to resources and user information. They provide tools for handling user sessions, token management, and integrating with identity providers, making it easier to implement secure authentication flows in various applications.

Package Weekly Downloads Trend
Github Stars Ranking
Stat Detail
Package
Downloads
Stars
Size
Issues
Publish
License
openid-client2,910,0951,961179 kB08 days agoMIT
oidc-client-ts471,9861,5401.64 MB1035 months agoApache-2.0
react-oidc-context162,12079690.8 kB745 months agoMIT
oidc-client161,7262,432-1164 years agoApache-2.0
oidc-provider69,7403,330551 kB015 days agoMIT
Feature Comparison: openid-client vs oidc-client-ts vs react-oidc-context vs oidc-client vs oidc-provider

Token Management

  • openid-client:

    openid-client offers comprehensive token management capabilities, including support for dynamic client registration and various grant types. It allows developers to handle tokens efficiently while integrating with external identity providers.

  • oidc-client-ts:

    oidc-client-ts inherits the token management features of oidc-client while providing TypeScript definitions. This allows developers to work with tokens in a type-safe manner, reducing the chances of runtime errors related to token handling.

  • react-oidc-context:

    react-oidc-context simplifies token management in React applications by providing hooks and context for accessing token information. It abstracts the complexity of token handling, allowing developers to focus on building their application.

  • oidc-client:

    oidc-client provides built-in support for managing access tokens and refresh tokens. It handles token expiration and renewal automatically, ensuring that your application can maintain a valid session without requiring user intervention.

  • oidc-provider:

    oidc-provider focuses on token issuance and management from the server side. It allows developers to define custom token lifetimes and implement various token types, ensuring compliance with OpenID Connect specifications.

TypeScript Support

  • openid-client:

    openid-client is written in JavaScript and lacks built-in TypeScript support. Developers may need to rely on community-maintained type definitions for TypeScript projects.

  • oidc-client-ts:

    oidc-client-ts is specifically designed for TypeScript, providing complete type definitions and ensuring that developers can leverage TypeScript's features for better code quality and maintainability.

  • react-oidc-context:

    react-oidc-context is built with TypeScript, providing type definitions that enhance the developer experience in React applications, ensuring type safety when working with authentication states.

  • oidc-client:

    oidc-client is primarily written in JavaScript, which may lead to a lack of type safety when used in TypeScript projects. Developers may need to create their own type definitions for better integration.

  • oidc-provider:

    oidc-provider does not natively support TypeScript, but developers can use type definitions from DefinitelyTyped to enhance their experience when working with TypeScript.

Ease of Use

  • openid-client:

    openid-client is powerful but can be complex for beginners. Its extensive features require a deeper understanding of OpenID Connect, making it less beginner-friendly compared to client-side libraries.

  • oidc-client-ts:

    oidc-client-ts maintains the ease of use of oidc-client while adding the benefits of TypeScript. Developers familiar with TypeScript will find it easier to implement and maintain their authentication flows.

  • react-oidc-context:

    react-oidc-context is designed for React applications, providing a simple API and hooks that make it easy to manage authentication state within React components.

  • oidc-client:

    oidc-client is user-friendly and provides a straightforward API for implementing OpenID Connect flows. Its documentation is comprehensive, making it easy for developers to get started with minimal configuration.

  • oidc-provider:

    oidc-provider has a steeper learning curve due to its focus on server-side implementation. Developers need to understand OpenID Connect specifications to effectively customize their provider.

Integration

  • openid-client:

    openid-client is highly versatile and can integrate with a wide range of OpenID Connect providers. It supports multiple authentication flows, making it suitable for various server-side applications.

  • oidc-client-ts:

    oidc-client-ts offers the same integration capabilities as oidc-client but with added TypeScript benefits, making it easier to integrate with other TypeScript-based libraries and frameworks.

  • react-oidc-context:

    react-oidc-context is tailored for React applications, providing hooks and context that simplify the integration of OpenID Connect into React components, making it easier to manage authentication states.

  • oidc-client:

    oidc-client integrates seamlessly with various identity providers, allowing developers to implement authentication flows with minimal effort. It is particularly suited for SPAs that require client-side authentication.

  • oidc-provider:

    oidc-provider is intended for developers building their own OpenID Connect providers, allowing for extensive customization and integration with existing user databases and authentication systems.

Community and Support

  • openid-client:

    openid-client has a robust community and extensive documentation, making it easier for developers to find help and resources when integrating with various identity providers.

  • oidc-client-ts:

    oidc-client-ts benefits from the community around oidc-client, but its TypeScript focus may limit some resources. However, TypeScript's growing popularity ensures increasing support.

  • react-oidc-context:

    react-oidc-context is relatively new but is gaining traction within the React community. As it grows, more resources and community support are likely to emerge.

  • oidc-client:

    oidc-client has a strong community and is widely used, which means there are many resources, tutorials, and support available for developers facing issues during implementation.

  • oidc-provider:

    oidc-provider has a dedicated community of developers focused on building OpenID Connect providers. While resources may be less abundant than client libraries, they are highly specialized.

How to Choose: openid-client vs oidc-client-ts vs react-oidc-context vs oidc-client vs oidc-provider
  • openid-client:

    Use openid-client if you need a flexible and powerful library for integrating with existing OpenID Connect providers. It is designed for server-side applications and provides extensive features for managing client authentication and token handling.

  • oidc-client-ts:

    Select oidc-client-ts if you prefer TypeScript support and want to leverage type safety in your OpenID Connect implementation. This library is a TypeScript version of oidc-client, ensuring better integration with TypeScript projects and enhancing developer experience with type definitions.

  • react-oidc-context:

    Choose react-oidc-context if you are developing a React application and want to simplify the integration of OpenID Connect. This library provides a React context for managing authentication state and user sessions, making it easier to work with OpenID Connect in React applications.

  • oidc-client:

    Choose oidc-client if you need a robust library for handling OpenID Connect flows in JavaScript applications, particularly for single-page applications (SPAs). It provides features like token management and automatic token renewal, making it suitable for client-side applications.

  • oidc-provider:

    Opt for oidc-provider if you are building your own OpenID Connect provider. This library allows you to create a compliant OpenID Connect server, offering customization options for user authentication and token issuance, making it suitable for backend applications.

README for openid-client

openid-client

OAuth 2 / OpenID Connect Client API for JavaScript Runtimes

openid-client simplifies integration with authorization servers by providing easy-to-use APIs for the most common authentication and authorization flows, including OAuth 2 and OpenID Connect. It is designed for JavaScript runtimes like Node.js, Browsers, Deno, Cloudflare Workers, and more.

Features

The following features are currently in scope and implemented in this software:

  • Authorization Server Metadata discovery
  • Authorization Code Flow (profiled under OpenID Connect 1.0, OAuth 2.0, OAuth 2.1, FAPI 1.0 Advanced, and FAPI 2.0)
  • Refresh Token, Device Authorization, Client-Initiated Backchannel Authentication (CIBA), and Client Credentials Grants
  • Demonstrating Proof-of-Possession at the Application Layer (DPoP)
  • Token Introspection and Revocation
  • Pushed Authorization Requests (PAR)
  • UserInfo and Protected Resource Requests
  • Authorization Server Issuer Identification
  • JWT Secured Introspection, Response Mode (JARM), Authorization Request (JAR), and UserInfo
  • Passport Strategy

Sponsor

Auth0 by Okta

If you want to quickly add authentication to JavaScript apps, feel free to check out Auth0's JavaScript SDK and free plan. Create an Auth0 account; it's free!

Certification

OpenID Certification

Filip Skokan has certified that this software conforms to the Basic, FAPI 1.0, and FAPI 2.0 Relying Party Conformance Profiles of the OpenID Connect™ protocol.

💗 Help the project

Support from the community to continue maintaining and improving this module is welcome. If you find the module useful, please consider supporting the project by becoming a sponsor.

API Reference Documentation

openid-client is distributed via npmjs.com, jsr.io, and github.com.

Examples

example ESM import

import * as client from 'openid-client'
  • Authorization Code Flow (OAuth 2.0) - source
  • Authorization Code Flow (OpenID Connect) - source | diff
  • Extensions
  • Passport Strategy - source

Quick start

let server!: URL // Authorization Server's Issuer Identifier
let clientId!: string // Client identifier at the Authorization Server
let clientSecret!: string // Client Secret

let config: client.Configuration = await client.discovery(
  server,
  clientId,
  clientSecret,
)

Authorization Code Flow

Authorization Code flow is for obtaining Access Tokens (and optionally Refresh Tokens) to use with third party APIs.

When you want to have your end-users authorize or authenticate you need to send them to the authorization server's authorization_endpoint. Consult the web framework of your choice on how to redirect but here's how to get the authorization endpoint's URL with parameters already encoded in the query to redirect to.

/**
 * Value used in the authorization request as the redirect_uri parameter, this
 * is typically pre-registered at the Authorization Server.
 */
let redirect_uri!: string
let scope!: string // Scope of the access request
/**
 * PKCE: The following MUST be generated for every redirect to the
 * authorization_endpoint. You must store the code_verifier and state in the
 * end-user session such that it can be recovered as the user gets redirected
 * from the authorization server back to your application.
 */
let code_verifier: string = client.randomPKCECodeVerifier()
let code_challenge: string =
  await client.calculatePKCECodeChallenge(code_verifier)
let state!: string

let parameters: Record<string, string> = {
  redirect_uri,
  scope,
  code_challenge,
  code_challenge_method: 'S256',
}

if (!config.serverMetadata().supportsPKCE()) {
  /**
   * We cannot be sure the server supports PKCE so we're going to use state too.
   * Use of PKCE is backwards compatible even if the AS doesn't support it which
   * is why we're using it regardless. Like PKCE, random state must be generated
   * for every redirect to the authorization_endpoint.
   */
  state = client.randomState()
  parameters.state = state
}

let redirectTo: URL = client.buildAuthorizationUrl(config, parameters)

// now redirect the user to redirectTo.href
console.log('redirecting to', redirectTo.href)

When end-users are redirected back to the redirect_uri your application consumes the callback and passes in PKCE code_verifier to include it in the authorization code grant token exchange.

let getCurrentUrl!: (...args: any) => URL

let tokens: client.TokenEndpointResponse = await client.authorizationCodeGrant(
  config,
  getCurrentUrl(),
  {
    pkceCodeVerifier: code_verifier,
    expectedState: state,
  },
)

console.log('Token Endpoint Response', tokens)

You can then fetch a protected resource response

let protectedResourceResponse: Response = await client.fetchProtectedResource(
  config,
  tokens.access_token,
  new URL('https://rs.example.com/api'),
  'GET',
)

console.log(
  'Protected Resource Response',
  await protectedResourceResponse.json(),
)

Device Authorization Grant (Device Flow)

let scope!: string // Scope of the access request

let response = await client.initiateDeviceAuthorization(config, { scope })

console.log('User Code:', response.user_code)
console.log('Verification URI:', response.verification_uri)
console.log('Verification URI (complete):', response.verification_uri_complete)

You will display the instructions to the end-user and have them directed at verification_uri or verification_uri_complete, afterwards you can start polling for the Device Access Token Response.

let tokens: client.TokenEndpointResponse =
  await client.pollDeviceAuthorizationGrant(config, response)

console.log('Token Endpoint Response', tokens)

This will poll in a regular interval and only resolve with tokens once the end-user authenticates.

Client-Initiated Backchannel Authentication (CIBA)

let scope!: string // Scope of the access request
/**
 * One of login_hint, id_token_hint, or login_hint_token parameters must be
 * provided in CIBA
 */
let login_hint!: string

let response = await client.initiateBackchannelAuthentication(config, {
  scope,
  login_hint,
})

/**
 * OPTIONAL: If your client is configured with Ping Mode you'd invoke the
 * following after getting the CIBA Ping Callback (its implementation is
 * framework specific and therefore out of scope for openid-client)
 */

let tokens: client.TokenEndpointResponse =
  await client.pollBackchannelAuthenticationGrant(config, response)

console.log('Token Endpoint Response', tokens)

This will poll in a regular interval and only resolve with tokens once the end-user authenticates.

Client Credentials Grant

Client Credentials flow is for obtaining Access Tokens to use with third party APIs on behalf of your application, rather than an end-user which was the case in previous examples.

let scope!: string // Scope of the access request
let resource!: string // Resource Indicator of the Resource Server the access token is for

let tokens: client.TokenEndpointResponse = await lib.clientCredentialsGrant(
  config,
  { scope, resource },
)

console.log('Token Endpoint Response', tokens)

Supported Runtimes

The supported JavaScript runtimes include those that support the utilized Web API globals and standard built-in objects. These are (but are not limited to):

  • Browsers
  • Bun
  • Cloudflare Workers
  • Deno
  • Electron
  • Node.js[^nodejs]
  • Vercel's Edge Runtime

Supported Versions

| Version | Security Fixes 🔑 | Other Bug Fixes 🐞 | New Features ⭐ | Runtime and Module type | | -------------------------------------------------------- | ----------------- | ------------------ | --------------- | ------------------------------- | | v6.x | ✅ | ✅ | ✅ | Universal[^universal] ESM[^cjs] | | v5.x | ✅ | ❌ | ❌ | Node.js CJS + ESM |

[^nodejs]: Node.js v20.x as baseline is required

[^universal]: Assumes runtime support of WebCryptoAPI and Fetch API

[^cjs]: CJS style let client = require('openid-client') is possible in Node.js versions where process.features.require_module is true by default (^20.19.0 || ^22.12.0 || >= 23.0.0) or with the --experimental-require-module Node.js CLI flag.