@aws/nx-plugin 0.1.6 → 0.2.1

package/src/cloudscape-website/cognito-auth/__snapshots__/generator.spec.ts.snap

@@ -1,12 +1,10 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`cognito-auth generator > should generate files > cognito-auth-component 1`] = `
-"/*! Copyright [Amazon.com](http://amazon.com/), Inc. or its affiliates. All Rights Reserved.
-SPDX-License-Identifier: Apache-2.0 */
-import { CognitoAuth as NorthstarCognitoAuth } from '@aws-northstar/ui';
-import React, { useContext } from 'react';
-import Config from '../../config';
-import { RuntimeConfigContext } from '../RuntimeConfig';
+"import React, { PropsWithChildren, useEffect } from 'react';
+import { AuthProvider, AuthProviderProps, useAuth } from 'react-oidc-context';
+import { Alert, Spinner } from '@cloudscape-design/components';
+import { useRuntimeConfig } from '../../hooks/useRuntimeConfig';
 
 /**
  * Sets up the Cognito auth.
@@ -14,104 +12,119 @@ import { RuntimeConfigContext } from '../RuntimeConfig';
  * This assumes a runtime-config.json file is present at '/'. In order for Auth to be set up automatically,
  * the runtime-config.json must have the cognitoProps set.
  */
-const CognitoAuth: React.FC<any> = ({ children }) => {
-  const runtimeConfig = useContext(RuntimeConfigContext);
-
-  return runtimeConfig?.cognitoProps ? (
-    <NorthstarCognitoAuth
-      header={Config.applicationName}
-      userPoolId={runtimeConfig.cognitoProps.userPoolId}
-      clientId={runtimeConfig.cognitoProps.userPoolWebClientId}
-      region={runtimeConfig.cognitoProps.region}
-      identityPoolId={runtimeConfig.cognitoProps.identityPoolId}
-      allowSignup={true}
-      signUpAttributes={[
-        {
-          displayName: 'Email',
-          name: 'email',
-          required: true,
-        },
-        {
-          displayName: 'Given name',
-          name: 'given_name',
-          required: true,
-        },
-        {
-          displayName: 'Last name',
-          name: 'family_name',
-          required: true,
-        },
-      ]}
-    >
-      {children}
-    </NorthstarCognitoAuth>
-  ) : (
-    <></>
+const CognitoAuth: React.FC<PropsWithChildren> = ({ children }) => {
+  const { cognitoProps } = useRuntimeConfig();
+
+  if (!cognitoProps) {
+    return (
+      <Alert type="error" header="Runtime config configuration error">
+        The cognitoProps have not been configured in the runtime-config.json.
+      </Alert>
+    );
+  }
+
+  const cognitoAuthConfig: AuthProviderProps = {
+    authority: \`https://cognito-idp.\${cognitoProps.region}.amazonaws.com/\${cognitoProps.userPoolId}\`,
+    client_id: cognitoProps.userPoolWebClientId,
+    redirect_uri: window.location.origin,
+    response_type: 'code',
+    scope: 'email openid profile',
+  };
+
+  return (
+    <AuthProvider {...cognitoAuthConfig}>
+      <CognitoAuthInternal>{children}</CognitoAuthInternal>
+    </AuthProvider>
   );
 };
 
+const CognitoAuthInternal: React.FC<PropsWithChildren> = ({ children }) => {
+  const auth = useAuth();
+
+  useEffect(() => {
+    if (!auth.isAuthenticated && !auth.isLoading) {
+      auth.signinRedirect();
+    }
+  }, [auth]);
+
+  if (auth.isAuthenticated) {
+    return children;
+  } else if (auth.error) {
+    return (
+      <Alert type="error" header="Configuration error">
+        Error contacting Cognito. Please check your runtime-config.json is
+        configured with the correct endpoints.
+      </Alert>
+    );
+  } else {
+    return <Spinner />;
+  }
+};
+
 export default CognitoAuth;
 "
 `;
 
 exports[`cognito-auth generator > should generate files > identity-index 1`] = `
-"/*! Copyright [Amazon.com](http://amazon.com/), Inc. or its affiliates. All Rights Reserved.
-SPDX-License-Identifier: Apache-2.0 */
-export * from './user-identity.js';
-export * from './userpool-with-mfa.js';
+"export * from './user-identity.js';
+export * from './runtime-config.js';
 "
 `;
 
 exports[`cognito-auth generator > should generate files > user-identity 1`] = `
-"/*! Copyright [Amazon.com](http://amazon.com/), Inc. or its affiliates. All Rights Reserved.
-SPDX-License-Identifier: Apache-2.0 */
-import {
+"import {
   IdentityPool,
   UserPoolAuthenticationProvider,
 } from '@aws-cdk/aws-cognito-identitypool-alpha';
-import { CfnOutput, Stack } from 'aws-cdk-lib';
-import { UserPool, UserPoolClient } from 'aws-cdk-lib/aws-cognito';
+import { CfnOutput, Duration, Lazy, Stack } from 'aws-cdk-lib';
+import {
+  AccountRecovery,
+  CfnManagedLoginBranding,
+  CfnUserPoolDomain,
+  FeaturePlan,
+  Mfa,
+  OAuthScope,
+  UserPool,
+  UserPoolClient,
+} from 'aws-cdk-lib/aws-cognito';
 import { Construct } from 'constructs';
-import { UserPoolWithMfa } from './userpool-with-mfa.js';
-import { RuntimeConfig } from '../runtime-config/index.js';
+import { RuntimeConfig } from './runtime-config.js';
+import { Distribution } from 'aws-cdk-lib/aws-cloudfront';
 
 const WEB_CLIENT_ID = 'WebClient';
-
 /**
  * Creates a UserPool and Identity Pool with sane defaults configured intended for usage from a web client.
  */
 export class UserIdentity extends Construct {
+  public readonly region: string;
   public readonly identityPool: IdentityPool;
   public readonly userPool: UserPool;
   public readonly userPoolClient: UserPoolClient;
+  public readonly userPoolDomain: CfnUserPoolDomain;
 
   constructor(scope: Construct, id: string) {
     super(scope, id);
 
-    // Unless explicitly stated, created a default Cognito User Pool and Web Client.
-    this.userPool = new UserPoolWithMfa(this, 'UserPool');
-
-    this.identityPool = new IdentityPool(this, 'IdentityPool');
-
-    const existingClient = this.userPool.node.children.find(
-      (e) => e.node.id === WEB_CLIENT_ID && e instanceof UserPoolClient
-    ) as UserPoolClient | undefined;
-
-    this.userPoolClient =
-      existingClient ??
-      this.userPool.addClient(WEB_CLIENT_ID, {
-        authFlows: {
-          userPassword: true,
-          userSrp: true,
-        },
-      });
-
-    this.identityPool.addUserPoolAuthentication(
-      new UserPoolAuthenticationProvider({
-        userPool: this.userPool,
-        userPoolClient: this.userPoolClient,
-      })
+    this.region = Stack.of(this).region;
+    this.userPool = this.createUserPool();
+    this.userPoolDomain = this.createUserPoolDomain(this.userPool);
+    this.userPoolClient = this.createUserPoolClient(this.userPool);
+    this.identityPool = this.createIdentityPool(
+      this.userPool,
+      this.userPoolClient,
     );
+    this.createManagedLoginBranding(
+      this.userPool,
+      this.userPoolClient,
+      this.userPoolDomain,
+    );
+
+    RuntimeConfig.ensure(this).config.cognitoProps = {
+      region: Stack.of(this).region,
+      identityPoolId: this.identityPool.identityPoolId,
+      userPoolId: this.userPool.userPoolId,
+      userPoolWebClientId: this.userPoolClient.userPoolClientId,
+    };
 
     new CfnOutput(this, \`\${id}-UserPoolId\`, {
       value: this.userPool.userPoolId,
@@ -120,37 +133,10 @@ export class UserIdentity extends Construct {
     new CfnOutput(this, \`\${id}-IdentityPoolId\`, {
       value: this.identityPool.identityPoolId,
     });
-
-    RuntimeConfig.ensure(this).config.cognitoProps = {
-      region: Stack.of(this).region,
-      identityPoolId: this.identityPool.identityPoolId,
-      userPoolId: this.userPool?.userPoolId,
-      userPoolWebClientId: this.userPoolClient?.userPoolClientId,
-    };
   }
-}
-"
-`;
 
