Forem: Kihara, Takuya

Auth0 AWS Amplify Gen2: OIDC Authorization for AppSync via Identity Pool Federation

Kihara, Takuya — Fri, 20 Mar 2026 10:12:27 +0000

Introduction

AWS Amplify simplifies adding authentication using Amazon Cognito User Pool.

However, there are situations where you need to use a different IdP — for example, due to organizational policy or when integrating AWS Amplify into an existing system.

In such cases, instead of using federated sign-in through Amazon Cognito User Pool, you can adopt the external ID provider approach via Amazon Cognito Identity Pool.

For instance, if your service already uses Auth0 by Okta, you are likely using the Auth0 SDK for login and Auth0's Universal Login for the sign-in screen.
You can keep this setup while also accessing backend resources added through AWS Amplify (such as AWS AppSync and Amazon DynamoDB) using authenticated credentials.

This article provides a guide on integrating Auth0 with Cognito Identity Pool Federation so that you can use Auth0 for authentication in AWS Amplify while accessing Amplify Data (AWS AppSync / Amazon DynamoDB) through the Amplify libraries.

The Official Documentation Is Not Enough

AWS Amplify has documentation for integrating Auth0:

Advanced workflows - React - AWS Amplify Gen 2 Documentation

Learn more about advanced workflows in the Amplify auth category. This includes subscribing to events, identity pool federation, auth-related Lambda triggers and working with AWS service objects. AWS Amplify Documentation

docs.amplify.aws

However, the code examples alone are not sufficient to complete the implementation.

Required Information

Available in Official Documentation (with links or related info)

Identity Pool Federation
- Code is provided on the page, but there is no explanation of file placement or project structure.
Custom Token providers
- Code is provided on the page, but there is no explanation of file placement or project structure.
Configuring OIDC authorization for AppSync (Data)
- Customize your auth rules / Amplify Docs
- Use OpenID Connect as an authorization provider / Amplify Docs
- The configuration options are documented, but there are no cross-links between pages — the information is fragmented.
Auth0-side setup steps
- Integrate with Amazon Cognito / Auth0

Not in Official Documentation (no links or specific details)

How to integrate with @auth0/auth0-react
- Add Login to Your React Application / Auth0
Defining an OIDC provider in Amplify Gen2 (CDK)
- class OpenIdConnectProvider (construct) / AWS CDK
Environment variable management
- Environment variables can be used in backend.ts, but there is no documentation about this.

`credentialsProvider` and `tokenProvider`

credentialsProvider: Obtains temporary AWS credentials via Cognito Identity Pool (Identity Pool Federation)
tokenProvider: Passes the ID token for AppSync OIDC authorization (Custom Token providers)

Both must be passed to Amplify.configure.
The official documentation explains them in separate sections, but for an Auth0 + AppSync setup, both are required.
Specifically, you need to configure both in Amplify.configure as follows:

// Example Amplify.configure setup. Details described later.
Amplify.configure(outputs, {
  Auth: {
    credentialsProvider: customCredentialsProvider,
    tokenProvider: myTokenProvider,
  },
});

Defining the OIDC Provider in `backend.ts`

The steps for registering an OIDC provider are documented on the Auth0 side: Integrate with Amazon Cognito.

How to use an OIDC provider is covered in Use OpenID Connect as an authorization provider.

However, since AWS Amplify Gen2 is integrated with AWS CDK, it is more natural to manage resources as custom resources within the Amplify project.
This aspect is not covered in the official documentation.

Auth0 Domain Format Differences

Frontend (@auth0/auth0-react): dev-xxx.us.auth0.com (without https://)
Backend (IAM OIDC provider): https://dev-xxx.us.auth0.com (with https://)
Cognito Identity Pool Logins key: dev-xxx.us.auth0.com (without https://)

You need to clearly understand where to use the "URL" format versus the "domain" format.

Implementation Steps

Step 1: Auth0 Configuration

In Auth0 Dashboard → Applications → Applications, create an application (Single Page Application)
Note the following:
- Domain (e.g., dev-xxx.us.auth0.com)
- Client ID
Settings → Add http://localhost:5173 to Allowed Callback URLs
Settings → Add http://localhost:5173 to Allowed Logout URLs
Settings → Add http://localhost:5173 to Allowed Web Origins
Advanced Settings → OAuth → Verify that JSON Web Token (JWT) Signature Algorithm is RS256

Step 2: Amplify Project Setup

npm create amplify@latest
cd your-project
npm install @auth0/auth0-react @aws-sdk/client-cognito-identity

Step 3: Environment Variables

Create a .env file:

# Frontend (VITE_ prefix required for Vite)
VITE_AUTH0_DOMAIN=dev-xxx.us.auth0.com
VITE_AUTH0_CLIENT_ID=your-auth0-client-id

# Backend (used for OIDC provider creation, with https://)
AUTH0_DOMAIN=https://dev-xxx.us.auth0.com
AUTH0_CLIENT_ID=your-auth0-client-id

Note: VITE_AUTH0_DOMAIN does not include https://, while AUTH0_DOMAIN does.

Step 4: Amplify Backend Configuration

`amplify/auth/resource.ts`

When using Auth0 with Identity Pool Federation, you do not use externalProviders in defineAuth. Just define basic email authentication.

import { defineAuth } from "@aws-amplify/backend";

export const auth = defineAuth({
  loginWith: {
    email: true,
  },
});

`amplify/data/resource.ts`

Set the default authorization mode for AppSync to OIDC.

Note: Auth0 tokens do not include auth_time, so you must set tokenExpiryFromAuthInSeconds to 0 to skip AppSync's validation. Otherwise, you will get a 401 error.

import { type ClientSchema, a, defineData } from "@aws-amplify/backend";

const schema = a.schema({
  Todo: a
    .model({
      content: a.string(),
    })
    .authorization((allow) => [allow.owner("oidc").identityClaim("sub")]),
});

export type Schema = ClientSchema<typeof schema>;

export const data = defineData({
  schema,
  authorizationModes: {
    defaultAuthorizationMode: "oidc",
    oidcAuthorizationMode: {
      oidcProviderName: "Auth0",
      oidcIssuerUrl: "https://dev-xxx.us.auth0.com",
      clientId: "your-auth0-client-id",
      tokenExpiryFromAuthInSeconds: 0, // Auth0 tokens don't include auth_time, so set to 0 to skip AppSync validation.
      tokenExpireFromIssueInSeconds: 3600,
    },
  },
});

`amplify/backend.ts` (Critical part not in official documentation)

Create an IAM OIDC provider at the CDK level and associate it with the Identity Pool. Use the dotenv package to load environment variables from .env.

import { defineBackend } from "@aws-amplify/backend";
import { auth } from "./auth/resource";
import { data } from "./data/resource";
import * as iam from "aws-cdk-lib/aws-iam";
import { config } from "dotenv";

config();

const backend = defineBackend({
  auth,
  data,
});

const auth0Domain = process.env.AUTH0_DOMAIN;
const auth0ClientId = process.env.AUTH0_CLIENT_ID;

if (!auth0Domain || !auth0ClientId) {
  throw new Error(
    "AUTH0_DOMAIN and AUTH0_CLIENT_ID must be set in environment variables",
  );
}

// Create IAM OIDC provider
const oidcProvider = new iam.OpenIdConnectProvider(
  backend.auth.resources.cfnResources.cfnIdentityPool.stack,
  "Auth0OIDCProvider",
  {
    url: auth0Domain, // https://dev-xxx.us.auth0.com
    clientIds: [auth0ClientId],
  },
);

// Add Auth0 provider to Identity Pool
const identityPool = backend.auth.resources.cfnResources.cfnIdentityPool;

identityPool.openIdConnectProviderArns = [
  ...(identityPool.openIdConnectProviderArns || []),
  oidcProvider.openIdConnectProviderArn,
];

Key point: backend.auth.resources.cfnResources.cfnIdentityPool gives you direct access to the L1 construct of the Identity Pool created by Amplify. This is the Amplify Gen2 escape hatch feature.

Step 5: Custom Credentials Provider (Frontend)

Create src/CustomCredentialsProvider.ts. This extends the official documentation sample and configures both tokenProvider and credentialsProvider together.

import { Amplify } from "aws-amplify";
import {
  CredentialsAndIdentityIdProvider,
  CredentialsAndIdentityId,
  GetCredentialsOptions,
  TokenProvider,
  decodeJWT,
} from "aws-amplify/auth";
import { CognitoIdentity } from "@aws-sdk/client-cognito-identity";
import outputs from "../amplify_outputs.json";

const cognitoidentity = new CognitoIdentity({
  region: outputs.auth.aws_region,
});

class CustomCredentialsProvider implements CredentialsAndIdentityIdProvider {
  federatedLogin?: {
    domain: string;
    token: string;
  };

  loadFederatedLogin(login?: typeof this.federatedLogin) {
    this.federatedLogin = login;
  }

  async getCredentialsAndIdentityId(
    _getCredentialsOptions: GetCredentialsOptions,
  ): Promise<CredentialsAndIdentityId | undefined> {
    try {
      if (!this.federatedLogin) {
        return undefined;
      }

      const getIdResult = await cognitoidentity.getId({
        IdentityPoolId: outputs.auth.identity_pool_id,
        Logins: { [this.federatedLogin.domain]: this.federatedLogin.token },
      });

      if (!getIdResult.IdentityId) {
        throw new Error("Failed to get Identity ID");
      }

      const cognitoCredentialsResult =
        await cognitoidentity.getCredentialsForIdentity({
          IdentityId: getIdResult.IdentityId,
          Logins: { [this.federatedLogin.domain]: this.federatedLogin.token },
        });

      if (!cognitoCredentialsResult.Credentials) {
        throw new Error("Failed to get credentials");
      }

      return {
        credentials: {
          accessKeyId: cognitoCredentialsResult.Credentials.AccessKeyId!,
          secretAccessKey: cognitoCredentialsResult.Credentials.SecretKey!,
          sessionToken: cognitoCredentialsResult.Credentials.SessionToken,
          expiration: cognitoCredentialsResult.Credentials.Expiration,
        },
        identityId: getIdResult.IdentityId,
      };
    } catch (e) {
      console.log("Error getting credentials: ", e);
      return undefined;
    }
  }

  clearCredentialsAndIdentityId(): void {
    this.federatedLogin = undefined;
  }
}

// Custom token provider for AppSync OIDC authorization
// Note: The official docs explain credentialsProvider and tokenProvider in separate sections,
//       but both are required for Auth0 + AppSync setups.
const myTokenProvider: TokenProvider = {
  async getTokens() {
    const tokenString = sessionStorage.getItem("auth0_id_token");
    if (!tokenString) {
      return null;
    }
    return {
      accessToken: decodeJWT(tokenString),
      idToken: decodeJWT(tokenString),
    };
  },
};

const customCredentialsProvider = new CustomCredentialsProvider();

// Configure both credentialsProvider and tokenProvider
Amplify.configure(outputs, {
  Auth: {
    credentialsProvider: customCredentialsProvider,
    tokenProvider: myTokenProvider,
  },
});

export default customCredentialsProvider;

Important points not in official documentation:

tokenProvider is required for AppSync OIDC authorization. credentialsProvider alone does not pass tokens to AppSync.
The ID token is stored in sessionStorage and referenced by tokenProvider.
Both accessToken and idToken are set to Auth0's ID token (because Auth0's SPA flow may not issue the access token in JWT format).

Step 6: Auth0 React SDK Integration

`src/main.tsx`

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.tsx";
import "./CustomCredentialsProvider"; // Import first to execute Amplify.configure

import { Auth0Provider } from "@auth0/auth0-react";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <Auth0Provider
      domain={import.meta.env.VITE_AUTH0_DOMAIN}
      clientId={import.meta.env.VITE_AUTH0_CLIENT_ID}
      authorizationParams={{
        redirect_uri: window.location.origin,
      }}
    >
      <App />
    </Auth0Provider>
  </React.StrictMode>
);

Note: Import "./CustomCredentialsProvider" before App so that Amplify.configure runs first.

`src/App.tsx` (Token handoff after Auth0 login)

import { useAuth0 } from "@auth0/auth0-react";
import { useEffect, useState } from "react";
import customCredentialsProvider from "./CustomCredentialsProvider";

function App() {
  const { isAuthenticated, getIdTokenClaims } = useAuth0();
  const [isTokenReady, setIsTokenReady] = useState(false);

  useEffect(() => {
    const loadCredentials = async () => {
      if (isAuthenticated) {
        const tokenClaims = await getIdTokenClaims();
        if (tokenClaims?.__raw) {
          // Pass Auth0 ID token to custom provider
          customCredentialsProvider.loadFederatedLogin({
            domain: import.meta.env.VITE_AUTH0_DOMAIN,
            token: tokenClaims.__raw,
          });
          // Also store in sessionStorage for AppSync OIDC
          sessionStorage.setItem("auth0_id_token", tokenClaims.__raw);
          setIsTokenReady(true);
        }
      } else {
        setIsTokenReady(false);
        customCredentialsProvider.clearCredentialsAndIdentityId();
        sessionStorage.removeItem("auth0_id_token");
      }
    };
    loadCredentials();
  }, [isAuthenticated, getIdTokenClaims]);

  // Execute AppSync queries only after isTokenReady is true
  // ...
}

Important points not in official documentation:

