@ssskram/authz v2.0.5

Auth

This repo contains an implementation of the Auth0 client library that is wrapped in a nice little React component. It can be placed anywhere on the tree, and it will treat all children as protected resources.

Installation

This package is currently served from my personal npm account. This will change once we get our own npm/gpr account set up.

yarn add @ssskram/authz

Usage

.env

REACT_APP_AUTH0_DOMAIN={Auth0 domain}
REACT_APP_AUTH0_ID={Auth0 client ID}

Ask Paul for these :)

Without a store

The simplest implementation just pushes the user through the authentication flow, and then delivers the Auth object to the child as a property which can be drilled down as needed:

import Auth from '@ssskram/authz'
import Spinner from '.'
import Layout from '.'

const App = () => {
    return (
        <Auth
          appVersion={version}
          intercomBubble={<IntercomBubble />}
          required={true}
          loadingScreen={<LoadingScreen />}
        >
            <Layout>
        </Auth>
    )
};

type props = {
  auth?: Auth;
};

const Layout = (props: props) => {
  // props.auth contains the user info and actions
  return <></>;
};

With a store

If, on return from Auth0, the user data & actions need to be persisted in a state container (mobx, redux), this can be faciltated through explicit props:

import Auth from '@ssskram/authz';
import useRootStore from 'utils/useRootStore';
import Spinner from '.';
import Layout from '.';

const App = () => {
  const { auth } = useRootStore();

  return (
    <Auth
      appVersion={version}
      intercomBubble={<IntercomBubble />}
      required={true}
      loadingScreen={<LoadingScreen />}
      logout={(l: () => void) => userStore.setLogoutAction(l)}
      idToken={(t: string) => firebaseAuth(t)}
    >
      <Layout />
    </Auth>
  );
};

Props

Develop

Install dependencies

yarn

Run Storybook

yarn storybook

Build & Release

Build

yarn build

Release

yarn release

License

MIT © Modulz