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

Features

• Authorization server agnostic, works equally well with all OAuth2 auth servers following the OAuth2 spec
• Supports OpenID Connect (idTokens)
• Pre- and Post login callbacks
• Silently refreshes short lived access tokens in the background
• Decodes JWT's

Example

1import React, { useContext } from 'react'
2import ReactDOM from 'react-dom'
3import { AuthContext, AuthProvider, TAuthConfig } from 'react-pkce-oauth2'
4
5const authConfig: TAuthConfig = {
6  clientId: 'myClientID',
7  authorizationEndpoint: 'myAuthEndpoint',
8  tokenEndpoint: 'myTokenEndpoint',
9  // Whereever your application is running. Must match configuration on authorization server
10  redirectUri: 'http://localhost:3000/',
11  // Optional
12  scope: 'someScope openid',
13  // Optional
14  logoutEndpoint: '',
15  // Optional
16  logoutRedirect: '',
17  // Example to redirect back to original path after login has completed
18  preLogin: () => localStorage.setItem('preLoginPath', location.pathname),
19  postLogin: () => location.replace(localStorage.getItem('preLoginPath')),
20  // Wether or not to try and decode the access token.
21  // Stops errors from being printed in the console for non-JWT access tokens, etc. from Github
22  decodeToken: true,
23  // Indicates whether it should require the user to log in even if the user already has an active session.
24  prompt: true,
25}
26
27function LoginInfo() {
28  const { tokenData, token, idToken, logOut, error } = useContext(AuthContext)
29
30  return (
31    <>
32      {token ? (
33        <>
34          <div>
35            <h4>Access Token (JWT)</h4>
36            <pre>{token}</pre>
37          </div>
38          <div>
39            <h4>Login Information from Access Token (Base64 decoded JWT)</h4>
40            <pre>{JSON.stringify(tokenData, null, 2)}</pre>
41          </div>
42        </>
43      ) : (
44        <div>You are not logged in</div>
45      )}
46    </>
47  )
48}
49
50ReactDOM.render(
51  <div>
52    <AuthProvider authConfig={authConfig}>
53      <LoginInfo />
54    </AuthProvider>
55  </div>,
56  document.getElementById('root')
57)

Install

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

1npm install react-pkce-oauth2

and import

1import { AuthContext, AuthProvider } from 'react-pkce-oauth2'

Develop

1. Update the 'authConfig' object in src/index.js with config from your authorization server and application
2. Install node_modules -> $ yarn install
3. Run -> $ yarn start

Contribute

You are welcome to create issues and pull requests :)