Use getIdTokenClaims().__raw to get the JWT string (the __raw property is not explicitly documented)
Pass the frontend domain (without https://) to loadFederatedLogin's domain
Use the isTokenReady state to control the timing of AppSync query execution

Step 7: Executing AppSync Queries

import { generateClient } from "aws-amplify/api";
import type { Schema } from "../amplify/data/resource";

const client = generateClient<Schema>();

// Explicitly specify authMode: "oidc"
const { data } = await client.models.Todo.list({ authMode: "oidc" });

// Real-time subscriptions work the same way
client.models.Todo.observeQuery({ authMode: "oidc" }).subscribe({
  next: (data) => console.log(data.items),
});

Step 8: Deployment

# Sandbox environment
npx ampx sandbox

# Production deployment (set environment variables in the console when using Amplify Hosting)

When using Amplify Hosting, set AUTH0_DOMAIN and AUTH0_CLIENT_ID as environment variables in the Amplify console. Variables with the VITE_ prefix are embedded at build time, so they also need to be set as build environment variables.

Troubleshooting

`Invalid login token` Error

Verify that Auth0's JWT signature algorithm is RS256
Check that the Logins key domain format is correct (with or without https://)
Confirm that the Auth0 Client ID matches the IAM OIDC provider's Audience

`No credentials` / `undefined credentials`

Make sure loadFederatedLogin is called before executing AppSync queries
Use the isTokenReady state to control timing

`Unauthorized` Error in AppSync

Verify that tokenProvider is configured (credentialsProvider alone is not enough)
Check that oidcIssuerUrl in data/resource.ts matches the Auth0 domain
Explicitly specify authMode: "oidc" in queries

`NotAuthorizedException` in Identity Pool

Verify that the IAM OIDC provider URL and Audience are correct
Confirm that Auth0 is included in the Identity Pool's authentication provider settings

Summary

The official documentation only explains the general approach of "creating a custom credentials provider and passing Auth0 tokens." To actually get it working, the following additional steps are required:

CDK-level OIDC provider definition (backend.ts)
tokenProvider implementation (required for AppSync OIDC authorization)
Auth0 React SDK integration code (token retrieval and handoff from the useAuth0 hook)
Domain format differences for environment variables (with or without https://)
Token readiness timing management (isTokenReady pattern)

Applying to Other OIDC Providers

This article uses Auth0 as an example, but this Identity Pool Federation pattern can be applied to any OIDC-compliant provider. For providers that issue ID tokens (JWT/RS256) — such as Okta, Google Workspace, Microsoft Entra ID (formerly Azure AD), or Keycloak — you only need to replace the following:

Frontend authentication SDK (e.g., @okta/okta-react, @azure/msal-react, etc.)
The domain passed to loadFederatedLogin (the provider's issuer URL)
The IAM OIDC provider URL in backend.ts
oidcIssuerUrl and clientId in data/resource.ts

The custom credentialsProvider / tokenProvider implementation pattern and CDK Identity Pool configuration can be reused as-is.

Reference Documentation

#	Document	URL	Purpose
1	Amplify - Identity Pool Federation	https://docs.amplify.aws/react/build-a-backend/auth/advanced-workflows/#identity-pool-federation-3	Custom credentials provider implementation pattern
2	Amplify - Federate with Auth0	https://docs.amplify.aws/react/build-a-backend/auth/advanced-workflows/#federate-with-auth0	Auth0 integration overview (limited information)
3	Amplify - Custom Token providers	https://docs.amplify.aws/react/build-a-backend/auth/advanced-workflows/#custom-token-providers	Token provider for AppSync OIDC authorization
4	Amplify - Customize your auth rules	https://docs.amplify.aws/react/build-a-backend/data/customize-authz/	AppSync authorization rules
5	Amplify - Use OpenID Connect as an authorization provider	https://docs.amplify.aws/react/build-a-backend/data/customize-authz/using-oidc-authorization-provider/	AppSync OIDC authorization configuration
6	Auth0 - Integrate with Amazon Cognito	https://auth0.com/docs/customize/integrations/aws/amazon-cognito	Auth0-side setup (IAM OIDC provider creation, etc.)
7	Auth0 React SDK	https://auth0.com/docs/quickstart/spa/react	`@auth0/auth0-react` setup
8	AWS - Open ID Connect providers (Identity Pools)	https://docs.aws.amazon.com/cognito/latest/developerguide/open-id.html	OIDC integration with Cognito Identity Pool

Building an A/B Testing System with CloudFront Functions using AWS CDK

Kihara, Takuya — Sun, 21 Dec 2025 14:46:04 +0000

Prerequisites

Why This is Needed

Amazon CloudFront + Amazon S3 is an essential configuration for delivering frontend content on AWS.
Additionally, A/B testing is an indispensable method for improving web services.

However, implementing A/B testing with traditional configurations requires implementation in frontend code or APIs.
This adds complexity to application logic since it requires modifications to the application layer.

In April 2025, there was an update that enabled origin switching with CloudFront Functions.

docs.aws.amazon.com

This time, we'll explore how to easily implement A/B testing by switching between S3 buckets using the selectRequestOriginById() method in CloudFront Functions.

Benefits of Using CloudFront Functions

High-speed processing at the edge: Instant decisions at locations closest to users
Simple implementation: Concise JavaScript code that's easy to deploy
Infrastructure separation: Separates application code from A/B testing logic, improving maintainability

This approach enables efficient A/B testing without sacrificing performance.

Required Knowledge

Basic understanding of AWS CDK (Cloud Development Kit)
Basic knowledge of TypeScript/JavaScript
Basic concepts of AWS CloudFront and S3
Understanding of A/B testing concepts

Required Environment

Node.js (v18 or higher recommended)
AWS CLI configured
AWS CDK CLI (npm install -g aws-cdk)
TypeScript environment

AWS Services Used

Amazon S3: Static website hosting (two buckets)
Amazon CloudFront: CDN distribution and A/B testing logic
CloudFront Function: Request routing control
Origin Access Control (OAC): Secure access control to S3 buckets

Setup

1. Project Initialization

# Create CDK project
mkdir cloudfront-ab-testing
cd cloudfront-ab-testing
cdk init app --language typescript

2. Project Structure Setup

cloudfront-ab-testing/
├── lib/
│   ├── cloudfront-ab-testing.ts      # Main stack
│   └── ab-test-function.js           # CloudFront Function
├── assets/
│   ├── site-a/
│   │   └── index.html               # Variant A
│   └── site-b/
│       └── index.html               # Variant B
└── package.json

Implementation Steps

1. CloudFront Function Implementation

Create a CloudFront Function that handles A/B testing logic:

// lib/ab-test-function.js
import cf from 'cloudfront';

function handler(event) {
    var request = event.request;
    var headers = request.headers;

    // Check X-AB-Test header
    if (headers['x-ab-test'] && headers['x-ab-test'].value === 'variant-b') {
        // Select Origin B
        cf.selectRequestOriginById('BUCKET_B_ORIGIN_ID');
    } else {
        // Select Origin A by default (variant-a or no header)
        cf.selectRequestOriginById('BUCKET_A_ORIGIN_ID');
    }

    return request;
}

2. S3 Bucket Creation

Create two S3 buckets to host different content:

// S3 Bucket A (for variant-a)
const bucketA = new s3.Bucket(this, 'BucketA', {
  removalPolicy: cdk.RemovalPolicy.DESTROY,
  autoDeleteObjects: true,
});

// S3 Bucket B (for variant-b)
const bucketB = new s3.Bucket(this, 'BucketB', {
  removalPolicy: cdk.RemovalPolicy.DESTROY,
  autoDeleteObjects: true,
});

3. Origin Access Control (OAC) Configuration

Configure OAC to ensure secure access to S3 buckets:

const originAccessControl = new cloudfront.CfnOriginAccessControl(this, 'OriginAccessControl', {
  originAccessControlConfig: {
    name: 'ABTestOAC',
    originAccessControlOriginType: 's3',
    signingBehavior: 'always',
    signingProtocol: 'sigv4',
    description: 'OAC for A/B testing CloudFront distribution',
  },
});

4. Custom Cache Policy Creation

Create a custom policy that includes A/B test headers in the cache key:

const customCachePolicy = new cloudfront.CfnCachePolicy(this, 'ABTestCachePolicy', {
  cachePolicyConfig: {
    name: 'ABTestCachePolicy',
    comment: 'Cache policy that includes x-ab-test header as cache key',
    defaultTtl: 86400, // 1 day
    maxTtl: 31536000, // 1 year
    minTtl: 0,
    parametersInCacheKeyAndForwardedToOrigin: {
      enableAcceptEncodingGzip: true,
      enableAcceptEncodingBrotli: true,
      headersConfig: {
        headerBehavior: 'whitelist',
        headers: ['x-ab-test'],
      },
      queryStringsConfig: {
        queryStringBehavior: 'none',
      },
      cookiesConfig: {
        cookieBehavior: 'none',
      },
    },
  },
});

5. CloudFront Distribution Configuration

Configure distribution with multiple origins and CloudFront Function:

const distribution = new cloudfront.CfnDistribution(this, 'CloudFrontDistribution', {
  distributionConfig: {
    enabled: true,
    priceClass: 'PriceClass_100',
    origins: [
      {
        id: bucketAOriginId,
        domainName: bucketA.bucketDomainName,
        s3OriginConfig: {
          originAccessIdentity: '',
        },
        originAccessControlId: originAccessControl.attrId,
      },
      {
        id: bucketBOriginId,
        domainName: bucketB.bucketDomainName,
        s3OriginConfig: {
          originAccessIdentity: '',
        },
        originAccessControlId: originAccessControl.attrId,
      },
    ],
    defaultCacheBehavior: {
      targetOriginId: bucketAOriginId,
      viewerProtocolPolicy: 'redirect-to-https',
      cachePolicyId: customCachePolicy.ref,
      compress: true,
      functionAssociations: [
        {
          eventType: 'viewer-request',
          functionArn: abTestFunction.functionArn,
        },
      ],
    },
  },
});

6. S3 Bucket Policy Configuration

Configure access permissions from CloudFront using OAC:

const bucketAPolicyStatement = new iam.PolicyStatement({
  actions: ['s3:GetObject'],
  resources: [bucketA.arnForObjects('*')],
  principals: [new iam.ServicePrincipal('cloudfront.amazonaws.com')],
  conditions: {
    StringEquals: {
      'AWS:SourceArn': `arn:aws:cloudfront::${this.account}:distribution/${distribution.ref}`,
    },
  },
});

bucketA.addToResourcePolicy(bucketAPolicyStatement);

7. Content Deployment

Deploy static files to S3 buckets:

// Upload Site A files to BucketA
new s3deploy.BucketDeployment(this, 'DeploySiteA', {
  sources: [s3deploy.Source.asset('./assets/site-a')],
  destinationBucket: bucketA,
});

// Upload Site B files to BucketB
new s3deploy.BucketDeployment(this, 'DeploySiteB', {
  sources: [s3deploy.Source.asset('./assets/site-b')],
  destinationBucket: bucketB,
});

8. Complete Stack Implementation

The complete main stack implementation, integrating all the previous steps, is as follows:

import * as cdk from 'aws-cdk-lib/core';
import * as s3 from 'aws-cdk-lib/aws-s3';
import * as s3deploy from 'aws-cdk-lib/aws-s3-deployment';
import * as cloudfront from 'aws-cdk-lib/aws-cloudfront';
import * as iam from 'aws-cdk-lib/aws-iam';
import { Construct } from 'constructs';
import * as fs from 'fs';
import * as path from 'path';

export class CloudfrontAbTestingStack extends cdk.Stack {
  constructor(scope: Construct, id: string, props?: cdk.StackProps) {
    super(scope, id, props);

    // S3 Bucket A (for variant-a)
    const bucketA = new s3.Bucket(this, 'BucketA', {
      removalPolicy: cdk.RemovalPolicy.DESTROY,
      autoDeleteObjects: true,
    });

    // S3 Bucket B (for variant-b)
    const bucketB = new s3.Bucket(this, 'BucketB', {
      removalPolicy: cdk.RemovalPolicy.DESTROY,
      autoDeleteObjects: true,
    });

    // Origin Access Control (OAC) - New recommended approach
    const originAccessControl = new cloudfront.CfnOriginAccessControl(this, 'OriginAccessControl', {
      originAccessControlConfig: {
        name: 'ABTestOAC',
        originAccessControlOriginType: 's3',
        signingBehavior: 'always',
        signingProtocol: 'sigv4',
        description: 'OAC for A/B testing CloudFront distribution',
      },
    });

    // Define Origin IDs as constants
    const bucketAOriginId = 'BucketAOrigin';
    const bucketBOriginId = 'BucketBOrigin';

    // CloudFront Function for A/B testing
    // Load Function code from external file
    const functionCodePath = path.join(__dirname, 'ab-test-function.js');
    let functionCode = fs.readFileSync(functionCodePath, 'utf8');

    // Replace placeholders with actual values
    functionCode = functionCode
      .replaceAll('BUCKET_A_ORIGIN_ID', bucketAOriginId)
      .replaceAll('BUCKET_B_ORIGIN_ID', bucketBOriginId);

    const abTestFunction = new cloudfront.Function(this, 'ABTestFunction', {
      code: cloudfront.FunctionCode.fromInline(functionCode),
      comment: 'A/B testing function to route requests based on X-AB-Test header',
      runtime: cloudfront.FunctionRuntime.JS_2_0, // Specify JavaScript Runtime 2.0
    });

    // Custom cache policy (include x-ab-test header in cache key)
    const customCachePolicy = new cloudfront.CfnCachePolicy(this, 'ABTestCachePolicy', {
      cachePolicyConfig: {
        name: 'ABTestCachePolicy',
        comment: 'Cache policy that includes x-ab-test header as cache key',
        defaultTtl: 86400, // 1 day
        maxTtl: 31536000, // 1 year
        minTtl: 0,
        parametersInCacheKeyAndForwardedToOrigin: {
          enableAcceptEncodingGzip: true,
          enableAcceptEncodingBrotli: true,
          headersConfig: {
            headerBehavior: 'whitelist',
            headers: ['x-ab-test'],
          },
          queryStringsConfig: {
            queryStringBehavior: 'none',
          },
          cookiesConfig: {
            cookieBehavior: 'none',
          },
        },
      },
    });

    // CloudFront Distribution (using low-level API for precise control)
    const distribution = new cloudfront.CfnDistribution(this, 'CloudFrontDistribution', {
      distributionConfig: {
        enabled: true,
        priceClass: 'PriceClass_100',
        origins: [
          {
            id: bucketAOriginId,
            domainName: bucketA.bucketDomainName,
            s3OriginConfig: {
              originAccessIdentity: '', // Empty string when using OAC
            },
            originAccessControlId: originAccessControl.attrId,
          },
          {
            id: bucketBOriginId,
            domainName: bucketB.bucketDomainName,
            s3OriginConfig: {
              originAccessIdentity: '', // Empty string when using OAC
            },
            originAccessControlId: originAccessControl.attrId,
          },
        ],
        defaultCacheBehavior: {
          targetOriginId: bucketAOriginId,
          viewerProtocolPolicy: 'redirect-to-https',
          cachePolicyId: customCachePolicy.ref, // Use custom cache policy
          compress: true,
          functionAssociations: [
            {
              eventType: 'viewer-request',
              functionArn: abTestFunction.functionArn,
            },
          ],
        },
      },
    });

    // Bucket A policy (for OAC) - Set after Distribution creation
    const bucketAPolicyStatement = new iam.PolicyStatement({
      actions: ['s3:GetObject'],
      resources: [bucketA.arnForObjects('*')],
      principals: [new iam.ServicePrincipal('cloudfront.amazonaws.com')],
      conditions: {
        StringEquals: {
          'AWS:SourceArn': `arn:aws:cloudfront::${this.account}:distribution/${distribution.ref}`,
        },
      },
    });

    bucketA.addToResourcePolicy(bucketAPolicyStatement);

    // Bucket B policy (for OAC) - Set after Distribution creation
    const bucketBPolicyStatement = new iam.PolicyStatement({
      actions: ['s3:GetObject'],
      resources: [bucketB.arnForObjects('*')],
      principals: [new iam.ServicePrincipal('cloudfront.amazonaws.com')],
      conditions: {
        StringEquals: {
          'AWS:SourceArn': `arn:aws:cloudfront::${this.account}:distribution/${distribution.ref}`,
        },
      },
    });

    bucketB.addToResourcePolicy(bucketBPolicyStatement);

    // Deploy HTML files to S3 buckets
    // Upload Site A files to BucketA
    new s3deploy.BucketDeployment(this, 'DeploySiteA', {
      sources: [s3deploy.Source.asset('./assets/site-a')],
      destinationBucket: bucketA,
    });

    // Upload Site B files to BucketB
    new s3deploy.BucketDeployment(this, 'DeploySiteB', {
      sources: [s3deploy.Source.asset('./assets/site-b')],
      destinationBucket: bucketB,
    });

    // Stack outputs
    new cdk.CfnOutput(this, 'CloudFrontDomainName', {
      value: distribution.attrDomainName,
      description: 'CloudFront Distribution domain name',
    });

    new cdk.CfnOutput(this, 'BucketAName', {
      value: bucketA.bucketName,
      description: 'S3 Bucket A name',
    });

    new cdk.CfnOutput(this, 'BucketBName', {
      value: bucketB.bucketName,
      description: 'S3 Bucket B name',
    });

    new cdk.CfnOutput(this, 'ABTestHeaderExample', {
      value: 'X-AB-Test: variant-a or X-AB-Test: variant-b',
      description: 'A/B test header usage examples',
    });
  }
}

Full sample project is below:

tacck / cloudfront-ab-testing

Check A/B testing on CloudFront

Welcome to your CDK TypeScript project

This is a blank project for CDK development with TypeScript.

The cdk.json file tells the CDK Toolkit how to execute your app.

Useful commands

npm run build compile typescript to js
npm run watch watch for changes and compile
npm run test perform the jest unit tests
npx cdk deploy deploy this stack to your default AWS account/region
npx cdk diff compare deployed stack with current state
npx cdk synth emits the synthesized CloudFormation template

Permison Boundly

Bootstraping

cdk bootstrap --custom-permissions-boundary builder-permissions-boundary

https://dev.classmethod.jp/articles/cdk-minimum-deploy-policy/

Check

curl -i  https://[YOUR_CLOUDFRONT_SITE]/index.html
curl -i -H 'x-ab-test: variant-a' https://[YOUR_CLOUDFRONT_SITE]/index.html

curl -i -H 'x-ab-test: variant-b' https://[YOUR_CLOUDFRONT_SITE]/index.html

View on GitHub

9. Deployment and Testing

# Deploy CDK stack
cdk deploy

# Test A/B functionality
# Default (Variant A)
curl -i https://[YOUR_CLOUDFRONT_DOMAIN]/index.html

# Variant A (explicit specification)
curl -i -H 'X-AB-Test: variant-a' https://[YOUR_CLOUDFRONT_DOMAIN]/index.html

# Variant B
curl -i -H 'X-AB-Test: variant-b' https://[YOUR_CLOUDFRONT_DOMAIN]/index.html

Summary

This A/B testing system combines the following technical elements:

Key Features

CloudFront Function: Dynamic origin selection based on request headers
Origin Access Control (OAC): Latest security best practices
Custom Cache Policy: Cache strategy considering A/B test headers
Infrastructure as Code: Reproducible infrastructure construction with CDK

Benefits

Low Latency: CloudFront Functions execute at the edge for high speed
Cost Efficiency: 1 million executions free, then $0.10 USD per million executions
Scalable: Leverages CloudFront's global network
Secure: Proper access control with OAC

Application Possibilities

Regional content distribution
Device-specific optimization
Gradual feature releases (canary deployment)
Query parameter-based A/B testing
Personalization

This system can serve as a foundation for implementing more complex A/B testing and traffic distribution logic.
Using CDK makes infrastructure changes easy to manage, enabling continuous improvement and testing.

Recheck the differences between AWS Amplify Hosting and Amazon S3 + Amazon CloudFront

Kihara, Takuya — Sun, 20 Jul 2025 16:19:37 +0000

Japanese version of this article is below.
https://zenn.dev/tacck/articles/20250720_recheck_the_differences_amplify_s3_cf

Table Of Contents

1. Introduction
2. Feature Comparison Table
- 2.1. Differences in Infrastructure Setup Procedures
- 2.2. Deployment Procedure Comparison
- 2.3. Automation Level
- 2.4. Pricing Differences (Estimates)
3. Use Cases
- 3.1. When Amazon S3 + Amazon CloudFront is Suitable
- 3.2. When AWS Amplify + Amazon S3 is Suitable
- 3.3. When AWS Amplify + GitHub is Suitable
4. Summary
5. Reference: Operational Flow Assumptions
- 5.1. Role Definitions
- 5.2. (A) Amazon S3 + Amazon CloudFront Sequence Diagram
- 5.3. (B) AWS Amplify + Amazon S3 Sequence Diagram
- 5.4. (C) AWS Amplify + GitHub Sequence Diagram

1. Introduction

For static site hosting on AWS, you can use not only the traditional combination of Amazon S3 + Amazon CloudFront, but also the Hosting feature of AWS Amplify.

AWS Amplify Hosting provides automated deployment workflows through integration with GitHub.

Additionally, since October 2024, it has become possible to integrate directly from Amazon S3 to AWS Amplify Hosting functionality.

In other words, there are three options:

Amazon S3 + Amazon CloudFront
AWS Amplify Hosting (with Amazon S3 integration)
AWS Amplify Hosting (with GitHub integration)

This article compares these three approaches and explains the benefits of using AWS Amplify.

2. Feature Comparison Table

Item	Amazon S3 + Amazon CloudFront	AWS Amplify + Amazon S3	AWS Amplify + GitHub
File Upload	Upload to Amazon S3	Upload to Amazon S3	Git Push
Deploy Trigger	None (cache invalidation serves as update trigger)	Manual	Automatic (Unified Webhooks via Git Push)
Cache Update	Manual execution	Automatic execution	Automatic execution
Preview Environment	Requires separate infrastructure setup	Manual environment addition	Automatic generation based on branches
Basic Authentication	Implementation with Lambda@Edge	Console configuration	Console configuration
Monitoring & Logs	Individual service monitoring	Integrated dashboard	Integrated dashboard
*Build Process ()**	Manual execution then upload	Manual execution then upload	Automatic execution after upload
Rollback	Manual file restoration	Apply previous deployment result	Apply previous deployment result

(*) Build Process: Process of generating files as a static site using libraries and frameworks like Next.js.

2.1. Differences in Infrastructure Setup Procedures

Method	Main Tasks
Amazon S3 + Amazon CloudFront	Amazon S3 Bucket preparation (Bucket creation, Bucket policy configuration), Amazon CloudFront preparation (Origin access control configuration, distribution creation)
AWS Amplify + Amazon S3	Amazon S3 Bucket creation, AWS Amplify project preparation
AWS Amplify + GitHub	AWS Amplify project preparation, GitHub Repository preparation

2.2. Deployment Procedure Comparison

Method	Main Tasks
Amazon S3 + Amazon CloudFront	File preparation -> Amazon S3 upload -> Amazon CloudFront cache invalidation (no clear deployment trigger)
AWS Amplify + Amazon S3	File preparation -> Amazon S3 upload -> AWS Amplify deployment
AWS Amplify + GitHub	Git push only

2.3. Automation Level

Method	Automation Level	Description
Amazon S3 + Amazon CloudFront	Manual	All tasks executed manually
AWS Amplify + Amazon S3	Semi-automatic	Deploy trigger is manual, subsequent processes are automatic
AWS Amplify + GitHub	Fully automatic	Fully automated from Git push to publication

2.4. Pricing Differences (Estimates)

Amazon CloudFront Data Transfer Pricing (Tokyo Region)

Data Transfer Volume	Price (USD/GB)
First 1TB	Free
Next 9TB (1TB-10TB)	$0.114

AWS Amplify Hosting Data Transfer Pricing

Data Transfer Volume	Price (USD/GB)
First 15GB	Free
Over 15GB	$0.15

Pricing Comparison Scenarios (Tokyo Region)

Monthly Data Transfer	Amazon CloudFront (Tokyo)	AWS Amplify Hosting	Difference
15GB	$0.00	$0.00	$0
100GB	$0.00	$12.75	+$12.75
500GB	$0.00	$72.75	+$72.75
1TB	$0.00	$151.35	+$151.35
9TB	$933.888	$1380.15	+$446.262
10TB	$1025.024	$1,507.50	+$508.726

3. Use Cases

3.1. When Amazon S3 + Amazon CloudFront is Suitable

Advanced customization or fine-grained control is required
- Complex caching strategies or distribution rules are needed
- Integration with existing CI/CD pipelines is required
Cost optimization is prioritized (high-traffic site operations)

3.2. When AWS Amplify + Amazon S3 is Suitable

Want to continue file-based direct management
- File upload personnel cannot use Git but have access to Amazon S3, etc.
Amazon CloudFront customization is not required
Want to utilize AWS Amplify Hosting features (Basic authentication, simplified preview environment setup, etc.)
Site access is limited

3.3. When AWS Amplify + GitHub is Suitable

Emphasize collaboration in team development
- Automatic deployment via Git integration is required
- Preview environments and branch deployments are needed
Prioritize rapid development and deployment
The development team has limited AWS operational experience
Want to adopt modern development workflows
Site access is limited
May use AWS Amplify Backend features in the future

4. Summary

AWS Amplify Hosting significantly improves developer productivity through simplified setup, automated deployment processes, and integrated operational management compared to the traditional Amazon S3 + Amazon CloudFront combination. On the other hand, Amazon S3 + Amazon CloudFront allows for advanced customization and can handle complex requirements. It is essential to select the optimal option based on project requirements and the development team's circumstances.

5. Reference: Operational Flow Assumptions

5.1. Role Definitions

HTML Coder

Creation and editing of static site HTML, CSS, JavaScript files
Testing and verification in the local environment
Pattern (C): Code management and push to Git repository

Site Administrator

Site construction and operation
- Infrastructure construction and monitoring
- Build configuration management
- Pattern (C): Branch management and deployment approval (as needed)
Coordination with publication requesters
Task assignment to HTML coders and progress management

Content Publication Requester

Site update requests and approvals
Content provision and confirmation
Publication schedule decisions

5.2. (A) Amazon S3 + Amazon CloudFront Sequence Diagram

5.3. (B) AWS Amplify + Amazon S3 Sequence Diagram

5.4. (C) AWS Amplify + GitHub Sequence Diagram

Create a new game in the "Vibe Coding" style with Amazon Q CLI

Kihara, Takuya — Thu, 29 May 2025 15:18:59 +0000

I made the Memory Game in the "Vibe Coding" style!
You can play it just by chatting with Amazon Q CLI!

#amazonqcli #aws | Takuya KIHARA

A Playing Movie of the Memory Game. Very easy to create your games!! https://lnkd.in/gNaKNQJY #AmazonQCLI #AWS

linkedin.com

tacck / amazon-q-memory-game

神経衰弱ゲーム (Memory Game)

Pygameを使用したトランプの神経衰弱ゲームです。

概要

このプロジェクトは、Pygameを使用して作成された神経衰弱（メモリーゲーム）です。トランプカードを使用し、同じカードのペアを見つけるゲームです。

機能

トランプカードを使った神経衰弱ゲーム
自動生成されるトランプカード画像
スコア表示（試行回数、マッチ数、経過時間）
ゲームクリア画面
Noto Sans JPフォントを使用した日本語表示

必要条件

Python 3.6以上
Pygame
Requests (フォントのダウンロードに使用)

インストール方法

必要なパッケージをインストールします:

pip install -r requirements.txt

使い方

ゲームを起動します:

python memory_game.py

初回起動時には、Noto Sans JPフォントが自動的にダウンロードされます。

カードをクリックして、ペアを見つけます
すべてのペアを見つけるとゲームクリアです
「R」キーを押すとゲームをリスタートできます

ゲームルール

カードをクリックすると裏返ります
2枚のカードをめくり、同じカードであればマッチとなります
マッチしたカードはゲーム盤から消えます
マッチしなかった場合、カードは再び裏返ります
すべてのカードのペアを見つけるとゲームクリアです

ファイル構成

memory_game.py - メインゲームファイル
generate_cards.py - トランプカード画像生成スクリプト
download_font.py - Noto Sans JPフォントをダウンロードするスクリプト
resources/cards/ - 生成されたカード画像が保存されるディレクトリ
resources/fonts/ - ダウンロードされたフォントが保存されるディレクトリ

操作方法

マウスクリック: カードを選択
ESCキー: ゲーム終了
Rキー: ゲームリスタート（ゲームクリア後）

View on GitHub

This is the event of "Build Games with Amazon Q CLI and score a T shirt".

AWS Builder Center

Connect with builders who understand your journey. Share solutions, influence AWS product development, and access useful content that accelerates your growth. Your community starts here.

builder.aws.com

Let's check how to make it.

Install Amazon Q CLI

It's an example for macOS.

brew install amazon-q

Lunch "Amazon Q" app and sign in with AWS Builder ID.

Just all.

Start Vibe Coding

Let's chat with Amazon Q CLI.

% q chat

    ⢠⣶⣶⣦⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣤⣶⣿⣿⣿⣶⣦⡀⠀
 ⠀⠀⠀⣾⡿⢻⣿⡆⠀⠀⠀⢀⣄⡄⢀⣠⣤⣤⡀⢀⣠⣤⣤⡀⠀⠀⢀⣠⣤⣤⣤⣄⠀⠀⢀⣤⣤⣤⣤⣤⣤⡀⠀⠀⣀⣤⣤⣤⣀⠀⠀⠀⢠⣤⡀⣀⣤⣤⣄⡀⠀⠀⠀⠀⠀⠀⢠⣿⣿⠋⠀⠀⠀⠙⣿⣿⡆
 ⠀⠀⣼⣿⠇⠀⣿⣿⡄⠀⠀⢸⣿⣿⠛⠉⠻⣿⣿⠛⠉⠛⣿⣿⠀⠀⠘⠛⠉⠉⠻⣿⣧⠀⠈⠛⠛⠛⣻⣿⡿⠀⢀⣾⣿⠛⠉⠻⣿⣷⡀⠀⢸⣿⡟⠛⠉⢻⣿⣷⠀⠀⠀⠀⠀⠀⣼⣿⡏⠀⠀⠀⠀⠀⢸⣿⣿
 ⠀⢰⣿⣿⣤⣤⣼⣿⣷⠀⠀⢸⣿⣿⠀⠀⠀⣿⣿⠀⠀⠀⣿⣿⠀⠀⢀⣴⣶⣶⣶⣿⣿⠀⠀⠀⣠⣾⡿⠋⠀⠀⢸⣿⣿⠀⠀⠀⣿⣿⡇⠀⢸⣿⡇⠀⠀⢸⣿⣿⠀⠀⠀⠀⠀⠀⢹⣿⣇⠀⠀⠀⠀⠀⢸⣿⡿
 ⢀⣿⣿⠋⠉⠉⠉⢻⣿⣇⠀⢸⣿⣿⠀⠀⠀⣿⣿⠀⠀⠀⣿⣿⠀⠀⣿⣿⡀⠀⣠⣿⣿⠀⢀⣴⣿⣋⣀⣀⣀⡀⠘⣿⣿⣄⣀⣠⣿⣿⠃⠀⢸⣿⡇⠀⠀⢸⣿⣿⠀⠀⠀⠀⠀⠀⠈⢿⣿⣦⣀⣀⣀⣴⣿⡿⠃
 ⠚⠛⠋⠀⠀⠀⠀⠘⠛⠛⠀⠘⠛⠛⠀⠀⠀⠛⠛⠀⠀⠀⠛⠛⠀⠀⠙⠻⠿⠟⠋⠛⠛⠀⠘⠛⠛⠛⠛⠛⠛⠃⠀⠈⠛⠿⠿⠿⠛⠁⠀⠀⠘⠛⠃⠀⠀⠘⠛⠛⠀⠀⠀⠀⠀⠀⠀⠀⠙⠛⠿⢿⣿⣿⣋⠀⠀
 ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠛⠿⢿⡧

╭─────────────────────────────── Did you know? ────────────────────────────────╮
│                                                                              │
│      You can execute bash commands by typing ! followed by the command       │
│                                                                              │
╰──────────────────────────────────────────────────────────────────────────────╯

/help all commands  •  ctrl + j new lines  •  ctrl + s fuzzy search
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
> 神経衰弱をpygameを使って作りたいです。トランプを使ったものにしたいので、トランプの画像も生成してください。

The above prompt means I want to make a memory game using pygame. I want to use playing cards, so please generate images of playing cards.

In some chats with Amazon Q, I could make the Memory Game.
I only requested thinking on Amazon Q.

> 少し下が見切れているので、画面をもう少し縦に広げて。



🛠️  Using tool: fs_read (trusted)
 ⋮ 
 ● Reading file: /Users/takuya/project/amazon_q/a/memory_game.py, from line 1 to 20
 ⋮ 
 ● Completed in 0.0s



🛠️  Using tool: fs_write (trusted)
 ⋮ 
 ● Path: memory_game.py

   1,  1: import pygame
   2,  2: import sys
   3,  3: import os
   4,  4: import random
   5,  5: import time
   6,  6: from download_font import download_noto_sans_jp
   7,  7: 
   8,  8: # 定数
   9,  9: SCREEN_WIDTH = 800
- 10    : SCREEN_HEIGHT = 600
+     10: SCREEN_HEIGHT = 700  # 画面の高さを600から700に増加
  11, 11: CARD_WIDTH = 100
  12, 12: CARD_HEIGHT = 150
  13, 13: CARD_MARGIN = 10
  14, 14: ROWS = 4
  15, 15: COLS = 6
  16, 16: FPS = 60
  17, 17: BACKGROUND_COLOR = (50, 150, 100)  # 緑色の背景
  18, 18: FONT_COLOR = (255, 255, 255)  # 白色のテキスト

Updating: memory_game.py

 ⋮ 
 ● Completed in 0.2s

Above is an example.
I chatted with Amazon Q to "The bottom row of cards is not visible, so please make it visible".
Then, Amazon Q rewrote the window size.

Wrap up

This report is straightforward because I only have some chats, and Amazon Q CLI is mighty.

Let's challenge and feel yourself with Amazon Q CLI power!

Flutter x Amplify AI Kit Recipe App Development

Kihara, Takuya — Tue, 11 Feb 2025 03:30:10 +0000

This article presents another avenue for Flutter developers to engage with Gen-AI. It demonstrates how to utilize Amazon Bedrock from Flutter via the AWS Amplify AI Kit.

While the official AWS Amplify documentation does not address this topic, there is a hidden path to integrating powerful AI capabilities into your Flutter projects using the Amplify AI Kit. This article will guide you through this uncharted territory.

I present a recipe recommendation app for the Flutter version based on the Amplify AI Kit documentation in this piece.

Here's what you can expect to find:

Unofficial integration: Learn how to bridge the gap between Flutter and Amplify AI Kit, unlocking a world of AI possibilities for your applications.
Practical application: Create a fully functional recipe recommendation app with AI-powered suggestions.
Backend connection: Discover how to seamlessly connect your Flutter frontend with Amazon Bedrock through AWS AppSync.

Sample code

tacck / flutter_amplify_ai_kit

flutter_amplify_ai_kit

A new Flutter project.

Getting Started

This project is a starting point for a Flutter application.

A few resources to get you started if this is your first Flutter project:

For help getting started with Flutter development, view the online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

View on GitHub

Preparation

Please set up these tools.

$ flutter --version
Flutter 3.27.4 • channel stable • https://github.com/flutter/flutter.git
Framework • revision d8a9f9a52e (9 days ago) • 2025-01-31 16:07:18 -0500
Engine • revision 82bd5b7209
Tools • Dart 3.6.2 • DevTools 2.40.3

$ node --version
v20.18.1

$ npm --version 
10.8.2

Steps

Create a project

$ flutter create flutter_amplify_ai_kit
...

$ cd flutter_amplify_ai_kit

$ flutter pub add amplify_api amplify_flutter amplify_auth_cognito amplify_authenticator

$ npm create amplify@latest
? Where should we create your project? (.) # Enter

Set up your AWS credentials.

Then, run Amplify Sandbox.

$ npx ampx sandbox --outputs-format dart --outputs-out-dir lib
...
[Sandbox] Watching for file changes...
File written: lib/amplify_outputs.dart

Set up backend resources

Here, we define resources on how to connect to Amazon Bedrock.

amplify/data/resource.ts

import { type ClientSchema, a, defineData } from '@aws-amplify/backend';

const schema = a.schema({
  Dummy: a
    .model({
      dummy: a.string(),
    })
    .authorization((allow) => [allow.owner()]),

  generateRecipe: a.generation({
    aiModel: a.ai.model('Claude 3 Haiku'),
    systemPrompt: 'You are a helpful assistant that generates recipes.',
  })
    .arguments({
      description: a.string(),
    })
    .returns(
      a.customType({
        name: a.string(),
        ingredients: a.string().array(),
        instructions: a.string(),
      })
    )
    .authorization((allow) => allow.authenticated()),
});

export type Schema = ClientSchema<typeof schema>;

export const data = defineData({
  schema,
  authorizationModes: {
    defaultAuthorizationMode: 'userPool',
  },
});

generateRecipe is the name of the function called Flutter.

a.generation() is the function defined by the Amplify Library. It can describe a Gen-AI model, a system prompt, its arguments, and return types.

When you save the code above, Sandbox will automatically rerun. Please wait until you finish with Sandbox, open another terminal, and execute the generate command as shown below.

$ npx ampx generate graphql-client-code --format modelgen --model-target dart --out ./lib/models

This allows you to use Model Types from the Flutter frontend.

Notice:
amplify/data/resource.ts must include at least one a.model().
The generate command will export incomplete Types if you do not write any a.model().

Implement the Flutter frontend

Implementation lib/main.dart like below.

import 'dart:convert';

import 'package:amplify_api/amplify_api.dart';
import 'package:amplify_auth_cognito/amplify_auth_cognito.dart';
import 'package:amplify_authenticator/amplify_authenticator.dart';
import 'package:amplify_flutter/amplify_flutter.dart';
import 'package:flutter/material.dart';
import 'package:flutter_amplify_ai_kit/models/ModelProvider.dart';

import 'amplify_outputs.dart';

Future<void> main() async {
  try {
    WidgetsFlutterBinding.ensureInitialized();
    await _configureAmplify();
    runApp(const MyApp());
  } on AmplifyException catch (e) {
    runApp(Text("Error configuring Amplify: ${e.message}"));
  }
}

Future<void> _configureAmplify() async {
  try {
    await Amplify.addPlugins(
      [
        AmplifyAuthCognito(),
        AmplifyAPI(
          options: APIPluginOptions(
            modelProvider: ModelProvider.instance,
          ),
        ),
      ],
    );
    await Amplify.configure(amplifyConfig);
    safePrint('Successfully configured');
  } on Exception catch (e) {
    safePrint('Error configuring Amplify: $e');
  }
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  final title = 'AI Kit Demo for Flutter';

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return Authenticator(
      child: MaterialApp(
        title: title,
        theme: ThemeData(
          colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
          useMaterial3: true,
        ),
        builder: Authenticator.builder(),
        home: MyHomePage(title: title),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String requestRecipe = '';
  String responseRecipeName = '';
  List<String> responseRecipeIngredients = [];
  String responseRecipeInstructions = '';

  final TextEditingController _requestRecipeController =
      TextEditingController();

  @override
  void dispose() {
    _requestRecipeController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        spacing: 16,
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
              SignOutButton(),
            ],
          ),
          TextField(
            controller: _requestRecipeController,
            decoration: InputDecoration(
              labelText: 'Input your request',
              border: OutlineInputBorder(),
            ),
            onChanged: (text) {
              safePrint("Current text: $text");
            },
          ),
          Card(
            child: Column(
              children: [
                ListTile(
                  title: Text('Recipe'),
                  subtitle: Text(responseRecipeName),
                ),
                const Divider(),
                ListTile(
                  title: Text('Ingredients'),
                  subtitle: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: responseRecipeIngredients.map((ingredient) {
                      return Text(ingredient);
                    }).toList(),
                  ),
                ),
                const Divider(),
                ListTile(
                  title: Text('Instructions'),
                  subtitle: Text(responseRecipeInstructions),
                ),
              ],
            ),
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _generateRecipe,
        tooltip: 'Generate Recipe',
        child: const Icon(Icons.send),
      ),
    );
  }

  _generateRecipe() async {
    try {
      const graphQLDocument = '''
  query GenerateRecipe(\$description: String!) {
    generateRecipe(description: \$description) {
      name
      ingredients
      instructions
    }
  }
''';

      if (_requestRecipeController.text.isEmpty) {
        return;
      }

      final generateRecipeRequest = GraphQLRequest<String>(
        document: graphQLDocument,
        variables: <String, String>{
          "description": _requestRecipeController.text,
        },
      );

      final response =
          await Amplify.API.query(request: generateRecipeRequest).response;
      safePrint(response);

      Map<String, dynamic> jsonMap = json.decode(response.data!);
      safePrint(jsonMap);
      GenerateRecipeReturnType generateRecipeResponse =
          GenerateRecipeReturnType.fromJson(jsonMap['generateRecipe']);
      safePrint(generateRecipeResponse);
      setState(() {
        responseRecipeName = generateRecipeResponse.name ?? '';
        responseRecipeIngredients = generateRecipeResponse.ingredients ?? [];
        responseRecipeInstructions = generateRecipeResponse.instructions ?? '';
      });
    } on ApiException catch (e) {
      safePrint('Query failed: $e');
    }
  }
}

_generateRecipe() is the central part of the Amazon Bedrock call.

graphQLDocument is the GraphQL query to call generateRecipe previously defined in amplify/data/resource.ts.

Use Amplify.API.query() to connect to Amazon Bedrock via AWS AppSync.

Finally, we can use Amazon Bedrock from Flutter via the AWS Amplify AI Kit!

Check

Let's run and check this app.

$ flutter run -d chrome

Clean up

If you want to finish and delete Sandbox, you can just run the steps below.

$ npx ampx sandbox delete
? Are you sure you want to delete all the resources in your sandbox environment (This can't be undone)? (y/N) y
...
[Sandbox] Finished deleting.
$

Amplify AI Kit helps your backend work with Amazon Bedrock

Kihara, Takuya — Mon, 20 Jan 2025 13:52:00 +0000

AI Kit has been added to AWS Amplify.
This mechanism makes it easy to use Amazon Bedrock from the frontend.
However, if appropriately used, the Amplify AI Kit can be used from the back end.

In this article, I will introduce a sample of creating a function that uses AI Kit to make a blog summary from Amplify Functions, which I use to build the backend.

Setup

On your machine, please go ahead and execute the below commands.

% mkdir amplify-lambda-bedrock
% cd amplify-lambda-bedrock

% npm create amplify@latest
...
? Where should we create your project? (.) # press enter
...

%

If you want to get more information, please check the official document.

Manual installation - JavaScript - AWS Amplify Gen 2 Documentation

Learn how to get started with AWS Amplify Gen 2 by manually installing. AWS Amplify Documentation

docs.amplify.aws

Implementation

There are some points for implementation.

Set the generation method in the Data schema without authorization.
Keywords in the prompt in systemPrompt must be included in a property in arguments.
Within our Lambda function, we must provide a special notation for the client object to call the generation method.

I show sample codes below.

amplify/functions/post-overview/resource.ts

import { defineFunction } from "@aws-amplify/backend";

export const postOverview = defineFunction({
  name: "post-overview",
  entry: "./handler.ts",
  timeoutSeconds: 60,
  memoryMB: 128,
  runtime: 22,
  architecture: "arm64",
  environment: {
    ARTICLE_URL:
      "https://aws.amazon.com/jp/blogs/mobile/building-a-gen-ai-powered-manufacturing-search-engine-with-aws-amplify-gen-2/",
    LANGUAGE: "Japanese",
    LENGTH: "300",
  },
});

amplify/functions/post-overview/handler.ts

import type { Handler } from "aws-lambda";

import { Amplify } from "aws-amplify";
import { generateClient } from "aws-amplify/data";
import { getAmplifyDataClientConfig } from "@aws-amplify/backend/function/runtime";
import { env } from "$amplify/env/post-overview";
import { Schema } from "../../data/resource";

const { resourceConfig, libraryOptions } = await getAmplifyDataClientConfig(
  env
);
Amplify.configure(resourceConfig, libraryOptions);

const client = generateClient<Schema>();

export const handler: Handler = async (event, context) => {
  if (!process.env.ARTICLE_URL || process.env.ARTICLE_URL.length === 0) {
    return `ARTICLE_URL is wrong value: ${process.env.ARTICLE_URL}`;
  }
  if (!process.env.LANGUAGE || process.env.LANGUAGE.length === 0) {
    return `LANGUAGE is wrong value: ${process.env.LANGUAGE}`;
  }
  if (
    !process.env.LENGTH ||
    process.env.LENGTH.length === 0 ||
    parseInt(process.env.LENGTH) <= 0
  ) {
    return `LENGTH is wrong value: ${process.env.LENGTH}`;
  }

  const { data: dataGen, errors: errorsGen } =
    await client.generations.generateSummary({
      url: process.env.ARTICLE_URL,
      language: process.env.LANGUAGE,
      length: parseInt(process.env.LENGTH),
    });
  console.log(JSON.stringify(dataGen));
  console.log(errorsGen);

  return dataGen;
};

amplify/data/resource.ts

import { type ClientSchema, a, defineData } from "@aws-amplify/backend";
import { postOverview } from "../functions/post-overview/resource";

const schema = a
  .schema({
    generateSummary: a
      .generation({
        aiModel: a.ai.model("Claude 3 Haiku"),
        systemPrompt: `
Please summarize the key points and main topics covered in the content at the following url.
Please provide a summary answer in the language and length specified.
`,
      })
      .arguments({
        url: a.string().required(),
        language: a.string().required(),
        length: a.integer().required(),
      })
      .returns(
        a.customType({
          title: a.string(),
          summary: a.string(),
        })
      ),
  })
  .authorization((allow) => [allow.resource(postOverview)]);

export type Schema = ClientSchema<typeof schema>;

export const data = defineData({
  schema,
  authorizationModes: {
    defaultAuthorizationMode: "iam",
  },
});

amplify/backend.ts

import { defineBackend } from "@aws-amplify/backend";
import { data } from "./data/resource";
import { postOverview } from "./functions/post-overview/resource";

defineBackend({
  data,
  postOverview,
});

All sample codes are in this repository.

tacck / amplify-lambda-ai-kit-bedrock

Sample for Amplify AI Kit (Bedrock) called by Lambda functions

Try

You can try this sample in an Amplify project.

Open the Amplify Console and click "Create new app".

Select "GitHub" and click "Next".

Select your repository and branch, and click "Next".

Click "Next".

Click "Save and deploy".

Wait a few minutes for the project to deploy, then click the "main" environment.

Click the left side menu "Functions" and click a function that name started "amplify-".

Click "View in Lambda".

Click the "Test" tab and click "Test".

Click "Details", and you can see the result that summarized and translated the blog.

Please modify the URL, language, and length, and check your results!

Step by step: Store Amazon DynamoDB records in AWS S3 with Amazon Kinesis Data Stream / Firehose

Kihara, Takuya — Sun, 05 Mar 2023 10:49:18 +0000

Sometimes I want to store Amazon DynamoDB records in AWS S3 in order to use Amazon Athena.

We can do it simply with Amazon Kinesis Data Stream and Amazon Kinesis Data Firehose.

I am writing this article on how to set them up.

Table Of Contents

Set up Amazon DynamoDB with Amplify Studio
1. Open AWS Console
2. Create Amplify Project and Amazon DynamoDB
3. Create Amazon DynamoDB table
Create Amazon Kinesis in Amazon DynamoDB configuration
1. Show Amazon DynamoDB configuration
2. Create Amazon Kinesis Data Stream
3. Create Amazon Kinesis Data Firehose
4. Connect Amazon DynamoDB to Amazon Kinesis Data Stream
Insert data to Amazon DynamoDB and check Amazon S3

1. Set up Amazon DynamoDB with Amplify Studio

I recommend using Amplify Studio for setting up Amazon DynamoDB because of the helpful Data Manager.

1.1. Open AWS Console

Open AWS Console and choose "AWS Amplify".

1.2. Create Amplify Project and Amazon DynamoDB

Create a new Amplify Project.

Click "New app" and "Build an app".

Input "App name". This time I input "SampleKinesis".
Click "Confirm deployment" and wait a few minutes.

To finish the deployment, you can see "Launch Studio" and click it.

And then, you can see the "Amplify Studio" page.

1.3. Create Amazon DynamoDB table

Click "Data" in the left-side menu.
Then, you can see the "Data modeling" page.

Next, click "Add model".
Input table name and add fields.

For example, I input the table name and added the below fields.

Table name
DeviceLog

Fields

Field name	Type
deviceId	String
temperature	Float
humidity	Float

Click "Save and Deploy" and wait some minutes.

Then, you can see "Successfully deployed data model" and return to the "AWS Amplify console" browser tab.

2. Create Amazon Kinesis in Amazon DynamoDB configuration

2.1. Show Amazon DynamoDB configuration

Go back to the AWS Amplify console, and click the link labeled "staging".

Click the "API" tab and the "View" link.

And then, You can see Amazon DynamoDB console.

2.2. Create Amazon Kinesis Data Stream

Next, click the "Exports and streams" tab.

And click "Turn on" in Amazon Kinesis data stream details.

You can see the "Stream to an Amazon Kinesis data stream" page, then click "Create new".

You can see the "Create data stream" page and input "Data stream name".
I input "DeviceLogKinesisStream".

Then, click "Create data stream" bottom of the page.

You can see the "DeviceLogKinesisStream" page.

2.3. Create Amazon Kinesis Data Firehose

Scroll to the bottom of the page, and click the "Process with delivery stream" under the "Amazon Kinesis Data Firehose".

You can see the "Create delivery stream" page.
Change to "Amazon S3" in the "Destination".

Change the "Delivery stream name" to "DeviceLogKinesisStreamToS3".

Next, create an Amazon S3 bucket in the "Destination settings" category.
Click "Create".

Input "Bucket name" and click "Create bucket" bottom of the page.
I input "device-log-bucket".

Return to the "Create delivery stream" page, and click "Browse".
Click reload button and select the bucket created above.

These configurations are for Amazon Athena's partitioning.
Next, click "Enabled" in "Dynamic partitioning".

In "Dynamic partitioning keys", insert the following Key names and JQ Expressions.

Key name	JQ expression
deviceId	.dynamodb.NewImage.deviceId.S
year	.dynamodb.NewImage.createdAt.S[:4]
month	.dynamodb.NewImage.createdAt.S[5:7]
day	.dynamodb.NewImage.createdAt.S[8:10]
hour	.dynamodb.NewImage.createdAt.S[11:13]
minute	.dynamodb.NewImage.createdAt.S[14:16]

Input "S3 bucket prefix" and "S3 bucket error output prefix".
I input follow configurations.

S3 bucket prefix

!{partitionKeyFromQuery:deviceId}/!{partitionKeyFromQuery:year}/!{partitionKeyFromQuery:month}/!{partitionKeyFromQuery:day}/!{partitionKeyFromQuery:hour}/!{partitionKeyFromQuery:minute}/

S3 bucket error output prefix

error/

Then, click "Buffer hints, compression, and encryption" and click "GZIP" in the "Compression for data records" category.

Finally, click "Create delivery stream" bottom of the page.

2.4. Connect Amazon DynamoDB to Amazon Kinesis Data Stream

Return to the "Stream to an Amazon Kinesis data stream" page (appeared in section 2.2.).

Click reload button, and select "DeviceLogKinesisStream" in the "Destination Kinesis data stream".
Then click "Turn on stream" bottom of the page.

It's a long journey.
Now you finished connecting Amazon DynamoDB to Amazon Kinesis Data Stream.

3. Insert data to Amazon DynamoDB and check Amazon S3

Go back to Amplify Studio, click "Content" in the left-side menu.
Then click "Create DeviceLog".

Input fields and click "Submit".

Go to the Amazon S3 page and check objects.
You should wait 5 or more minutes, and you can see stored data from Amazon DynamoDB.

You can check the stored data when you download it.

{
  "awsRegion": "ap-northeast-1",
  "eventID": "cce6ab95-2efd-4b24-b7a6-acf119a8a7b1",
  "eventName": "INSERT",
  "userIdentity": null,
  "recordFormat": "application/json",
  "tableName": "DeviceLog-2ixgwyd2nbfk5hran4x3k64iw4-staging",
  "dynamodb": {
    "ApproximateCreationDateTime": 1677996227900,
    "Keys": { "id": { "S": "c09657d6-54b0-4777-b274-6cf3036849d1" } },
    "NewImage": {
      "__typename": { "S": "DeviceLog" },
      "_lastChangedAt": { "N": "1677996227878" },
      "deviceId": { "S": "abcd1234" },
      "_version": { "N": "1" },
      "updatedAt": { "S": "2023-03-05T06:03:47.846Z" },
      "createdAt": { "S": "2023-03-05T06:03:47.846Z" },
      "humidity": { "N": "60" },
      "id": { "S": "c09657d6-54b0-4777-b274-6cf3036849d1" },
      "temperature": { "N": "20.4" }
    },
    "SizeBytes": 233
  },
  "eventSource": "aws:dynamodb"
}

Now you can store Amazon DynamoDB records in AWS S3 with Amazon Kinesis Data Stream / Firehose.

You can use Amazon S3 folders for Amazon Athena's partitions.

The next step is setting up Amazon Athena with partitions.

Memo: How to create a React and relative framework project for AWS Amplify

Kihara, Takuya — Sun, 04 Dec 2022 05:55:36 +0000

I've been using the React and relative framework more and more with AWS Amplify, but I quickly forget how to create a project, so I'll make a quick record.

Everything is based on TypeScript, and the development environment is Cloud9. Other environments should work as well.

Here, I describe how to create React (create-react-app), React (Vite), Next.js, and Gatsby.

1. React (create-react-app)
2. React (Vite)
3. Next.js
4. Gatsby

1. React (create-react-app)

Based on the official documentation.
https://ui.docs.amplify.aws/react/getting-started/usage/create-react-app

Project creation

% npx create-react-app react-app --template typescript
% cd react-app

Amplify settings

Change point(s): nothing

% npm i @aws-amplify/ui-react aws-amplify
% amplify init
Note: It is recommended to run this command from the root of your app directory
? Enter a name for the project reactapp
The following configuration will be applied:

Project information
| Name: reactapp
| Environment: dev
| Default editor: Visual Studio Code
| App type: javascript
| Javascript framework: react
| Source Directory Path: src
| Distribution Directory Path: build
| Build Command: npm run-script build
| Start Command: npm run-script start

? Initialize the project with the above configuration? No
? Enter a name for the environment dev
? Choose your default editor: None
? Choose the type of app that you're building javascript
Please tell us about your project
? What javascript framework are you using react
? Source Directory Path:  src
? Distribution Directory Path: build
? Build Command:  npm run-script build
? Start Command: npm run-script start
Using default provider  awscloudformation
? Select the authentication method you want to use: AWS profile
...

2. React (Vite)

There is no official flow, but there is reference information for troubleshooting.

Project creation

% npm create vite@latest vite-react-app -- --template react-ts
% cd vite-react-app
% npm install

Amplify settings

Change point(s):

Distribution Directory Path: dist
Start Command: npm run-script preview

% npm i @aws-amplify/ui-react aws-amplify
% amplify init
Note: It is recommended to run this command from the root of your app directory
? Enter a name for the project vitereactapp
The following configuration will be applied:

Project information
| Name: vitereactapp
| Environment: dev
| Default editor: Visual Studio Code
| App type: javascript
| Javascript framework: react
| Source Directory Path: src
| Distribution Directory Path: build
| Build Command: npm run-script build
| Start Command: npm run-script start

? Initialize the project with the above configuration? No
? Enter a name for the environment dev
? Choose your default editor: None
? Choose the type of app that you're building javascript
Please tell us about your project
? What javascript framework are you using react
? Source Directory Path:  src
? Distribution Directory Path: dist
? Build Command:  npm run-script build
? Start Command: npm run-script preview
Using default provider  awscloudformation
? Select the authentication method you want to use: AWS profile
...

Development preparation

Delete the following line from package.json.

   "type": "module",

Add the following code before the closing body tag of index.html.

  <script>
    window.global = window;
    window.process = {
      env: { DEBUG: undefined },
    };
    var exports = {};
  </script>

Rewrite vite.config.js with the following code.
(The port number specification is for Cloud9.)

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    port: 8080,
  },
  resolve: {
    alias: [
      { find: "./runtimeConfig", replacement: "./runtimeConfig.browser" },
      { find: "@", replacement: "/src" },
    ],
  },
});

