DEV Community: Kihara, Takuya

Building a Todo App with Auth0 + AWS Amplify Gen2 + Next.js 16

Kihara, Takuya — Tue, 11 Aug 2026 13:14:48 +0000

Building a Todo App with Auth0 + AWS Amplify Gen2 + Next.js 16

Introduction

AWS Amplify Gen2 offers a robust data layer supported by AppSync and DynamoDB, but what if you prefer using an external identity provider like Auth0 instead of Cognito User Pools for authentication?

In this tutorial, we'll build a real-time Todo application that combines:

Auth0 for authentication (Universal Login with social providers)
AWS Amplify Gen2 for the data layer (AppSync GraphQL + DynamoDB)
Next.js 16 with App Router (Server Components + Client Components)
React 19 form actions for modern form handling

By the end, you'll have a fully functional app where users can log in with Auth0, and their todos are safely stored in DynamoDB with owner-based authorization through AppSync's OIDC auth mode.

Prerequisites

AWS account
Auth0 account (free tier works)
Node.js 20+
pnpm (or npm/yarn)

Tech Stack

Category	Technology	Version
Framework	Next.js (App Router)	16.2.9
UI	React	19.2.4
Auth	@auth0/nextjs-auth0	4.22.0
Backend	AWS Amplify Gen2	6.18.0
Data	AppSync (GraphQL) + DynamoDB	—
Identity	Cognito Identity Pool (OIDC Federation)	—

Architecture

Project Structure

.
├─ amplify/
│   ├─ auth/resource.ts          # Cognito Identity Pool definition
│   ├─ backend.ts                # IAM OIDC provider + Identity Pool config
│   └─ data/resource.ts          # AppSync schema + OIDC auth mode
├─ app/
│   ├─ lib/auth0.ts              # Auth0Client instance
│   ├─ page.tsx                  # Server Component (session retrieval)
│   ├─ layout.tsx                # Root layout
│   ├─ CustomCredentialsProvider.ts  # Cognito Identity federation
│   └─ components/
│       ├─ TodoList.tsx           # Client Component (Amplify data + real-time)
│       ├─ LoginBox.tsx           # Login UI container
│       ├─ LoginButton.tsx        # <a href="/auth/login">
│       ├─ LogoutButton.tsx       # <a href="/auth/logout">
│       └─ Profile.tsx            # User profile display
├─ proxy.ts                       # Auth0 middleware (handles /auth/* routes)
├─ .env                           # Environment variables
└─ amplify_outputs.json           # Generated by `ampx sandbox`

System Diagram

Browser
  └─ Next.js App (localhost:3000)
       ├─ Server Component (page.tsx)
       │    └─ Auth0 session retrieval
       ├─ Client Component (TodoList.tsx)
       │    ├─ Amplify configure (OIDC token + credentials provider)
       │    ├─ AppSync GraphQL (observeQuery / create)
       │    └─ Cognito Identity Pool (temporary AWS credentials)
       └─ proxy.ts (Auth0 middleware)
            ├─ /auth/login → Auth0 authorize
            ├─ /auth/callback → token exchange
            └─ /auth/logout → Auth0 logout

AWS Amplify Gen2
  ├─ AppSync (GraphQL API, OIDC auth)
  ├─ DynamoDB (Todo table)
  └─ Cognito Identity Pool (Auth0 OIDC federation)

Auth0
  └─ Universal Login (Google OAuth, etc.)

Step 1: Auth0 Setup

Create a Single Page Web Application or Regular Web Application in the Auth0 Dashboard.

Configure the following:

Allowed Callback URLs: http://localhost:3000/auth/callback
Allowed Logout URLs: http://localhost:3000

Note down these values:

Domain (e.g., dev-xxx.us.auth0.com)
Client ID
Client Secret

Step 2: Project Initialization

Install Vite+ CLI

macOS with Homebrew

brew install vite-plus

macOS/Linux with curl

curl -fsSL https://vite.plus | bash

Windows

irm https://vite.plus/ps1 | iex

Create a new Next.js project

vp create create-next-app -- my-app

Add dependencies

pnpm add aws-amplify @aws-amplify/backend @auth0/nextjs-auth0 @aws-sdk/client-cognito-identity dotenv

If you see [ERR_PNPM_IGNORED_BUILDS] Ignored build scripts: core-js@2.6.12, core-js@3.50.0, run the following:
pnpm approve-builds

Step 3: Environment Variables

Create a .env file at the project root:

# Auth0 NextJS SDK
AUTH0_DOMAIN=https://dev-xxx.us.auth0.com
AUTH0_CLIENT_ID=your_client_id
AUTH0_CLIENT_SECRET=your_client_secret
AUTH0_SECRET=a_random_32_char_string
APP_BASE_URL=http://localhost:3000

# Frontend
NEXT_AUTH0_DOMAIN=dev-xxx.us.auth0.com
NEXT_AUTH0_CLIENT_ID=your_client_id

