cognito-oauth-library

React library to facilitate oauth flow with AWS Cognito

Install

Npm

npm install --save cognito-oauth-library

Yarn

yarn add cognito-oauth-library

How it works

First you need to pass all required settings to the cognito-oauth-library.

config.jsx

import React from 'react';

import { Cognito } from 'cognito-oauth-library';

const cognito = new Cognito({
  clientId: '<Your-Client-Id>',
  domain: '<Your-Cognito-Domain>',
  region: '<Your-AWS-Region>',
  responseType: '<code|implicit>',
  redirectUri: '<Your-Redirect-Uri'
});

export default cognito;

After this you'll be able to access all components from the library

Components

The components only work inside of a Session Context.

How to use Session Component

This component will provide you every information you need from the authentication. It is a Provider from React Context API and it will allow you to share an Authentication context along all children components inside <Session/>

SessionComponent.jsx

import React from 'react';

import { Session } from 'cognito-oauth-library';

import cognito from './config';

<Session cognito={cognito}>
  <MyComponent />
</Session>

MyComponent.jsx

import React, { useContext } from 'react';
import { SessionContext } from 'cognito-oauth-library';

function MyComponent(){
  const session = useContext(SessionContext);

  return (
    <div>
      <a href={session.cognito_url}>Sign In</a>
    </div>
  );
}

How to use Session Context

You can use SessionContext to get all informations from the authentication shared context.

| Property | Description | |- |- | | cognito_url | Authentication url for Cognito Sign In UI | | user | All data from oauth2/userinfo endpoint | | | |

Context Usage

import React, { useContext } from 'react';
import { SessionContext } from 'cognito-oauth-library';

const session = useContext(SessionContext);

Api Service

This library also provides you, a Axios instance with some plus configurations like, it adds your token into all requests and when your API returns 401 error code, it automatically tries to refresh your token.

How to use Api Service

Api.js

import cognito from './config';

const Api = cognito.createApi({
  baseUrl: `<Your-Api-Url-Here>`,
  headers?: {
    '<Your-Header-Name>' : '<Your-Header-Value>'
  }
});

export default Api;

With that, you can have access into get, post, update and delete methods from Axios.

License

MIT © dariorlima