package-development

react-oauth2-pkce

Plug-and-play react package for OAuth2 Authorization Code flow with PKCE

Adhering to the RFCs recommendations, cryptographically sound, and with zero dependencies!

What is OAuth2 Authorization Code flow with PKCE?

Short version;
The modern and secure way to do authentication for mobile and web applications!

Long version;
https://oauth.net/2/pkce/
https://datatracker.ietf.org/doc/html/rfc7636

Example

import React, { useContext } from 'react'
import ReactDOM from 'react-dom'
import { AuthContext, AuthProvider, TAuthConfig } from "react-oauth2-code-pkce"

const authConfig: TAuthConfig = {
  clientId: 'myClientID',
  authorizationEndpoint: 'myAuthEndpoint',
  tokenEndpoint: 'myTokenEndpoint',
  // Where ever your application is running. Must match whats configured in authorization server
  redirectUri: 'http://localhost:3000/',
  // Optional
  scope: 'someScope openid',
  // Optional
  logoutEndpoint: '',
  // Optional
  logoutRedirect: ''
}

function LoginInfo() {
  const { tokenData, token, idToken, logOut } = useContext(AuthContext)

  return (
      <>
        {token ?
            <>
              <div>
                <h4>Access Token (JWT)</h4>
                <pre>{token}</pre>
              </div>
              <div>
                <h4>Login Information from Access Token (Base64 decoded JWT)</h4>
                <pre>{JSON.stringify(tokenData, null, 2)}</pre>
              </div>
            </> :
            <div>You are not logged in</div>
        }
      </>
  )

}


ReactDOM.render(
    <div>
      <AuthProvider authConfig={authConfig}>
        <LoginInfo/>
      </AuthProvider>
    </div>, document.getElementById('root'),
)

Install

The package is available on npmjs.com here; https://www.npmjs.com/package/react-oauth2-code-pkce

npm install react-oauth2-code-pkce

and import

import { AuthContext, AuthProvider } from "react-oauth2-code-pkce"

Contribute

You are welcome to create issues and pull requests :)