Important: AUTH0_DOMAIN must include the https:// prefix. AppSync's OIDC configuration requires a full URL as the Issuer URI.

Step 4: Amplify Backend

4-1. Auth Resource (`amplify/auth/resource.ts`)

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

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

This creates a Cognito Identity Pool that we'll use for federated access.

4-2. Backend Definition (`amplify/backend.ts`)

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

// Create IAM OIDC provider for Auth0
const oidcProvider = new iam.OpenIdConnectProvider(
  backend.auth.resources.cfnResources.cfnIdentityPool.stack,
  "Auth0OIDCProvider",
  {
    url: auth0Domain,
    clientIds: [auth0ClientId],
  },
);

// Register Auth0 with the Identity Pool
const identityPool = backend.auth.resources.cfnResources.cfnIdentityPool;
identityPool.openIdConnectProviderArns = [
  ...(identityPool.openIdConnectProviderArns || []),
  oidcProvider.openIdConnectProviderArn,
];

4-3. Data Resource (`amplify/data/resource.ts`)

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

config();

const auth0Domain = process.env.AUTH0_DOMAIN || "";
const oidcIssuerUrl = auth0Domain.startsWith("https://") ? auth0Domain : `https://${auth0Domain}`;

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: oidcIssuerUrl,
      clientId: process.env.AUTH0_CLIENT_ID,
      tokenExpiryFromAuthInSeconds: 0,
      tokenExpireFromIssueInSeconds: 3600,
    },
  },
});

Note: tokenExpiryFromAuthInSeconds: 0 disables the auth_time check in AppSync, since Auth0 tokens don't include this claim by default.

Note: We call dotenv.config() directly in this file because ES module import order means backend.ts's config() hasn't run yet when data/resource.ts is evaluated.

Step 5: Auth0 SDK Configuration

5-1. Auth0 Client (`app/lib/auth0.ts`)

import { Auth0Client } from "@auth0/nextjs-auth0/server";

export const auth0 = new Auth0Client();

5-2. Middleware (`proxy.ts`)

import { auth0 } from "./app/lib/auth0";

export async function proxy(request: Request) {
  return await auth0.middleware(request);
}

export const config = {
  matcher: ["/((?!_next/static|_next/image|favicon.ico|sitemap.xml|robots.txt).*)"],
};

This automatically handles /auth/login, /auth/callback, and /auth/logout routes.

Step 6: Server Component (`app/page.tsx`)

import { auth0 } from "./lib/auth0";
import TodoList from "./components/TodoList";
import LoginBox from "./components/LoginBox";

export default async function Home() {
  const session = await auth0.getSession();
  const user = session?.user;

  return (
    <main>
      {user ? (
        <TodoList
          idToken={session?.tokenSet.idToken || ""}
          auth0Domain={process.env.NEXT_AUTH0_DOMAIN || ""}
        />
      ) : (
        <LoginBox />
      )}
    </main>
  );
}

Key design decision: The Server Component retrieves the Auth0 session and passes the idToken down to the Client Component as a prop. This avoids accessing browser-only APIs on the server.

Step 7: Client Component with Real-time Subscriptions

This is the core of the app. The TodoList component:

Configures Amplify with a custom credentials provider (Cognito Identity Pool federation)
Subscribes to real-time updates via observeQuery
Uses React 19's useActionState for form submission

"use client";

import { useEffect, useState, useActionState, useRef } from "react";
import { Amplify } from "aws-amplify";
import { decodeJWT, TokenProvider } from "aws-amplify/auth";
import { generateClient } from "aws-amplify/api";
import outputs from "../../amplify_outputs.json";
import type { Schema } from "@/amplify/data/resource";

// ... CustomCredentialsProvider class (see full source)

export default function TodoList({ idToken, auth0Domain }) {
  const [todos, setTodos] = useState([]);
  const [isConfigured, setIsConfigured] = useState(false);
  const [client, setClient] = useState(null);
  const formRef = useRef(null);

  // React 19 form action pattern
  const [_state, addTodoAction, isPending] = useActionState(
    async (_prev, formData) => {
      const content = formData.get("content")?.trim();
      if (!content || !client) return null;

      await client.models.Todo.create({ content }, { authMode: "oidc" });
      formRef.current?.reset();
      return null;
    },
    null,
  );

  useEffect(() => {
    // Configure Amplify with Auth0 tokens
    const customCredentialsProvider = new CustomCredentialsProvider();
    const tokenProvider = {
      async getTokens() {
        if (!idToken) return null;
        return {
          accessToken: decodeJWT(idToken),
          idToken: decodeJWT(idToken),
        };
      },
    };

    customCredentialsProvider.loadFederatedLogin({
      domain: auth0Domain,
      token: idToken,
    });

    Amplify.configure(outputs, {
      Auth: {
        credentialsProvider: customCredentialsProvider,
        tokenProvider,
      },
    });

    // IMPORTANT: Share a single client instance
    setClient(generateClient());
    setIsConfigured(true);
  }, [idToken, auth0Domain]);

  useEffect(() => {
    if (!isConfigured || !client) return;

    const sub = client.models.Todo.observeQuery({ authMode: "oidc" }).subscribe({
      next: ({ items }) => setTodos([...items]),
    });

    return () => sub.unsubscribe();
  }, [isConfigured, client]);

  return (
    <div>
      <form ref={formRef} action={addTodoAction}>
        <input type="text" name="content" disabled={isPending} />
        <button type="submit" disabled={isPending}>
          {isPending ? "..." : "Add"}
        </button>
      </form>

      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>{todo.content}</li>
        ))}
      </ul>
    </div>
  );
}

