@spraoi/auth

Container components for making authentication a breeze.

Installation

yarn add @spraoi/auth

Usage

AuthProvider

AuthProvider is a container component that provides context to its children. Check the source for details.

import React from 'react';
import { AuthProvider } from '@spraoi/auth';

const amplifyConfig = {
  // ...
};

const AuthenticatedApp = (
  <AuthProvider amplifyConfig={amplifyConfig}>
    {/* your app goes here... */}
  </AuthProvider>
);

Amplify Config Documentation

• https://aws-amplify.github.io/docs/js/authentication#manual-setup
• https://aws-amplify.github.io/docs/js/api#manual-setup
• https://aws-amplify.github.io/docs/js/storage#manual-setup

AuthContext.Consumer

AuthContext.Consumer is just the context consumer for the above AuthProvider.

import React from 'react';
import { AuthContext } from '@spraoi/auth';

const Component = (
  <AuthContext.Consumer>
    {(authContext) => {
      // use the context here...
    }}
  </AuthContext.Consumer>
);

Page

Page is a simple authenticated/unauthenticated route container component/helper.

Props

isPrivate: bool

If true and the user isn’t authenticated, they are redirected to the login page or the redirect path. The current pathname is set to the redirect query param. This is useful for redirecting back to the page that was originally requested (once authenticated).

isPublic: bool

If true and the user is authenticated, they are redirected to the home page or the redirect path.

redirect: string

The path to redirect to in the cases above.

renderLoading: node

The component to render if waitForAuth is true.

waitForAuth: bool

If true, the page contents aren’t shown until we know if the user is authenticated or not.

Private Route Example

import React from 'react';
import { Page } from '@spraoi/auth';

const Route = (
  <Page isPrivate renderLoading="Loading!" waitForAuth>
    {/* your page goes here... */}
  </Page>
);