@praetorian-studio/recog NPM

`ReCog`

React / Recoil / Cognito Container for easy user pool management in React.

Components

`ReCog.Root`

Description

This is the root of the ReCog environment and requires a userPoolId and clientId from cognito. Optionally, a storage can be passed that has the same interface as window.sessionStorage or window.localStorage (defaults to window.sessionStorage).

Usage

import React from 'react';
import ReCog from 'recog';
import {RecoilRoot} from "recoil";

import LoginForm from 'components/LoginForm';
import LoggedInApp from 'components/LoggedInApp';
import Loading from 'components/Loading';
import NewPasswordChallenge from 'components/NewPasswordChallenge';

export default function App(){
    
    return (
        <RecoilRoot>
            <ReCog.Root userPoolId={REACT_APP_COGNITO_POOL_ID} clientId={REACT_APP_CLIENT_ID}>
                <div className="App">
                    <header className="App-header">
                        <ReCog.Unauthorized>
                            <ReCog.BadAuth>
                                <h1>LOGIN FAILED</h1>
                            </ReCog.BadAuth>
                            <LoginForm />
                        </ReCog.Unauthorized>
    
                        <ReCog.LoggedIn component={LoggedInApp} />
    
                        <ReCog.Validating component={Loading} />
    
                        <ReCog.NewPasswordRequired component={NewPasswordChallenge} />
    
                    </header>
                </div>
            </ReCog.Root>
        </RecoilRoot>
    )

}

Parameters

Parameter	Type	Description
userPoolId	string	The AWS Cognito User Pool Id that stores the users
clientId	string	The AWS Cognito Client Id specific to this app.
storage	typeof window.sessionStorage	A storage for storing the accessToken, idToken, refreshToken and expiry