Rewrite the "jsx" property of tsconfig.json as follows.

    "jsx": "react"

Reference

The official document describes the changes around the settings.
https://ui.docs.amplify.aws/react/getting-started/troubleshooting#vite

3. Next.js

Hosting functionality for Next.js v12 and higher has been addressed in a recent update.

Project creation

% npx create-next-app@latest next-app --ts
% cd next-app

Amplify settings

Change point(s):

Source Directory Path: .
Distribution Directory Path: .next

% npm i @aws-amplify/ui-react aws-amplify
% amplify init
Note: It is recommended to run this command from the root of your app directory
? Enter a name for the project nextapp
The following configuration will be applied:

Project information
| Name: nextapp
| Environment: dev
| Default editor: Visual Studio Code
| App type: javascript
| Javascript framework: react
| Source Directory Path: src
| Distribution Directory Path: build
| Build Command: npm run-script build
| Start Command: npm run-script start

? Initialize the project with the above configuration? No
? Enter a name for the environment dev
? Choose your default editor: None
? Choose the type of app that you're building javascript
Please tell us about your project
? What javascript framework are you using react
? Source Directory Path:  .
? Distribution Directory Path: .next
? Build Command:  npm run-script build
? Start Command: npm run-script start
Using default provider  awscloudformation
? Select the authentication method you want to use: AWS profile
...