-exports[`cognito-auth generator > should generate files > userpool-with-mfa 1`] = `
-"/*! Copyright [Amazon.com](http://amazon.com/), Inc. or its affiliates. All Rights Reserved.
-SPDX-License-Identifier: Apache-2.0 */
-import { PDKNag } from '@aws/pdk/pdk-nag';
-import { Duration, Stack } from 'aws-cdk-lib';
-import {
-  AccountRecovery,
-  AdvancedSecurityMode,
-  Mfa,
-  UserPool,
-} from 'aws-cdk-lib/aws-cognito';
-import { Construct } from 'constructs';
-
-/**
- * Configures a UserPool with MFA across SMS/TOTP using sane defaults.
- */
-export class UserPoolWithMfa extends UserPool {
-  constructor(scope: Construct, id: string) {
-    super(scope, id, {
+  private createUserPool = () =>
+    new UserPool(this, 'UserPool', {
       deletionProtection: true,
       passwordPolicy: {
         minLength: 8,
@@ -161,9 +147,9 @@ export class UserPoolWithMfa extends UserPool {
         tempPasswordValidity: Duration.days(3),
       },
       mfa: Mfa.REQUIRED,
+      featurePlan: FeaturePlan.ESSENTIALS,
       mfaSecondFactor: { sms: true, otp: true },
       signInCaseSensitive: false,
-      advancedSecurityMode: AdvancedSecurityMode.ENFORCED,
       signInAliases: { username: true, email: true },
       accountRecovery: AccountRecovery.EMAIL_ONLY,
       selfSignUpEnabled: true,
@@ -183,25 +169,76 @@ export class UserPoolWithMfa extends UserPool {
       },
     });
 
-    const stack = Stack.of(this);
-
-    ['AwsSolutions-IAM5', 'AwsPrototyping-IAMNoWildcardPermissions'].forEach(
-      (RuleId) => {
-        PDKNag.addResourceSuppressionsByPathNoThrow(
-          stack,
-          \`\${PDKNag.getStackPrefix(stack)}\${id}/UserPool/smsRole/Resource\`,
-          [
-            {
-              id: RuleId,
-              reason:
-                'MFA requires sending a text to a users phone number which cannot be known at deployment time.',
-              appliesTo: ['Resource::*'],
-            },
-          ]
-        );
-      }
+  private createUserPoolDomain = (userPool: UserPool) =>
+    new CfnUserPoolDomain(this, 'UserPoolDomain', {
+      domain: \`test-\${Stack.of(this).account}\`,
+      userPoolId: userPool.userPoolId,
+      managedLoginVersion: 2,
+    });
+
+  private createUserPoolClient = (userPool: UserPool) => {
+    const lazilyComputedCallbackUrls = Lazy.list({
+      produce: () =>
+        [
+          'http://localhost:4200',
+          \`https://\${Stack.of(this).region}.console.aws.amazon.com\`,
+        ].concat(
+          this.findCloudFrontDistributions().map(
+            (d) => \`https://\${d.domainName}\`,
+          ),
+        ),
+    });
+
+    return userPool.addClient(WEB_CLIENT_ID, {
+      authFlows: {
+        userPassword: true,
+        userSrp: true,
+        user: true,
+      },
+      oAuth: {
+        flows: {
+          authorizationCodeGrant: true,
+        },
+        scopes: [OAuthScope.EMAIL, OAuthScope.OPENID, OAuthScope.PROFILE],
+        callbackUrls: lazilyComputedCallbackUrls,
+        logoutUrls: lazilyComputedCallbackUrls,
+      },
+      preventUserExistenceErrors: true,
+    });
+  };
+
+  private createIdentityPool = (
+    userPool: UserPool,
+    userPoolClient: UserPoolClient,
+  ) => {
+    const identityPool = new IdentityPool(this, 'IdentityPool');
+
+    identityPool.addUserPoolAuthentication(
+      new UserPoolAuthenticationProvider({
+        userPool,
+        userPoolClient,
+      }),
     );
-  }
+
+    return identityPool;
+  };
+
+  private createManagedLoginBranding = (
+    userPool: UserPool,
+    userPoolClient: UserPoolClient,
+    userPoolDomain: CfnUserPoolDomain,
+  ) => {
+    new CfnManagedLoginBranding(this, 'ManagedLoginBranding', {
+      userPoolId: userPool.userPoolId,
+      clientId: userPoolClient.userPoolClientId,
+      useCognitoProvidedValues: true,
+    }).node.addDependency(userPoolClient, userPool, userPoolDomain);
+  };
+
+  private findCloudFrontDistributions = (): Distribution[] =>
+    Stack.of(this)
+      .node.findAll()
+      .filter((child) => child instanceof Distribution);
 }
 "
 `;
