OAuth 2.0 Client Library Implementation

So for the Implementation of the Library, i have followed the specs proposed by IETF OAuth Working Group.

So Basic flow of the protocol:

OAuth2.0 Abstract Flow

Features

It is a light weight package only has axios as its dependencies, uses web crypto which are built-in since Node 18 (but it works with Polyfills on Node 14 and 16).

It is platform agnostic which can be used in both client and server javascript environment .

Following OAuth Grant, it Supports

• Authorization Code
• PKCE
• Client Credentials
• Refresh Token
• Legacy: Implicit Flow

Installation

Install simple-oauth2-ts-client with npm

  npm i simple-oauth2-ts-client

Usage/Examples

To get started with initialize the client with the following attributes

 const client =new OAuthClient({
      auth_server: string; //authorisation  server domain endpoint 
      client_id: string;  // provided by auth server for public client 
      client_secret?: string; // provided by auth server for confidential client 
      redirect_uri: string; // redirection uri for Authorization Code && implicit grant type
      authorization_endpoint?: string; // @default /authorize
      token_endpoint?: string; // @default /token
      authenticationMethod?: "client_secret_basic" | "client_secret_post" | "none";
 })

This client Object has following method to use for various purposes

// This will return redirection uri -->

  await client.startAuthFlow(
    params: OAuthStartAuthFlow
  ): Promise<OAuthStartAuthFlowResponse> // can be used for Authorization Code or implicit grants

// to handle successful redirection uri 

    await client.handleCallback(params: {
    uri: string;  // redirection back uri
    grant_type: OAuth2GrantType;  // use authorization_code for Authorization Code grant type
    state?: string; //   // Optional string that can be sent along to the auth server. This value will
  // be sent along with the redirect back to the app verbatim.
    code_verifier?: string; // to support PKCE 
    }): Promise<OAuth2Token> 
  
// to handle refresh token 

await client.refreshToken(
    refreshToken: string,
    params?: RefreshParams
  ): Promise<OAuth2Token> 

To generate code verifier and codeChallenge , it exports uility function to do This

await generateCodeVerifier(): Promise<string>

Challenges ?

During Impplementations of specs of OAuth 2.0

I have no idea about the clear picture of inner working of the OAuth 2.0, so going though https://oauth.net/2/ specs helps me a lot to clear things out. I was intiially using webpack build, but not able debug properly the errors, and test the lib in real application, so i have to use npm link, and local implementation to clear thing out .

During PKCE implementations ?

To suppor crypo lib in both client, and server runtime, i have to explore how can i achieve it , then i have came across the stack overflow ans about the various implementions in various environments

 async function getWebCrypto(): Promise<typeof window.crypto> {
  // Browsers
  if (typeof window !== "undefined" && window.crypto) {
    if (!window.crypto.subtle?.digest) {
      throw new Error(
        "The context/environment is not secure, and does not support the 'crypto.subtle' module. See: https://developer.mozilla.org/en-US/docs/Web/API/Crypto/subtle for details"
      );
    }
    return window.crypto;
  }
  // Web workers possibly
  if (typeof self !== "undefined" && self.crypto) {
    return self.crypto;
  }
  // Node
  // eslint-disable-next-line @typescript-eslint/no-var-requires
  const crypto = await import("crypto");
  return crypto.webcrypto as typeof window.crypto;
}

This helps me to generate code verifier and code challenge without using any third party library.

Demo

Client side implementation, used Auth0 Provider for the auth server

Live Demo: https://oauth-client.vercel.app/

Dummy Credentials

User Email : [email protected]

Password: xzH@$ubp25744Y9

Server Side Implementions ( used Next Js SSR)

Live Demo: https://oauth-client-gt7y.vercel.app/

Dummy Credentials

User Email : [email protected]

Password: xzH@$ubp25744Y9