Development preparation

Exclude the amplify directory and below from the monitoring scope of TypeScript.
(It fails when trying to build Amplify Custom or Amplify Override files.)

Rewrite the "exclude" property of tsconfig.json as follows.

  "exclude": ["node_modules", "amplify"]

Reference

The flow is described in the original document, but the Next.js project creation method is different.
https://docs.amplify.aws/guides/hosting/nextjs/q/platform/js/

I wrote about why we rewrite the "exclude" property:

Just 1 thing you should do when you develop an application by Next.js + TypeScript + AWS Amplify

Kihara, Takuya for AWS Community Builders ・ Apr 11 '22

#aws #amplify #nextjs #javascript

4. Gatsby

The latest Gatsby v5 requires Node.js v18 or higher, so it takes a lot of time and effort to build the environment in Cloud9.

Therefore, this is the only confirmation in Local.

Project creation

% npm init gatsby gatsby-app -- -y -ts
% cd gatsby-app

Amplify settings

Change point(s):

Distribution Directory Path: public
Start Command: npm run-script serve

% npm i @aws-amplify/ui-react aws-amplify
% amplify init
Note: It is recommended to run this command from the root of your app directory
? Enter a name for the project gatsbyapp
The following configuration will be applied:

Project information
| Name: gatsbyapp
| Environment: dev
| Default editor: Visual Studio Code
| App type: javascript
| Javascript framework: react
| Source Directory Path: src
| Distribution Directory Path: build
| Build Command: npm run-script build
| Start Command: npm run-script start

