CloudScape Website Authentication

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

This generator configures the CDK 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 CloudScape website.

Usage

Add Authentication to your CloudScape Website

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

VSCode

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#cloudscape-website#auth
5. Fill in the required parameters
6. Click Generate

CLI

pnpm

pnpm nx g @aws/nx-plugin:ts#cloudscape-website#auth

yarn

yarn nx g @aws/nx-plugin:ts#cloudscape-website#auth

npm

npx nx g @aws/nx-plugin:ts#cloudscape-website#auth

bun

bunx nx g @aws/nx-plugin:ts#cloudscape-website#auth

You can also perform a dry-run to see what files would be changed

pnpm

pnpm nx g @aws/nx-plugin:ts#cloudscape-website#auth --dry-run

yarn

yarn nx g @aws/nx-plugin:ts#cloudscape-website#auth --dry-run

npm

npx nx g @aws/nx-plugin:ts#cloudscape-website#auth --dry-run

bun

bunx nx g @aws/nx-plugin:ts#cloudscape-website#auth --dry-run

Options

Parameter	Type	Default	Description
project required	string	-	The root directory of the Cloudscape application.
cognitoDomain required	string	-	The cognito domain prefix to use
allowSignup	boolean		Whether to allow self-signup

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

You will also find the following infrastructure code generated in packages/common/constructs:

• Directorysrc

  • Directorycore

    • user-identity.ts Construct which defines the user pool and identity pool

Infrastructure Usage

You will need to add the UserIdentity construct to your stack, declaring it before the website construct:

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

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');
  }
}