Why share the client instance?

If you call generateClient() in both the subscription setup and the mutation handler, they create separate instances. The subscription won't receive mutation events from a different client. It's best to share a single instance through the state to ensure everything works smoothly.

Step 8: Login/Logout Buttons

For authentication routes that redirect externally, use plain <a> tags instead of next/link:

// LoginButton.tsx
export default function LoginButton() {
  return (
    <a href="/auth/login">Login</a>
  );
}

Why not next/link? The <Link> component attempts a client-side navigation by fetching an RSC payload first. Since /auth/login redirects to Auth0's domain via middleware, the fetch follows the redirect cross-origin and hits a CORS error. Plain <a> triggers a full browser navigation, which handles redirects correctly.

Gotchas and Troubleshooting

Cookie Size (HTTP 431)

Auth0 session cookies can grow large (encrypted JWTs with lengthy profile data). If you see 431 Request Header Fields Too Large:

Clear cookies for localhost:3000
Increase the header size limit:

{
  "scripts": {
    "dev": "NODE_OPTIONS='--max-http-header-size=32768' next dev"
  }
}

dotenv Loading Order

In ES modules, imports are evaluated before module-level code runs. If backend.ts imports data/resource.ts before calling dotenv.config(), environment variables will be undefined in data/resource.ts. Solution: call config() at the top of each file that needs env vars.

Server vs. Client Component Boundary

Operation	Where
Auth0 session retrieval	Server Component
Amplify configure	Client Component
AppSync queries/mutations	Client Component
Real-time subscriptions	Client Component
sessionStorage / localStorage	Client Component

Running the App

# Deploy the Amplify sandbox
npx ampx sandbox

# Start the dev server (in another terminal)
pnpm dev

Open http://localhost:3000, log in with Auth0, and start adding todos. They'll appear in real-time thanks to AppSync subscriptions.

Conclusion

Integrating Auth0 with AWS Amplify Gen2 is very much possible, though it requires understanding a few boundaries:

OIDC auth mode in AppSync works well with Auth0 tokens
Server/Client Component separation is critical — auth session on the server, Amplify data on the client
React 19 form actions simplify async form handling without FormEvent
Shared client instances are necessary for real-time subscriptions to work correctly

The full source code is available on GitHub:

tacck / amplify-vite-next-auth0

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.

Learn More

To learn more about Next.js, take a look at the following resources:

Next.js Documentation - learn about Next.js features and API.
Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more…

View on GitHub

Reference

Kihara, Takuya for AWS Community Builders

Mar 20

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

#amplify #auth0 #aws #oidc

9 min read

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!

DEV Community: Kihara, Takuya

Building a Todo App with Auth0 + AWS Amplify Gen2 + Next.js 16

Building a Todo App with Auth0 + AWS Amplify Gen2 + Next.js 16

Introduction

Prerequisites

Tech Stack

Architecture

Project Structure

System Diagram

Step 1: Auth0 Setup

Step 2: Project Initialization

Install Vite+ CLI

macOS with Homebrew

macOS/Linux with curl

Windows

Create a new Next.js project

Add dependencies

Step 3: Environment Variables

Step 4: Amplify Backend

4-1. Auth Resource (amplify/auth/resource.ts)

4-2. Backend Definition (amplify/backend.ts)

4-3. Data Resource (amplify/data/resource.ts)

Step 5: Auth0 SDK Configuration

5-1. Auth0 Client (app/lib/auth0.ts)

5-2. Middleware (proxy.ts)

Step 6: Server Component (app/page.tsx)

Step 7: Client Component with Real-time Subscriptions

Why share the client instance?

Step 8: Login/Logout Buttons

Gotchas and Troubleshooting

Cookie Size (HTTP 431)

dotenv Loading Order

Server vs. Client Component Boundary

Running the App

Conclusion

tacck / amplify-vite-next-auth0

Getting Started

Learn More

Deploy on Vercel

Reference

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

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

4-1. Auth Resource (`amplify/auth/resource.ts`)

4-2. Backend Definition (`amplify/backend.ts`)

4-3. Data Resource (`amplify/data/resource.ts`)

5-1. Auth0 Client (`app/lib/auth0.ts`)

5-2. Middleware (`proxy.ts`)

Step 6: Server Component (`app/page.tsx`)

`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