? Initialize the project with the above configuration? No
? Enter a name for the environment dev
? Choose your default editor: None
? Choose the type of app that you're building javascript
Please tell us about your project
? What javascript framework are you using react
? Source Directory Path:  src
? Distribution Directory Path: public
? Build Command:  npm run-script build
? Start Command: npm run-script serve
Using default provider  awscloudformation
? Select the authentication method you wa
...

Reference

Gatsby documentation links to Amplify documentation.
https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/deploying-to-aws-amplify/
https://docs.amplify.aws/guides/hosting/gatsby/q/platform/js/

How to call AWS Step Functions from AWS Amplify

Kihara, Takuya — Sun, 06 Nov 2022 09:47:23 +0000

Purpose / Motivation

I read this great article.

AWS Amplify: execute a Step Functions state machine from Appsync

This article shows how to call AWS Step Functions from AWS Amplify, including creating some VTL files.

But now we can use AWS CDK inside AWS Amplify with the Amplify Custom feature.
And I want to use AWS CDK.
So let's translate it to the AWS CDK style.

Why call AWS Step Functions from AWS Amplify

In many cases, AWS Amplify has needed to implement logic on the Front-end side.
If we can call AWS Step Functions from AWS Amplify, we can put some logic to Back-end, which is constructed in the Serverless style.
This has positive effects in many aspects, such as scalability, security, etc.

