Initial Setup

import React, { useEffect } from "react";
import Auth from "@aws-amplify/auth";
import { useSecurity } 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"
    }
});

// The `Authenticator` component.
const Authenticator: React.FC = props => {
    const { setIdentity } = useSecurity();

    useEffect(() => {
        // Get the currently signed in user.
        Auth.currentSession()
            .then(response => {
                const user = response.getIdToken().payload;
                setIdentity({
                    id: user.email,
                    type: "user",
                    displayName: user.given_name + " " + user.family_name,
                    permissions: [],
                    logout: () => {
                        Auth.signOut();
                        setIdentity(null);
                    }
                });
            })
            .catch(() => {
                /* Do nothing. */
            });
    }, []);

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

export default Authenticator;

import React from "react";import { ApolloProvider } from "@apollo/react-components";import { Routes } from "@webiny/app/components/Routes";import { BrowserRouter } from "@webiny/react-router";import { SecurityProvider } from "@webiny/app-security";import Authenticator from "./components/Authenticator";import { createApolloClient } from "./apollo";
// An entrypoint for all SCSS styles your application might have.import "./App.scss";import "antd/dist/antd.css";
// The beginning of our React application, where we mount a couple of useful providers.// If needed, feel free to add new or modify existing providers.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>          <Authenticator>              {/* Sets up a new Apollo GraphQL client, pointed to an existing GraphQL API. */}              <ApolloProvider                  client={createApolloClient({ uri: process.env.REACT_APP_GRAPHQL_API_URL })}              >                  {/* Enables routing in our application. */}                  <BrowserRouter basename={process.env.PUBLIC_URL}>                      <Routes />                  </BrowserRouter>              </ApolloProvider>          </Authenticator>      </SecurityProvider>  </>);

import { ConsoleLinkPlugin } from "@webiny/app/plugins/ConsoleLinkPlugin";import { NetworkErrorLinkPlugin } from "@webiny/app/plugins/NetworkErrorLinkPlugin";import { OmitTypenameLinkPlugin } from "@webiny/app/plugins/OmitTypenameLinkPlugin";import { ApolloLinkPlugin } from "@webiny/app/plugins/ApolloLinkPlugin";import { setContext } from "apollo-link-context";import { Auth } from "@aws-amplify/auth";
export default [// This link removes `__typename` from the variables being sent to the API.new OmitTypenameLinkPlugin(),
// This link checks for presence of `extensions.console` in the response and logs all items to browser console.new ConsoleLinkPlugin(),
// This plugin creates an ApolloLink that checks for `NetworkError` and shows an ErrorOverlay in the browser.new NetworkErrorLinkPlugin(),
 new ApolloLinkPlugin(() => {   return setContext(async (_, { headers }) => {     try {       const user = await Auth.currentSession();       return {        headers: {          ...headers,          Authorization: user.getIdToken().getJwtToken(),        },      };    } catch (error) {      return { headers };    }  });}),];