Skip to content
@aws/nx-plugin
Blog

React Website Authentication

The React Website Authentication generator adds authentication to your React website using Amazon Cognito.

This generator configures the CDK or Terraform infrastructure to create a Cognito User Pool and associated Identity Pool, as well as a hosted UI for handling user login flows, and its integration with your React website.

Usage

Section titled “Usage”

Add Authentication to your React Website

Section titled “Add Authentication to your React Website”

You can add authentication to your React website in two ways:

  1. Install the Nx Console VSCode Plugin if you haven't already
  2. Open the Nx Console in VSCode
  3. Click Generate (UI) in the "Common Nx Commands" section
  4. Search for @aws/nx-plugin - ts#react-website#auth
  5. Fill in the required parameters
    • Click Generate

    Options

    Section titled “Options”
    Parameter Type Default Description
    project Required string - The root directory of the React website.
    cognitoDomain Required string - The cognito domain prefix to use
    allowSignup boolean Whether to allow self-signup
    iacProvider string Inherit The preferred IaC provider. By default this is inherited from your initial selection.

    Generator Output

    Section titled “Generator Output”

    You will find the following changes in your React website:

    • Directorysrc
      • Directorycomponents
        • DirectoryCognitoAuth
          • index.tsx Main authentication component
      • main.tsx Updated to instrument the CognitoAuth component

    Infrastructure

    Section titled “Infrastructure”

    Since this generator vends infrastructure as code based on your chosen iacProvider, it will create a project in packages/common which includes the relevant CDK constructs or Terraform modules.

    The common infrastructure as code project is structured as follows:

    • Directorypackages/common/constructs
      • Directorysrc
        • Directoryapp/ Constructs for infrastructure specific to a project/generator
          • …
        • Directorycore/ Generic constructs which are reused by constructs in app
          • …
        • index.ts Entry point exporting constructs from app
      • project.json Project build targets and configuration

    You will also find the following infrastructure code generated based on your selected iacProvider:

    • Directorypackages/common/constructs/src
      • Directorycore
        • user-identity.ts Construct which defines the user pool and identity pool

    Infrastructure Usage

    Section titled “Infrastructure Usage”

    You will need to add the user identity infrastructure to your stack, declaring it before the website:

    packages/infra/src/stacks/application-stack.ts
    import { Stack } from 'aws-cdk-lib';
    import { Construct } from 'constructs';
    import { MyWebsite, UserIdentity } from ':my-scope/common-constructs';
    

    export class ApplicationStack extends Stack {
      constructor(scope: Construct, id: string) {
        super(scope, id);
    

        new UserIdentity(this, 'Identity');
    

        new MyWebsite(this, 'MyWebsite');
      }
    }

    The UserIdentity construct automatically adds the necessary Runtime Configuration to ensure that your website can point to the correct Cognito User Pool for authentication.

    Granting Access to Authenticated Users

    Section titled “Granting Access to Authenticated Users”

    In order to grant authenticated users access to perform certain actions, such as granting permissions to invoke an API, you can add IAM policy statements to the identity pool authenticated role:

    packages/infra/src/stacks/application-stack.ts
    import { Stack } from 'aws-cdk-lib';
    import { Construct } from 'constructs';
    import { MyWebsite, UserIdentity, MyApi } from ':my-scope/common-constructs';
    

    export class ApplicationStack extends Stack {
      constructor(scope: Construct, id: string) {
        super(scope, id);
    

        const identity = new UserIdentity(this, 'Identity');
        const api = new MyApi(this, 'MyApi');
    

        api.grantInvokeAccess(identity.identityPool.authenticatedRole);
    

        new MyWebsite(this, 'MyWebsite');
      }
    }