How

Figure: Architecture for How to call AWS Step Functions from AWS Amplify

Note:
We can use AWS CDK inside AWS Amplify by Amplify Custom feature.
But we need to use AWS CDK v1.

Create a project

% npm create vite@latest sample-app -- --template react-ts 
% cd sample-app
% amplify init
% npm i @aws-amplify/ui-react aws-amplify

Add API (GraphQL)

% amplify add api
❯ GraphQL 
❯ Continue
❯ Single object with fields (e.g., “Todo” with ID, name, description)
? Do you want to edit the schema now? (Y/n) ‣ no

Check your API name, and replace below [YOUR_API_NAME] with your own.

[PROJECT_TOP]/amplify/backend/api/[YOUR_API_NAME]/schema.graphql

# This "input" configures a global authorization rule to enable public access to
# all models in this schema. Learn more about authorization rules here: https://docs.amplify.aws/cli/graphql/authorization-rules
input AMPLIFY { globalAuthRule: AuthRule = { allow: public } } # FOR TESTING ONLY!

type Todo @model {
  id: ID!
  name: String!
  description: String
}

type Mutation {
  sendSns(subject: String, message: String): String
}

Add Mutation for call AWS Step Functions.

Add Custom (AWS CDK)

% amplify add custom
❯ AWS CDK
? Provide a name for your custom resource ‣ [YOUR_CUSTOM_RESOURCE_NAME]
? Do you want to edit the CDK stack now? (Y/n) ‣ no

% cd amplify/backend/custom/[YOUR_CUSTOM_RESOURCE_NAME]
% npm i @aws-cdk/aws-appsync @aws-cdk/aws-stepfunctions @aws-cdk/aws-stepfunctions-tasks
% cd ../../../..

Check your custom resource name, and replace below [YOUR_CUSTOM_RESOURCE_NAME] with your own.

Also, set up SNS in advance and check the ARN. Replace [SNS_ARN] with it.

And replace [REGION] with the region of your project.

[PROJECT_TOP]/amplify/backend/custom/[YOUR_CUSTOM_RESOURCE_NAME]/cdk-stack.ts

import * as cdk from '@aws-cdk/core';
import * as AmplifyHelpers from '@aws-amplify/cli-extensibility-helper';
import { AmplifyDependentResourcesAttributes } from '../../types/amplify-dependent-resources-ref';
import * as iam from '@aws-cdk/aws-iam';
import * as appsync from '@aws-cdk/aws-appsync';
import * as sns from '@aws-cdk/aws-sns';
import * as stepfunctions from '@aws-cdk/aws-stepfunctions';
import * as tasks from '@aws-cdk/aws-stepfunctions-tasks';

export class cdkStack extends cdk.Stack {
  constructor(
    scope: cdk.Construct,
    id: string,
    props?: cdk.StackProps,
    amplifyResourceProps?: AmplifyHelpers.AmplifyResourceProps
  ) {
    super(scope, id, props);
    /* Do not remove - Amplify CLI automatically injects the current deployment environment in this input parameter */
    new cdk.CfnParameter(this, 'env', {
      type: 'String',
      description: 'Current Amplify CLI env name'
    });
    /* AWS CDK code goes here - learn more: https://docs.aws.amazon.com/cdk/latest/guide/home.html */

    // # Step Functions
    // ## Define Tasks
    // ### Choice
    const choiceTask = new stepfunctions.Choice(this, 'choiceTask');
    // Wait
    const waitTask = new stepfunctions.Wait(this, 'waitTask', {
      time: stepfunctions.WaitTime.duration(cdk.Duration.seconds(5))
    });
    // ### SNS
    const snsTopic = sns.Topic.fromTopicArn(
      this,
      'topic',
      '[SNS_ARN]'
    );
    const snsTask = new tasks.SnsPublish(this, 'publish', {
      topic: snsTopic,
      integrationPattern: stepfunctions.IntegrationPattern.REQUEST_RESPONSE,
      subject: stepfunctions.TaskInput.fromJsonPathAt('$.input.subject').value,
      message: stepfunctions.TaskInput.fromJsonPathAt('$.input.message')
    });

    // ### Role for SNS called from Step Functions
    const statesRole = new iam.Role(this, 'StatesServiceRole', {
      assumedBy: new iam.ServicePrincipal('states.[REGION].amazonaws.com')
    });

    // ## Set Step Functions
    const sf = new stepfunctions.StateMachine(this, 'StateMachine', {
      // stateMachineType: stepfunctions.StateMachineType.EXPRESS,
      definition: choiceTask
        .when(
          stepfunctions.Condition.stringEquals('$.input.subject', 'wait'),
          waitTask.next(snsTask)
        )
        .otherwise(snsTask),
      role: statesRole
    });

    // # AppSync
    // ## Access other Amplify Resources
    const retVal: AmplifyDependentResourcesAttributes =
      AmplifyHelpers.addResourceDependency(
        this,
        amplifyResourceProps.category,
        amplifyResourceProps.resourceName,
        [
          {
            category: 'api',
            resourceName: '[YOUR_API_NAME]'
          }
        ]
      );

    // ## Request VTL
    const requestVTL = `
      $util.qr($ctx.stash.put("executionId", $util.autoId()))

      #set( $Input = {} )
      $util.qr($Input.put("subject", $ctx.args.subject))
      $util.qr($Input.put("message", $ctx.args.message))

      #set( $Headers = {
        "content-type": "application/x-amz-json-1.0",
        "x-amz-target":"AWSStepFunctions.StartExecution"
      } )
      #set( $Body = {
        "stateMachineArn": "${sf.stateMachineArn}"
      } )

      #set( $BaseInput = {} )
      $util.qr($BaseInput.put("input", $Input))
      $util.qr($Body.put("input", $util.toJson($BaseInput)))

      #set( $PutObject = {
        "version": "2018-05-29",
        "method": "POST",
        "resourcePath": "/"
      } )
      #set ( $Params = {} )
      $util.qr($Params.put("headers",$Headers))
      $util.qr($Params.put("body",$Body))

      $util.qr($PutObject.put("params",$Params))
      $util.toJson($PutObject)
    `;
    // ## Response VTL
    const responseVTL = `
      $util.toJson($ctx.result)
    `;

    // ## Role for Step Functions
    const stepFunctionsRole = new iam.Role(this, 'stepFunctionsRole', {
      assumedBy: new iam.ServicePrincipal('appsync.amazonaws.com')
    });
    stepFunctionsRole.addToPolicy(
      new iam.PolicyStatement({
        actions: ['states:StartExecution'],
        resources: [sf.stateMachineArn]
      })
    );

    // ## AppSync DataSource
    const dataSourceId = 'sendSnsHttpDataSource';
    const dataSource = new appsync.CfnDataSource(this, dataSourceId, {
      apiId: cdk.Fn.ref(retVal.api.[YOUR_API_NAME].GraphQLAPIIdOutput),
      name: dataSourceId,
      serviceRoleArn: stepFunctionsRole.roleArn,
      type: 'HTTP',
      httpConfig: {
        endpoint: 'https://states.[REGION].amazonaws.com',
        authorizationConfig: {
          authorizationType: 'AWS_IAM',
          awsIamConfig: {
            signingRegion: '[REGION]',
            signingServiceName: 'states'
          }
        }
      }
    });

    // ## AppSync Resolver
    const resolver = new appsync.CfnResolver(this, 'custom-resolver', {
      apiId: cdk.Fn.ref(retVal.api.[YOUR_API_NAME].GraphQLAPIIdOutput),
      fieldName: 'sendSns',
      typeName: 'Mutation',
      requestMappingTemplate: requestVTL,
      responseMappingTemplate: responseVTL,
      dataSourceName: dataSource.name
    });
  }
}

Push your Amplify project

% amplify push

Push your Amplify project and wait a minute.

Set up other codes

Set up Vite and Front-end codes.

[PROJECT_TOP]/vite.config.ts

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    port: 8080,
  },
  resolve: {
    alias: [
      { find: "./runtimeConfig", replacement: "./runtimeConfig.browser" },
      { find: "@", replacement: "/src" },
    ],
  },
});

[PROJECT_TOP]/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React + TS</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
    <script>
      window.global = window;
      window.process = {
        env: { DEBUG: undefined },
      };
      var exports = {};
    </script>
  </body>
</html>

[PROJECT_TOP]/src/main.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import '@aws-amplify/ui-react/styles.css';

import { Amplify } from 'aws-amplify';
import awsExports from './aws-exports';
Amplify.configure(awsExports);

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

[PROJECT_TOP]/src/App.tsx

import React, { useState } from 'react';

import { Flex, Button, TextField } from '@aws-amplify/ui-react';

import { API } from 'aws-amplify';
import { sendSns } from './graphql/mutations';

function App(): JSX.Element {
  const [subject, setSubject] = useState('');
  const [message, setMessage] = useState('');

  const callSendSns = async (): Promise<void> => {
    if (!subject || subject.length === 0) {
      return;
    }
    if (!message || message.length === 0) {
      return;
    }

    const result = await API.graphql({
      query: sendSns,
      variables: {
        subject,
        message
      },
      authMode: 'API_KEY'
    });
    console.log('callSendSns', result);
    setSubject('');
    setMessage('');
  };

  const handleSetSubject = (event: React.FormEvent<HTMLInputElement>): void => {
    setSubject((event.target as any).value);
  };
  const handleSetMessage = (event: React.FormEvent<HTMLInputElement>): void => {
    setMessage((event.target as any).value);
  };

  return (
    <Flex direction="column">
      <TextField
        placeholder="Subject"
        label="Subject"
        isRequired={true}
        value={subject}
        errorMessage="There is an error"
        onInput={handleSetSubject}
      />
      <TextField
        placeholder="Message"
        label="Message"
        isRequired={true}
        value={message}
        errorMessage="There is an error"
        onInput={handleSetMessage}
      />
      <Button
        type="submit"
        variation="primary"
        onClick={() => {
          callSendSns();
        }}
      >
        Send SNS
      </Button>
    </Flex>
  );
}

export default App;

Check the operation with the movie

Let's check the operation with the movie.

% npm run dev

Just 1 thing you should do when you develop an application by Next.js + TypeScript + AWS Amplify

Kihara, Takuya — Mon, 11 Apr 2022 15:35:28 +0000

We just add “amplify” into exclude property in the tsconfig.json.

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules", "amplify"]
}

Why

Next.js doesn't have src directory.

So, when we set up an Amplify project, we set Source directory path to . (current directory).

$ npx create-next-app@latest --typescript
$ cd my-app
$ amplify init
Note: It is recommended to run this command from the root of your app directory
? Enter a name for the project myapp
The following configuration will be applied:

Project information
| Name: myapp
| Environment: dev
| Default editor: Visual Studio Code
| App type: javascript
| Javascript framework: react
| Source Directory Path: src
| Distribution Directory Path: build
| Build Command: npm run-script build
| Start Command: npm run-script start

