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;

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

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

const authConfig: TAuthConfig = {
clientId: 'myClientID',
authorizationEndpoint: 'myAuthEndpoint',
tokenEndpoint: 'myTokenEndpoint',
// Whereever your application is running. Must match configuration on authorization server
redirectUri: 'http://localhost:3000/',
// Optional
scope: 'someScope openid',
// Optional
logoutEndpoint: '',
// Optional
logoutRedirect: '',
// Example to redirect back to original path after login has completed
preLogin: () => localStorage.setItem('preLoginPath', location.pathname),
postLogin: () => location.replace(localStorage.getItem('preLoginPath')),
// Wether or not to try and decode the access token.
// Stops errors from being printed in the console for non-JWT access tokens, etc. from Github
decodeToken: true,
// Indicates whether it should require the user to log in even if the user already has an active session.
prompt: true,
}

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

return (
<>
{token ? (
<>


{token}

{JSON.stringify(tokenData, null, 2)}

`bash
npm install react-pkce-oauth2
`

and import

`javascript
import { 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 :)