react-oauth2-authcode-provider

A component that can wrap react single page applications to implement authentication with OAuth2 Authorization Code Flow.

Contents

• About
• Install
• Usage
• Props
  • AuthCodeProvider properties
  • AuthCodeProps properties
• Functions
• License

About

Wrap a single page react application with the AuthCodeProvider component to easily handle authentication with an OAuth2 server using Authorization Code flow for all pages, using just a few lines of code.

AuthCodeProvider can also be added to individual pages or react components to only require authentication for particular areas of an application.

A set of functions included in AuthCodeFunctions can also be used to initiate flows, get tokens, or sign requests.

Also includes Refresh token flow, and token management and logout flow.

Install

npm install --save react-oauth2-authcode-provider

Peer Dependencies;

• React v16 +
• Axios v0.19 +

Usage

Minimum required;

import React, { Component } from 'react'

import { AuthCodeProvider } from 'react-oauth2-authcode-provider'
import 'react-oauth2-authcode-provider/dist/index.css'

class Example extends Component {
  render() {
    return 
      <AuthCodeProvider 
        authenticationProps={{
          authUrl: 'https://yourauthserver.com/authorize',
          callBackPath: '/callbackpath',
          tokenUrl: 'https://yourauthserver.com/token',
          clientId: 'your_client_id',
          clientSecret: 'your_client_secret',
          scope: 'somescope offline_access'
        }}
      >
        <div>Your app will go here</div>
      </AuthCodeProvider>
  }
}

See the Examples for an application of this component. This showcases a few different use cases all in one single page application, and you can see this in action whilst hooked up to a test Auth0 server.

Build the Examples with npm install and then npm start to start the development server at http://localhost:3000.

Or view the online example at https://darylbuckle.github.io/react-oauth2-authcode-provider.

A simple example that always requires authentication can also be found at https://github.com/darylbuckle/react-oauth2-authcode-provider-test.

Props

AuthCodeProvider properties

AuthCodeProps properties

Functions

The following functions can be imported from AuthCodeFunctions.

License

MIT © DarylBuckle 2020