? Initialize the project with the above configuration? No
? Enter a name for the environment dev
? Choose your default editor: Visual Studio Code
? Choose the type of app that you're building javascript
Please tell us about your project
? What javascript framework are you using react
? Source Directory Path:  .
? Distribution Directory Path: .next
? Build Command:  npm run build
? Start Command: npm run start
Using default provider  awscloudformation
? Select the authentication method you want to use: AWS profile

For more information on AWS Profiles, see:
https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-profiles.html

? Please choose the profile you want to use default
Adding backend environment dev to AWS Amplify app: d3rkk8kj6rlblg
⠦ Initializing project in the cloud...

(snip)

$

And Next.js’s build targets are the current directory's files and directories, including the amplify directory.

By the way, we can override AWS resources by amplify-cli.

When we use override option, amplify-cli generates override.ts under the amplify directory.

And this file unexpectedly becomes the build target for Next.js.

So, we need to add “amplify” into exclude property in the tsconfig.json.

We can check the error by the steps below.

First, add api.

$ amplify add api
? Select from one of the below mentioned services: GraphQL
? Here is the GraphQL API that we will create. Select a setting to edit or continue Continue
? Choose a schema template: Single object with fields (e.g., “Todo” with ID, name, description)

⚠️  WARNING: your GraphQL API currently allows public create, read, update, and delete access to all models via an API Key. To configure PRODUCTION-READY authorization rules, review: https://docs.amplify.aws/cli/graphql/authorization-rules

GraphQL schema compiled successfully.

Edit your schema at /home/ec2-user/environment/my-app/amplify/backend/api/myapp/schema.graphql or place .graphql files in a directory at /home/ec2-user/environment/my-app/amplify/backend/api/myapp/schema
✔ Do you want to edit the schema now? (Y/n) · no
✅ Successfully added resource myapp locally

✅ Some next steps:
"amplify push" will build all your local backend resources and provision it in the cloud
"amplify publish" will build all your local backend and frontend resources (if you have hosting category added) and provision it in the cloud

$

Second, override api.

$ amplify override api

⚠️  WARNING: your GraphQL API currently allows public create, read, update, and delete access to all models via an API Key. To configure PRODUCTION-READY authorization rules, review: https://docs.amplify.aws/cli/graphql/authorization-rules

GraphQL schema compiled successfully.

Edit your schema at /home/ec2-user/environment/my-app/amplify/backend/api/myapp/schema.graphql or place .graphql files in a directory at /home/ec2-user/environment/my-app/amplify/backend/api/myapp/schema
✅ Successfully generated "override.ts" folder at /home/ec2-user/environment/my-app/amplify/backend/api/myapp
✔ Do you want to edit override.ts file now? (Y/n) · no
$

And then, edit override.ts.

import { AmplifyApiGraphQlResourceStackTemplate } from '@aws-amplify/cli-extensibility-helper';

export function override(resources: AmplifyApiGraphQlResourceStackTemplate) {
  resources.models["Todo"].modelDDBTable.timeToLiveSpecification = {
    attributeName: "ttl",
    enabled: true
  }
}

Finally, build this project and catch the error.

$ npm run build

> my-app@0.1.0 build
> next build

Failed to compile.

./amplify/backend/api/myapp/override.ts:4:3
Type error: Object is possibly 'undefined'.

  2 | 
  3 | export function override(resources: AmplifyApiGraphQlResourceStackTemplate) {
> 4 |   resources.models["Todo"].modelDDBTable.timeToLiveSpecification = {
    |   ^
  5 |     attributeName: "ttl",
  6 |     enabled: true
  7 |   }
info  - Checking validity of types .
$

Environment

Next.js
- 12.1.4
Amplify-CLI
- 8.0.0
Node
- v16.14.2

Take a journey with your own map service by AWS Amplify and Amazon Location Service

Kihara, Takuya — Tue, 08 Jun 2021 13:19:29 +0000

Amazon Location Service is Generally Available on June 1st, 2021.
https://aws.amazon.com/jp/blogs/aws/amazon-location-service-is-now-generally-available-with-new-routing-and-satellite-imagery-capabilities/

So, we can make our own map service which used Amazon Location Service.

This post shows how to make your own map service by AWS Amplify and Amazon Location Service.
We can search the location and display it on the map.

1. Setup

Vue CLI (+ Vuetify)
Amplify CLI

1.1. Vue CLI

Install "Vue CLI."
Vue CLI

$ vue -V
@vue/cli 4.5.13

1.2. Amplify CLI

Install "Amplify CLI."
AWS Amplify

$ amplify -v
Scanning for plugins...
Plugin scan successful
4.52.0

1.3. Create Vue project

Create a Vue project by Vue CLI.

vue create amplify-amazon-location

$ vue create amplify-amazon-location


Vue CLI v4.5.13
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated confi
g files
? Save this as a preset for future projects? No

(snip)

$ cd amplify-amazon-location/
$ vue add vuetify
$

1.4. Setup Amplify project

Setup Amplify project.

amplify init

$ amplify init
Note: It is recommended to run this command from the root of your app directory
? Enter a name for the project amplifyamazonlocatio
The following configuration will be applied:

Project information
| Name: amplifyamazonlocatio
| Environment: dev
| Default editor: Visual Studio Code
| App type: javascript
| Javascript framework: vue
| Source Directory Path: src
| Distribution Directory Path: dist
| Build Command: npm run-script build
| Start Command: npm run-script serve

? Initialize the project with the above configuration? No
? Enter a name for the environment dev
? Choose your default editor: Visual Studio Code
? Choose the type of app that you're building javascript
Please tell us about your project
? What javascript framework are you using vue
? Source Directory Path:  src
? Distribution Directory Path: dist
? Build Command:  yarn build
? Start Command: yarn serve
Using default provider  awscloudformation
? Select the authentication method you want to use: AWS profile

For more information on AWS Profiles, see:
https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-profiles.html

? Please choose the profile you want to use amplify-dev
Adding backend environment dev to AWS Amplify Console app: d2qfsvhqbazu5s
⠦ Initializing project in the cloud...

(snip)

$

And don't forget to add UI Components.

$ yarn add aws-amplify @aws-amplify/ui-vue
$

1.5. Add other packages

This time we use "MapLibre GL JS," so we need to add these packages.

See the official document for the detail.

$ yarn add aws-sdk @benchmark-urbanism/vue-mapbox-map maplibre-gl

1.6. Edit main.js

Then, we edit src/main.js like below.

import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify'
import '@aws-amplify/ui-vue'
import Amplify from 'aws-amplify'
import awsconfig from './aws-exports'

Amplify.configure(awsconfig)

import 'maplibre-gl/dist/maplibre-gl.css'

Vue.config.productionTip = false

new Vue({
  vuetify,
  render: (h) => h(App),
}).$mount('#app')

2. Add Auth

Add Authentication.

amplify add auth

$ amplify add auth
Using service: Cognito, provided by: awscloudformation

 The current configured provider is Amazon Cognito. 

 Do you want to use the default authentication and security configuration? Defau
lt configuration
 Warning: you will not be able to edit these selections. 
 How do you want users to be able to sign in? Username
 Do you want to configure advanced settings? No, I am done.
Successfully added auth resource amplifyamazonlocatio3e211eea locally

Some next steps:
"amplify push" will build all your local backend resources and provision it in the cloud
"amplify publish" will build all your local backend and frontend resources (if you have hosting category added) and provision it in the cloud

$

Then, Push project.

amplify push

$ amplify push
✔ Successfully pulled backend environment dev from the cloud.

Current Environment: dev

| Category | Resource name                | Operation | Provider plugin   |
| -------- | ---------------------------- | --------- | ----------------- |
| Auth     | amplifyamazonlocatio3e211eea | Create    | awscloudformation |
? Are you sure you want to continue? Yes
⠧ Updating resources in the cloud. This may take a few minutes...

(snip)

$

3. Create a Map and a Search index

3.1.　Create a Map

Next, we open the AWS console by the browser and move to "Amazon Location Service."

Click the "Maps" menu on the left panel.
And click "Create map" in the My maps area.
Input the map name "SampleMap" in the Name field.
Select the map in the Maps area. In this case, we select "Esri Light."
Select "Pricing plan use-case." In this case, we select "Yes" to the first question.
Push "Create map" at the bottom of the page.

3.2.　Create a Search index

Continuously, we create a Place index.

Click the "Search indexes" menu on the left panel.
And click "Create place index" in the My maps area.
Input the map name "SamplePlaceIndex" in the Name field.
Select the data provider in the Data provider area. In this case, we select "Esri."
Select the data storage option in the Data storage options area. In this case, we select "No, single use only."
Select "Pricing plan use-case." In this case, we select "Yes" to the first question.
Push "Create place index" at the bottom of the page.

4. Set IAM Role

We have already added the authentication function by Amplify.
However, the IAM role is incomplete. Unable to access previously created location services resources.
Let's add it.

Go to IAM Services and click the Roles menu on the left panel.
Input "amplify-amplifyamazonlocatio" in the search field.
Click the role that name ends with "-authRole".
Click "Add inline policy".
Select the JSON tab and input below JSON data. (Set your ARN in [MAP_ARN] and [PLACE_INDEX_ARN].)

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "VisualEditor0",
            "Effect": "Allow",
            "Action": [
                "geo:GetMapGlyphs",
                "geo:GetMapSprites",
                "geo:GetMapStyleDescriptor",
                "geo:GetMapTile"
            ],
            "Resource": [MAP_ARN]
        },
        {
            "Sid": "VisualEditor1",
            "Effect": "Allow",
            "Action": "geo:SearchPlaceIndexForText",
            "Resource": [PLACE_INDEX_ARN]
        }
    ]
}

5. Implement

OK, we can implement a search place and show it on the map.
Please see the repository for code details.

tacck / amplify-amazon-location

Sample code for AWS Amplify, Amazon Location service, and Vue.js.

5.1. Search the location

"Search the location" implementation is like below.
Only use searchPlaceIndexForText, we can get the place information.

src/components/SearchMap.vue

    search: function () {
      if (!this.place || this.place.length === 0) {
        return
      }

      const params = {
        IndexName: 'SamplePlaceIndex',
        Text: this.place,
      }
      this.client.searchPlaceIndexForText(params, (err, data) => {
        if (err) {
          console.error(err)
          return
        }
        if (data) {
          console.log(data)

          if (data.Results && data.Results.length > 0) {
            this.lng = data.Results[0].Place.Geometry.Point[0]
            this.lat = data.Results[0].Place.Geometry.Point[1]
          }
        }
      })
    },

5.2. Display the location on the map

"Display the location on the map" implementation is like below.
mapInstance is the object rendering the map.
transformRequest make a Signed URL for access to the Map resource previously created.

src/components/Map.vue

  mounted: async function () {
    this.credentials = await Auth.currentCredentials()

    this.mapInstance = new maplibregl.Map({
      container: 'map',
      style: this.mapName,
      center: [this.scene.lng, this.scene.lat],
      zoom: this.scene.zoom,
      transformRequest: this.transformRequest,
    })

    this.mapInstance.addControl(new maplibregl.NavigationControl(), 'top-left')
    this.mapInstance.on('load', function () {
      this.resize()
    })
  },
(snip)
    transformRequest: function (url, resourceType) {
      if (resourceType === 'Style' && !url.includes('://')) {
        url = `https://maps.geo.${awsconfig.aws_project_region}.amazonaws.com/maps/v0/maps/${url}/style-descriptor`
      }

      if (url.includes('amazonaws.com')) {
        return {
          url: Signer.signUrl(url, {
            access_key: this.credentials.accessKeyId,
            secret_key: this.credentials.secretAccessKey,
            session_token: this.credentials.sessionToken,
          }),
        }
      }

      return { url }
    },

6. Take a journey

We arrive at the final section.
Let's get to the journey!

Simple Chat with Translator by AWS Amplify

Kihara, Takuya — Tue, 25 May 2021 10:25:53 +0000

Here is the Spanish version translated by Chema Bescós.
Cómo hacer un sencillo chat con traductor, usando AWS Amplify

AWS Amplify has many functions related to other AWS services.
This article uses "Predictions," which is the category of "AI/ML."
Among them, let's use "Translate language."
https://docs.amplify.aws/lib/predictions/translate/q/platform/js

1. Setup

Node.js (+ yarn)
Vue CLI (+Vuetify)
Amplify CLI

Install above items.

2. Create Project

Let's create a Vue project.

$ vue create sample-amplify-translator-chat


Vue CLI v4.5.13
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router,
 Vuex, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback 
in production) Yes
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated confi
g files
? Save this as a preset for future projects? No

(snip)

$ cd sample-amplify-translator-chat
$ vue add vuetify

(snip)

? Choose a preset: Default (recommended)

(snip)

$

And set Amplify project.

$ amplify init
Note: It is recommended to run this command from the root of your app directory
? Enter a name for the project sampleamplifytransla
The following configuration will be applied:

Project information
| Name: sampleamplifytransla
| Environment: dev
| Default editor: Visual Studio Code
| App type: javascript
| Javascript framework: vue
| Source Directory Path: src
| Distribution Directory Path: dist
| Build Command: npm run-script build
| Start Command: npm run-script serve

? Initialize the project with the above configuration? No
? Enter a name for the environment dev
? Choose your default editor: Visual Studio Code
? Choose the type of app that you're building javascript
Please tell us about your project
? What javascript framework are you using vue
? Source Directory Path:  src
? Distribution Directory Path: dist
? Build Command:  yarn build
? Start Command: yarn serve
Using default provider  awscloudformation
? Select the authentication method you want to use: AWS profile

For more information on AWS Profiles, see:
https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-profiles.html

? Please choose the profile you want to use default
Adding backend environment dev to AWS Amplify Console app: XXXXXXXXXXXXXX
⠇ Initializing project in the cloud...

(snip)

Your project has been successfully initialized and connected to the cloud!

Some next steps:
"amplify status" will show you what you've added already and if it's locally configured or deployed
"amplify add <category>" will allow you to add features like user login or a backend API
"amplify push" will build all your local backend resources and provision it in the cloud
"amplify console" to open the Amplify Console and view your project status
"amplify publish" will build all your local backend and frontend resources (if you have hosting category added) and provision it in the cloud

Pro tip:
Try "amplify add api" to create a backend API and then "amplify publish" to deploy everything

$

3. Add Auth

"Translate language" function has to need Auth.
So, add Auth function.