@@ -228,6 +265,7 @@ export function App() {
 `;
 
 exports[`cognito-auth generator > should update shared constructs index.ts > common/constructs-index 1`] = `
-"export * from './identity/index.js';
-export * from './runtime-config/index.js';"
+"export * from './user-identity.js';
+export * from './runtime-config.js';
+"
 `;

package/src/cloudscape-website/cognito-auth/files/app/components/CognitoAuth/index.tsx.template

@@ -1,9 +1,7 @@
-/*! Copyright [Amazon.com](http://amazon.com/), Inc. or its affiliates. All Rights Reserved.
-SPDX-License-Identifier: Apache-2.0 */
-import { CognitoAuth as NorthstarCognitoAuth } from '@aws-northstar/ui';
-import React, { useContext } from 'react';
-import Config from '../../config';
-import { RuntimeConfigContext } from '../RuntimeConfig';
+import React, { PropsWithChildren, useEffect } from 'react';
+import { AuthProvider, AuthProviderProps, useAuth } from 'react-oidc-context';
+import { Alert, Spinner } from '@cloudscape-design/components';
+import { useRuntimeConfig } from '../../hooks/useRuntimeConfig';
 
 /**
  * Sets up the Cognito auth.
@@ -11,40 +9,56 @@ import { RuntimeConfigContext } from '../RuntimeConfig';
  * This assumes a runtime-config.json file is present at '/'. In order for Auth to be set up automatically,
  * the runtime-config.json must have the cognitoProps set.
  */
-const CognitoAuth: React.FC<any> = ({ children }) => {
-  const runtimeConfig = useContext(RuntimeConfigContext);
-
-  return runtimeConfig?.cognitoProps ? (
-    <NorthstarCognitoAuth
-      header={Config.applicationName}
-      userPoolId={runtimeConfig.cognitoProps.userPoolId}
-      clientId={runtimeConfig.cognitoProps.userPoolWebClientId}
-      region={runtimeConfig.cognitoProps.region}
-      identityPoolId={runtimeConfig.cognitoProps.identityPoolId}
-      <%if (allowSignup) {%>allowSignup={true}<% } %>
-      signUpAttributes={[
-        {
-          displayName: 'Email',
-          name: 'email',
-          required: true,
-        },
-        {
-          displayName: 'Given name',
-          name: 'given_name',
-          required: true,
-        },
-        {
-          displayName: 'Last name',
-          name: 'family_name',
-          required: true,
-        },
-      ]}
-    >
-      {children}
-    </NorthstarCognitoAuth>
-  ) : (
-    <></>
+const CognitoAuth: React.FC<PropsWithChildren> = ({ children }) => {
+  const { cognitoProps } = useRuntimeConfig();
+
+  if (!cognitoProps) {
+    return (
+      <Alert
+        type="error"
+        header="Runtime config configuration error"
+      >
+        The cognitoProps have not been configured in the runtime-config.json.
+      </Alert>
+    );
+  }
+
+  const cognitoAuthConfig: AuthProviderProps = {
+    authority: `https://cognito-idp.${cognitoProps.region}.amazonaws.com/${cognitoProps.userPoolId}`,
+    client_id: cognitoProps.userPoolWebClientId,
+    redirect_uri: window.location.origin,
+    response_type: 'code',
+    scope: 'email openid profile',
+  };
+
+  return (
+    <AuthProvider {...cognitoAuthConfig}>
+      <CognitoAuthInternal>{children}</CognitoAuthInternal>
+    </AuthProvider>
   );
 };
 
