@webiny/app-security

Exposes a simple SecurityProvider React provider component and enables you to quickly retrieve the currently signed-in user via the useSecurity React hook.

Install

npm install --save @webiny/app-security

Or if you prefer yarn:

yarn add @webiny/app-security

Quick Example

First, make sure you mount the SecurityProvider React provider component in your application's entrypoint component, for example the App component:

import React from "react";
import { Routes } from "@webiny/app/components/Routes";
import { BrowserRouter } from "@webiny/react-router";
import { SecurityProvider } from "@webiny/app-security";
import Authenticator from "./components/Authenticator";

export const App = () => (
    <>
        {/*
        <SecurityProvider> is a generic provider of identity information. 3rd party identity providers (like Cognito,
        Okta, Auth0) will handle the authentication, and set the information about the user into this provider,
        so other parts of the system have a centralized place to fetch user information from.
    */}
        <SecurityProvider>
            {/* This is the component that might trigger the initial authentication
        process and set the retrieved user data into the Security provider.*/}
            <Authenticator>
                <BrowserRouter basename={process.env.PUBLIC_URL}>
                    <Routes />
                </BrowserRouter>
            </Authenticator>
        </SecurityProvider>
    </>
);

A simple Authenticator React component (uses Amazon Cognito and AWS Amplify's Auth class):

import React, { useEffect } from "react";
import { Auth } from "@aws-amplify/auth";
import { useSecurity, SecurityIdentity } from "@webiny/app-security";

// Apart from the React component, we also configure the Auth class here.
Auth.configure({
    region: process.env.REACT_APP_USER_POOL_REGION,
    userPoolId: process.env.REACT_APP_USER_POOL_ID,
    userPoolWebClientId: process.env.REACT_APP_USER_POOL_WEB_CLIENT_ID,
    oauth: {
        domain: process.env.REACT_APP_USER_POOL_DOMAIN,
        redirectSignIn: `${location.origin}?signIn`,
        redirectSignOut: `${location.origin}?signOut`,
        responseType: "token"
    }
});

interface AuthenticatorProps {
    children: React.ReactNode;
}
// The `Authenticator` component.
const Authenticator = (props: AuthenticatorProps) => {
    const { setIdentity } = useSecurity();

    useEffect(() => {
        // Get the currently signed-in user.
        Auth.currentSession().then(response => {
            const user = response.getIdToken().payload;
            setIdentity(
                new SecurityIdentity({
                    login: user.email,
                    firstName: user.given_name,
                    lastName: user.family_name,
                    logout: () => {
                        Auth.signOut();
                        setIdentity(null);
                    }
                })
            );
        }).catch(() => { /* Do nothing. */ });
    }, []);

    return <>{props.children}</>;
};

export default Authenticator;

Finally, use the useSecurity React hook in any of your components:

import React from "react";
import { useSecurity } from "@webiny/app-security";

const MyComponent = () => {
  const { identity } = useSecurity();

  if (identity) {
    return <>Logged in.</>;
  }

  return <>Not logged in.</>;
};

export default MyComponent;