$ amplify add auth
Using service: Cognito, provided by: awscloudformation

 The current configured provider is Amazon Cognito. 

 Do you want to use the default authentication and security configuration? Default configuration
 Warning: you will not be able to edit these selections. 
 How do you want users to be able to sign in? Username
 Do you want to configure advanced settings? No, I am done.
Successfully added auth resource sampleamplifytransla4290ed5c locally

Some next steps:
"amplify push" will build all your local backend resources and provision it in the cloud
"amplify publish" will build all your local backend and frontend resources (if you have hosting category added) and provision it in the cloud

$

Then push the project.

$ amplify push
✔ Successfully pulled backend environment dev from the cloud.

Current Environment: dev

| Category | Resource name                | Operation | Provider plugin   |
| -------- | ---------------------------- | --------- | ----------------- |
| Auth     | sampleamplifytransla4290ed5c | Create    | awscloudformation |
? Are you sure you want to continue? Yes
⠦ Updating resources in the cloud. This may take a few minutes...

(snip)

UPDATE_COMPLETE_CLEANUP_IN_PROGRESS amplify-sampleamplifytransla-dev-221649 AWS::CloudFormation::Stack Mon May 24 2021 22:42:33 GMT+0900 (日本標準時) 
UPDATE_COMPLETE                     amplify-sampleamplifytransla-dev-221649 AWS::CloudFormation::Stack Mon May 24 2021 22:42:34 GMT+0900 (日本標準時) 
✔ All resources are updated in the cloud


$

4. Add Predictions

Now, the primary function.
Add Predictions to use the "Translate language" function.

$ amplify add predictions
? Please select from one of the categories below Convert
? What would you like to convert? Translate text into a different language
? Provide a friendly name for your resource translateText20591e92
? What is the source language? English
? What is the target language? Japanese
? Who should have access? Auth and Guest users
Auth configuration is required to allow unauthenticated users, but it is not configured properly.
Successfully updated auth resource locally.
Successfully added resource translateText20591e92 locally

Some next steps:
"amplify push" builds all of your local backend resources and provisions them in the cloud
"amplify publish" builds all of your local backend and front-end resources (if you added hosting category) and provisions them in the cloud

$

Push the project.

$ amplify push
✔ Successfully pulled backend environment dev from the cloud.

Current Environment: dev

| Category    | Resource name                | Operation | Provider plugin   |
| ----------- | ---------------------------- | --------- | ----------------- |
| Predictions | translateText39476081        | Create    | awscloudformation |
| Auth        | sampleamplifytransla0530875a | Update    | awscloudformation |
? Are you sure you want to continue? Yes
⠋ Updating resources in the cloud. This may take a few minutes...

(snip)

UPDATE_COMPLETE authsampleamplifytransla4290ed5c        AWS::CloudFormation::Stack Mon May 24 2021 22:51:01 GMT+0900 (日本標準時) 
UPDATE_COMPLETE amplify-sampleamplifytransla-dev-221649 AWS::CloudFormation::Stack Mon May 24 2021 22:51:01 GMT+0900 (日本標準時) 
✔ All resources are updated in the cloud


$

Your src/main.js is below.

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import vuetify from './plugins/vuetify'

import '@aws-amplify/ui-vue'
import Amplify from 'aws-amplify'
import awsconfig from './aws-exports'

Amplify.configure(awsconfig)
import { AmazonAIPredictionsProvider } from '@aws-amplify/predictions'
Amplify.addPluggable(new AmazonAIPredictionsProvider())

Vue.config.productionTip = false

new Vue({
  router,
  store,
  vuetify,
  render: (h) => h(App),
}).$mount('#app')

If you forget to write Amplify.addPluggable(new AmazonAIPredictionsProvider()) (like me), this system is not work.
Let's check this document.
https://docs.amplify.aws/lib/predictions/getting-started/q/platform/js

5. Add API

Add API(GraphQL) for saving messages.

$ amplify add api
? Please select from one of the below mentioned services: GraphQL
? Provide API name: sampleamplifytransla
? Choose the default authorization type for the API API key
? Enter a description for the API key: 
? After how many days from now the API key should expire (1-365): 7
? Do you want to configure advanced settings for the GraphQL API No, I am done.
? Do you have an annotated GraphQL schema? No
? Choose a schema template: Single object with fields (e.g., “Todo” with ID, name, description)

The following types do not have '@auth' enabled. Consider using @auth with @model
         - Todo
Learn more about @auth here: https://docs.amplify.aws/cli/graphql-transformer/auth


GraphQL schema compiled successfully.

Edit your schema at /[YOUR_DIRECTORY]/sample-amplify-translator-chat/amplify/backend/api/sampleamplifytransla/schema.graphql or place .graphql files in a directory at /[YOUR_DIRECTORY]/sample-amplify-translator-chat/amplify/backend/api/sampleamplifytransla/schema
? Do you want to edit the schema now? No
Successfully added resource sampleamplifytransla locally

Some next steps:
"amplify push" will build all your local backend resources and provision it in the cloud
"amplify publish" will build all your local backend and frontend resources (if you have hosting category added) and provision it in the cloud

$

Change amplify/backend/api/sampleamplifytransla/schema.graphql below.

type Message @model {
  id: ID!
  userName: String!
  originalMessage: String!
  translatedMessage: String!
  createdAt: AWSDateTime
}

Push the project.

$ amplify push
✔ Successfully pulled backend environment dev from the cloud.

Current Environment: dev

| Category    | Resource name                | Operation | Provider plugin   |
| ----------- | ---------------------------- | --------- | ----------------- |
| Api         | sampleamplifytransla         | Create    | awscloudformation |
| Auth        | sampleamplifytransla4290ed5c | No Change | awscloudformation |
| Predictions | translateText20591e92        | No Change | awscloudformation |
? Are you sure you want to continue? Yes

The following types do not have '@auth' enabled. Consider using @auth with @model
         - Message
Learn more about @auth here: https://docs.amplify.aws/cli/graphql-transformer/auth


GraphQL schema compiled successfully.

Edit your schema at /[YOUR_DIRECTORY]/sample-amplify-translator-chat/amplify/backend/api/sampleamplifytransla/schema.graphql or place .graphql files in a directory at /[YOUR_DIRECTORY]/sample-amplify-translator-chat/amplify/backend/api/sampleamplifytransla/schema
? Do you want to generate code for your newly created GraphQL API Yes
? Choose the code generation language target javascript
? Enter the file name pattern of graphql queries, mutations and subscriptions src/graphql/**/*.js
? Do you want to generate/update all possible GraphQL operations - queries, mutations and subscriptions Yes
? Enter maximum statement depth [increase from default if your schema is deeply nested] 2
⠇ Updating resources in the cloud. This may take a few minutes...

(snip)

✔ Generated GraphQL operations successfully and saved at src/graphql
✔ All resources are updated in the cloud

GraphQL endpoint: https://XXXXXXXXXXXXXXXXXXXXXXXXXX.appsync-api.ap-northeast-1.amazonaws.com/graphql
GraphQL API KEY: XXX-XXXXXXXXXXXXXXXXXXXXXXXXXX


$

6. Implementation

OK, we can implement the chat to include the translate function.

If you want to know about code detail, please see this repository.

tacck / sample-amplify-translator-chat

src/views/Chat.vue

<template>
  <v-container>
    <v-row>
      <v-col class="pb-0" cols="12" sm="8">
        <v-text-field
          v-model="userName"
          label="User Name"
          outlined
        ></v-text-field
      ></v-col>
      <v-col class="pb-0" cols="6" sm="2">
        <v-select
          :items="languages"
          label="Original Language"
          outlined
          v-model="fromLang"
        ></v-select>
      </v-col>
      <v-col class="pb-0" cols="6" sm="2">
        <v-select
          :items="languages"
          label="Translate to"
          outlined
          v-model="toLang"
        ></v-select>
      </v-col>
      <v-col class="pt-0" cols="12">
        <v-text-field
          v-model="message"
          label="Message"
          outlined
          append-outer-icon="mdi-send"
          @click:append-outer="sendMessage"
        ></v-text-field></v-col
    ></v-row>
    <Timeline :messages="computedSortedMessages"></Timeline>
  </v-container>
</template>

<script>
import { API, graphqlOperation, Predictions } from 'aws-amplify'
import { listMessages } from '@/graphql/queries'
import { createMessage } from '@/graphql/mutations'
import { onCreateMessage } from '@/graphql/subscriptions'

import Timeline from '../components/Timeline'

export default {
  components: { Timeline },
  computed: {
    computedSortedMessages: function () {
      return this.messages
        .slice()
        .sort((a, b) => (a.createdAt < b.createdAt ? 1 : -1))
    },
  },
  data: function () {
    return {
      userName: '',
      message: '',
      fromLang: '',
      toLang: '',
      messages: [],
      languages: ['en', 'ja'],
      onCreateMessageSubscription: null,
    }
  },
  created: async function () {
    const result = await API.graphql(graphqlOperation(listMessages))
    console.log(result)
    this.messages = result.data.listMessages.items

    this.unsubscribe = API.graphql(graphqlOperation(onCreateMessage)).subscribe(
      {
        next: ({ provider, value }) => {
          console.log({ provider, value })
          this.messages.push(value.data.onCreateMessage)
        },
      },
    )
  },
  beforeDestroy: function () {
    if (this.onCreateMessageSubscription) {
      this.onCreateMessageSubscription.unsubscribe()
      this.onCreateMessageSubscription = null
    }
  },
  methods: {
    sendMessage: async function () {
      console.log('sendMessage', this.message)
      const result = await Predictions.convert({
        translateText: {
          source: {
            text: this.message,
            language: this.fromLang,
            // supported languages https://docs.aws.amazon.com/translate/latest/dg/how-it-works.html#how-it-works-language-codes
          },
          targetLanguage: this.toLang,
        },
      })
      console.log(result)

      const message = await API.graphql(
        graphqlOperation(createMessage, {
          input: {
            userName: this.userName,
            originalMessage: this.message,
            translatedMessage: result.text,
          },
        }),
      )
      console.log(message)

      this.userName = ''
      this.message = ''
      this.fromLang = ''
      this.toLang = ''
    },
  },
}
</script>

<style></style>

src/components/Timeline.vue

<template>
  <v-row>
    <v-col class="pb-0" cols="12" v-for="message in messages" :key="message.id">
      <v-card class="ma-4">
        <v-row>
          <v-col cols="12" class="px-5 text-h5 font-weight-light">
            {{ message.userName }}</v-col
          >
        </v-row>
        <v-row>
          <v-col class="py-0" cols="6">
            <v-card outlined color="grey lighten-3">
              <v-card-subtitle class="caption">Original</v-card-subtitle>
              <v-card-text class="body-1">
                {{ message.originalMessage }}</v-card-text
              >
            </v-card></v-col
          >
          <v-col class="px-8" cols="6">{{ message.translatedMessage }}</v-col>
        </v-row>
      </v-card>
    </v-col>
  </v-row>
</template>

<script>
export default {
  props: {
    messages: {
      type: Array,
    },
  },
}
</script>

<style></style>

7. Checking

You can see the chat like the below movie.

AWS Amplify is one of the easy ways to use Amazon Translate.

Forem: Kihara, Takuya

Auth0 AWS Amplify Gen2: OIDC Authorization for AppSync via Identity Pool Federation

Introduction

The Official Documentation Is Not Enough

Advanced workflows - React - AWS Amplify Gen 2 Documentation

Required Information

Available in Official Documentation (with links or related info)

Not in Official Documentation (no links or specific details)

credentialsProvider and tokenProvider

Defining the OIDC Provider in backend.ts

Auth0 Domain Format Differences

Implementation Steps

Step 1: Auth0 Configuration

Step 2: Amplify Project Setup

Step 3: Environment Variables

Step 4: Amplify Backend Configuration

amplify/auth/resource.ts

amplify/data/resource.ts

amplify/backend.ts (Critical part not in official documentation)

Step 5: Custom Credentials Provider (Frontend)

Step 6: Auth0 React SDK Integration

src/main.tsx

src/App.tsx (Token handoff after Auth0 login)

Step 7: Executing AppSync Queries

Step 8: Deployment

Troubleshooting

Invalid login token Error

No credentials / undefined credentials

Unauthorized Error in AppSync

NotAuthorizedException in Identity Pool

Summary

Applying to Other OIDC Providers

Reference Documentation

Building an A/B Testing System with CloudFront Functions using AWS CDK

Prerequisites

Why This is Needed

Required Knowledge

Required Environment

AWS Services Used

Setup

1. Project Initialization

2. Project Structure Setup

Implementation Steps

1. CloudFront Function Implementation

2. S3 Bucket Creation

3. Origin Access Control (OAC) Configuration

4. Custom Cache Policy Creation

5. CloudFront Distribution Configuration

6. S3 Bucket Policy Configuration

7. Content Deployment

8. Complete Stack Implementation

tacck / cloudfront-ab-testing

Check A/B testing on CloudFront

Welcome to your CDK TypeScript project

Useful commands

Permison Boundly

Bootstraping

Check

9. Deployment and Testing

Summary

Key Features

Benefits

Application Possibilities

Recheck the differences between AWS Amplify Hosting and Amazon S3 + Amazon CloudFront

1. Introduction

2. Feature Comparison Table

2.1. Differences in Infrastructure Setup Procedures

2.2. Deployment Procedure Comparison

2.3. Automation Level

2.4. Pricing Differences (Estimates)

Amazon CloudFront Data Transfer Pricing (Tokyo Region)

AWS Amplify Hosting Data Transfer Pricing

Pricing Comparison Scenarios (Tokyo Region)

3. Use Cases

3.1. When Amazon S3 + Amazon CloudFront is Suitable

3.2. When AWS Amplify + Amazon S3 is Suitable

3.3. When AWS Amplify + GitHub is Suitable

4. Summary

5. Reference: Operational Flow Assumptions

5.1. Role Definitions

`credentialsProvider` and `tokenProvider`

Defining the OIDC Provider in `backend.ts`

`amplify/auth/resource.ts`

`amplify/data/resource.ts`

`amplify/backend.ts` (Critical part not in official documentation)

`src/main.tsx`

`src/App.tsx` (Token handoff after Auth0 login)

`Invalid login token` Error

`No credentials` / `undefined credentials`

`Unauthorized` Error in AppSync

`NotAuthorizedException` in Identity Pool