+const CognitoAuthInternal: React.FC<PropsWithChildren> = ({ children }) => {
+  const auth = useAuth();
+
+  useEffect(() => {
+    if (!auth.isAuthenticated && !auth.isLoading) {
+      auth.signinRedirect();
+    }
+  }, [auth])
+
+  if (auth.isAuthenticated) {
+    return children;
+  } else if (auth.error) {
+    return (
+      <Alert type="error" header="Configuration error">
+        Error contacting Cognito. Please check your runtime-config.json is
+        configured with the correct endpoints.
+      </Alert>
+    );
+  } else {
+    return <Spinner />;
+  }
+};
+
 export default CognitoAuth;

package/src/cloudscape-website/cognito-auth/files/common/constructs/src/core/user-identity.ts.template

@@ -0,0 +1,168 @@
+import {
+  IdentityPool,
+  UserPoolAuthenticationProvider,
+} from '@aws-cdk/aws-cognito-identitypool-alpha';
+import { CfnOutput, Duration, Lazy, Stack } from 'aws-cdk-lib';
+import {
+  AccountRecovery,
+  CfnManagedLoginBranding,
+  CfnUserPoolDomain,
+  FeaturePlan,
+  Mfa,
+  OAuthScope,
+  UserPool,
+  UserPoolClient,
+} from 'aws-cdk-lib/aws-cognito';
+import { Construct } from 'constructs';
+import { RuntimeConfig } from './runtime-config.js';
+import { Distribution } from 'aws-cdk-lib/aws-cloudfront';
+
+const WEB_CLIENT_ID = 'WebClient';
+/**
+ * Creates a UserPool and Identity Pool with sane defaults configured intended for usage from a web client.
+ */
+export class UserIdentity extends Construct {
+  public readonly region: string;
+  public readonly identityPool: IdentityPool;
+  public readonly userPool: UserPool;
+  public readonly userPoolClient: UserPoolClient;
+  public readonly userPoolDomain: CfnUserPoolDomain;
+
+  constructor(scope: Construct, id: string) {
+    super(scope, id);
+
+    this.region = Stack.of(this).region;
+    this.userPool = this.createUserPool();
+    this.userPoolDomain = this.createUserPoolDomain(this.userPool);
+    this.userPoolClient = this.createUserPoolClient(this.userPool);
+    this.identityPool = this.createIdentityPool(
+      this.userPool,
+      this.userPoolClient
+    );
+    this.createManagedLoginBranding(
+      this.userPool,
+      this.userPoolClient,
+      this.userPoolDomain
+    );
+
+    RuntimeConfig.ensure(this).config.cognitoProps = {
+      region: Stack.of(this).region,
+      identityPoolId: this.identityPool.identityPoolId,
+      userPoolId: this.userPool.userPoolId,
+      userPoolWebClientId: this.userPoolClient.userPoolClientId,
+    };
+
+    new CfnOutput(this, `${id}-UserPoolId`, {
+      value: this.userPool.userPoolId,
+    });
+
+    new CfnOutput(this, `${id}-IdentityPoolId`, {
+      value: this.identityPool.identityPoolId,
+    });
+  }
+
+  private createUserPool = () =>
+    new UserPool(this, 'UserPool', {
+      deletionProtection: true,
+      passwordPolicy: {
+        minLength: 8,
+        requireLowercase: true,
+        requireUppercase: true,
+        requireDigits: true,
+        requireSymbols: true,
+        tempPasswordValidity: Duration.days(3),
+      },
+      mfa: Mfa.REQUIRED,
+      featurePlan: FeaturePlan.ESSENTIALS,
+      mfaSecondFactor: { sms: true, otp: true },
+      signInCaseSensitive: false,
+      signInAliases: { username: true, email: true },
+      accountRecovery: AccountRecovery.EMAIL_ONLY,
+      selfSignUpEnabled: <%= allowSignup %>,
+      standardAttributes: {
+        phoneNumber: { required: false },
+        email: { required: true },
+        givenName: { required: true },
+        familyName: { required: true },
+      },
+      autoVerify: {
+        email: true,
+        phone: true,
+      },
+      keepOriginal: {
+        email: true,
+        phone: true,
+      },
+    });
+
+  private createUserPoolDomain = (userPool: UserPool) =>
+    new CfnUserPoolDomain(this, 'UserPoolDomain', {
+      domain: `<%= cognitoDomain %>-${Stack.of(this).account}`,
+      userPoolId: userPool.userPoolId,
+      managedLoginVersion: 2,
+    });
+
+  private createUserPoolClient = (userPool: UserPool) => {
+    const lazilyComputedCallbackUrls = Lazy.list({
+      produce: () =>
+        [
+          'http://localhost:4200',
+          `https://${Stack.of(this).region}.console.aws.amazon.com`,
+        ].concat(
+          this.findCloudFrontDistributions().map(
+            (d) => `https://${d.domainName}`
+          )
+        ),
+    });
+
+    return userPool.addClient(WEB_CLIENT_ID, {
+      authFlows: {
+        userPassword: true,
+        userSrp: true,
+        user: true,
+      },
+      oAuth: {
+        flows: {
+          authorizationCodeGrant: true,
+        },
+        scopes: [OAuthScope.EMAIL, OAuthScope.OPENID, OAuthScope.PROFILE],
+        callbackUrls: lazilyComputedCallbackUrls,
+        logoutUrls: lazilyComputedCallbackUrls,
+      },
+      preventUserExistenceErrors: true,
+    });
+  };
+
+  private createIdentityPool = (
+    userPool: UserPool,
+    userPoolClient: UserPoolClient
+  ) => {
+    const identityPool = new IdentityPool(this, 'IdentityPool');
+
+    identityPool.addUserPoolAuthentication(
+      new UserPoolAuthenticationProvider({
+        userPool,
+        userPoolClient,
+      })
+    );
+
+    return identityPool;
+  };
+
+  private createManagedLoginBranding = (
+    userPool: UserPool,
+    userPoolClient: UserPoolClient,
+    userPoolDomain: CfnUserPoolDomain
+  ) => {
+    new CfnManagedLoginBranding(this, 'ManagedLoginBranding', {
+      userPoolId: userPool.userPoolId,
+      clientId: userPoolClient.userPoolClientId,
+      useCognitoProvidedValues: true,
+    }).node.addDependency(userPoolClient, userPool, userPoolDomain);
+  };
+
+  private findCloudFrontDistributions = (): Distribution[] =>
+    Stack.of(this)
+      .node.findAll()
+      .filter((child) => child instanceof Distribution);
+}