[cdk-cloudfront-authorization] Missing S3 Example

[bencaldwell]

I would like to deploy a website in an s3 bucket that can only be accessed by authenticated users.

I think this is a pretty common pattern, and the cdk-cloudfront-authorization construct would appear to do what I need.

I am following the example at:
https://github.com/cloudcomponents/cdk-constructs/blob/master/examples/cloudfront-authorization-example/src/cloudfront-authorization-stack.ts

This example does not include the s3 origin. I have added some bits as below but I can access the website without authentication.

// Create a new S3 bucket
    const bucket = new s3.Bucket(this, 'MyBucket', {
      websiteIndexDocument: 'index.html',
      blockPublicAccess: s3.BlockPublicAccess.BLOCK_ALL,
      autoDeleteObjects: true,
      removalPolicy: cdk.RemovalPolicy.DESTROY, // Automatically delete the bucket when the stack is deleted
    });

    const userPool = new cognito.UserPool(this, 'UserPool', {
      selfSignUpEnabled: false,
      userPoolName: 'cloudfront-authorization-userpool',
    });

    userPool.addDomain('Domain', {
      cognitoDomain: {
        domainPrefix: 'mydomain',
      },
    });

    const authorization = new SpaAuthorization(this, 'Authorization', {
      userPool,
    });

    const originAccessIdentity = new cloudfront.OriginAccessIdentity(this, 'OriginAccessIdentity', {
      comment: `CloudFront OriginAccessIdentity for ${bucket.bucketName}`,
    });

    const s3Origin: cloudfront.IOrigin = new cloudfront_origin.S3Origin(bucket, {
      originAccessIdentity: originAccessIdentity,
    });

    const distribution = new SpaDistribution(this, 'Distribution', {
      authorization: authorization,
      defaultRootObject: 'index.html',
      origin: s3Origin
    });


    // Deploy the contents of the dist folder to the S3 bucket
    new s3deploy.BucketDeployment(this, 'DeployWebsite', {
      sources: [s3deploy.Source.asset('./my-site/dist')],
      destinationBucket: bucket,
    });

I have found the url for my cognito app client and can login there. But after I login I get a page with a cloudfront error:

503 ERROR
The request could not be satisfied.
The Lambda function associated with the CloudFront distribution is invalid or doesn't have the required permissions. We can't connect to the server for this app or website at this time. There might be too much traffic or a configuration error. Try again later, or contact the app or website owner.
If you provide content to customers through CloudFront, you can find steps to troubleshoot and help prevent this error by reviewing the CloudFront documentation.
Generated by cloudfront (CloudFront)
Request ID: p-pBQxsYTWNn8Hq687K1vfP9xv3FGxGtpS5W0-nY2xiIM5eIBNpseg==

I should mention I am running in ap-southeast-2 region.

Am I missing something here?

[elliotsegler]

Have you checked the logs for the lambda@edge functions to confirm they are functioning correctly?
I ran into similar issues with the generated edge configuration files not being valid.. (See #211 and #212)