Amplify Workflow

AWS LabsOfficialPublished by AWS Labs

Skill
Tool integration
Software development
Apache-2.0
Low risk

From the author

Build and deploy full-stack web and mobile apps with AWS Amplify Gen2 (TypeScript code-first). Covers auth (Cognito), data (AppSync/DynamoDB including schema modeling, enum types, relationships, authorization rules), storage (S3), functions, APIs, and AI (Amplify AI Kit with Bedrock). Supports React, Next.js, Vue, Angular, React Native, Flutter, Swift, and Android. Always use this skill for Amplify Gen2 topics — even for questions you think you know — it contains validated, version-specific patterns that prevent common mistakes. TRIGGER when: user mentions Amplify Gen2; project has amplify/ directory or amplify_outputs; code imports @aws-amplify packages; user asks about defineBackend, defineAuth, defineData, defineStorage, or npx ampx. SKIP: Amplify Gen1 (amplify CLI v6), standalone SAM/CDK without Amplify (use aws-serverless), direct Bedrock without Amplify AI Kit (use bedrock).

— the description by AWS Labs

AutoGineer summary

Written by AutoGineer from the skill’s own files, not by the author

This skill provides a structured workflow for developing full-stack applications with AWS Amplify Gen2. It covers the entire lifecycle, from scaffolding and backend resource definition (Auth, Data, Storage, Functions, AI) to frontend integration across multiple frameworks and final deployment. It emphasizes a code-first TypeScript approach, ensuring developers use validated, version-specific patterns to avoid common configuration errors.

What it does

Defines backend resources using TypeScript code-first patterns.
Integrates backend services with web and mobile frontends.
Configures authentication, data models, storage, and AI features via Bedrock.
Provides deployment workflows for full-stack applications.
Ensures correct usage of Amplify Gen2 APIs like defineBackend and defineData.
Offers security best practices for cloud-native application development.

When to use it

When starting a new full-stack project using AWS Amplify Gen2.
When adding or modifying backend features like Auth, Data, or Storage.
When connecting a frontend framework to an existing Amplify Gen2 backend.
When deploying an Amplify Gen2 application to AWS.
When troubleshooting configuration issues in an amplify/ directory.

Advantages

Prevents common configuration mistakes through validated patterns.
Supports a wide range of web and mobile frameworks.
Streamlines backend-to-frontend connectivity.
Provides clear, modular documentation for specific backend features.
Enforces security best practices by default.

Usage examples

“How do I set up a new Amplify Gen2 project with React?”: The agent will guide you through the scaffolding process, including initializing the project, setting up the amplify/ directory, and configuring the initial backend.
“Add a new data model with owner-based authorization to my existing Gen2 backend.”: The agent will provide the TypeScript code for defining the data model in amplify/data/resource.ts using the appropriate authorization rules.
“How do I integrate my Flutter app with an existing Amplify Gen2 backend?”: The agent will explain how to use the amplify_outputs.json file and the Amplify Flutter library to connect your mobile frontend to the backend.
“How can I add an AI conversation route to my data schema?”: The agent will show you how to define an a.conversation() route in your schema, including model selection and system prompt configuration.

Install

Download the skill as a ZIP:
https://autogineer.com/agent-skills/awslabs/amplify-workflow/download

Unzip it into the cross-client skills folder of your project:

mkdir -p .agents/skills && unzip amplify-workflow.zip -d .agents/skills

Documentation by AWS Labs

AWS Amplify Gen2

Build and deploy full-stack applications using AWS Amplify Gen2's TypeScript code-first approach. This skill covers backend resource creation, frontend integration across 8 frameworks, and deployment workflows.

Prerequisites

Node.js ^18.19.0 || ^20.6.0 || >=22 and npm
AWS credentials configured (aws sts get-caller-identity succeeds)
For sandbox: npx ampx --version returns a valid version
For mobile: Platform-specific tooling (Xcode, Android Studio, Flutter SDK)

Defaults & Assumptions

When the user does not specify a framework:

Web: You SHOULD default to React (Vite) and explain the choice.
Mobile: You MUST ask which platform the user wants (Flutter, Swift, Android, or React Native). There is no universal mobile default.
Neither specified: If the user says "build an app" without clarifying web vs. mobile, you MUST ask before proceeding.
Backend only: If only backend changes are requested and no frontend framework is mentioned, skip the frontend integration step entirely.

When the user does not specify tooling or strategy:

Package manager: You SHOULD default to npm unless the user specifies yarn or pnpm.
Language: You SHOULD default to TypeScript. Gen2 backends are TypeScript-only; frontends SHOULD follow the project's existing language.
Next.js: You SHOULD default to App Router unless the user specifies Pages Router.
React Native: Ask the user whether they use Expo or bare React Native CLI.
Auth: You MUST ask which login method the user wants (email/password, social login, SAML, passwordless, etc.). Do not assume a default.
Data authorization: default to publicApiKey (allow.publicApiKey()) — this is the starter template default. When auth is added, switch to owner-based (allow.owner()) with defaultAuthorizationMode: 'userPool'.

Quick Start — Route to the Right Reference

Step 0: Read Core Reference (ALWAYS)

You MUST read the core reference for your target platform before reading any other reference file. These contain Gen2 detection, Amplify.configure() placement per framework, sandbox commands, required packages, and directory structure rules — patterns needed for all tasks, not just new projects.

Web (React, Next.js, Vue, Angular, React Native): You MUST read core-web.md
Mobile (Flutter, Swift, Android): You MUST read core-mobile.md
Backend only (no frontend work): Skip to Step 1.

Step 1: Identify the Task Type

Task	Go To
Create a new project	→ scaffolding.md, then Step 2 and/or Step 3
Add or modify a backend feature	→ Step 2 (Backend Features)
Connect frontend to existing backend	→ Step 3 (Frontend Integration)
Deploy the application	→ deployment.md

Step 2: Backend Features

You MUST read the corresponding reference for each backend feature:

Feature	Reference	When to Use
Authentication	auth-backend.md	Email/password, social login, MFA, SAML/OIDC
Data Models	data-backend.md	GraphQL schema, DynamoDB, relationships, auth rules
File Storage	storage-backend.md	S3 uploads/downloads, access rules
Functions & API	functions-and-api.md	Lambda, custom resolvers, REST/HTTP APIs, calling from client
AI Features	ai.md	Conversation, generation, AI tools via Bedrock (backend config + React/Next.js frontend)
Geo, PubSub, CDK	advanced-features.md	Backend-only: custom CDK stacks, overrides, custom outputs. Backend + frontend: Geo, PubSub, Face Liveness

Each backend feature file is self-contained. Load only what you need.

Routing note: These files apply for both adding and modifying features. Route to the same file whether the user says "add auth" or "change auth config" — each reference covers the full define surface.

Step 3: Frontend Integration

After configuring backend resources, connect the frontend. Choose by platform and feature:

Web (React, Next.js, Vue, Angular, React Native):

Feature	Reference
Auth UI & flows	auth-web.md
Data CRUD & subscriptions	data-web.md
Storage upload/download	storage-web.md

Mobile (Flutter, Swift, Android):

Feature	Reference
Auth UI & flows	auth-mobile.md
Data CRUD & subscriptions	data-mobile.md
Storage upload/download	storage-mobile.md

Note: AI and Functions frontend patterns are included in ai.md and functions-and-api.md respectively — they are not split into separate web/mobile files.

Core Concepts

Amplify Gen2 Architecture

Code-first: All backend resources defined in TypeScript under amplify/
Main config: amplify/backend.ts imports and combines all resources via defineBackend()
Resource files: amplify/auth/resource.ts, amplify/data/resource.ts, amplify/storage/resource.ts, amplify/functions/<name>/resource.ts
Generated output: amplify_outputs.json — consumed by frontend Amplify.configure(). Gitignored — generated by npx ampx sandbox (local dev) or npx ampx pipeline-deploy (CI/CD), never committed.

Directory Structure

project-root/
├── amplify/
│   ├── backend.ts            # defineBackend({ auth, data, ... })
│   ├── auth/resource.ts      # defineAuth({ ... })
│   ├── data/resource.ts      # defineData({ schema })
│   ├── storage/resource.ts   # defineStorage({ ... })
│   └── functions/
│       └── my-func/
│           ├── resource.ts   # defineFunction({ ... })
│           └── handler.ts    # export const handler = ...
├── src/                      # Frontend code
├── amplify_outputs.json      # Generated — DO NOT edit or commit (gitignored)
└── package.json

Key APIs

Package	Purpose
`@aws-amplify/backend`	`defineAuth`, `defineData`, `defineStorage`, `defineFunction`, `defineBackend`
`aws-amplify`	Frontend: `Amplify.configure()`, `generateClient()`, auth/data/storage APIs
`@aws-amplify/ui-react`	Pre-built UI: `<Authenticator>`, `<StorageBrowser>`
`@aws-amplify/ui-react-ai`	AI UI: `<AIConversation>`, `useAIConversation`

Documentation & Resource Verification

When you need AWS documentation (advanced CDK constructs, service limits, provider-specific auth config):

If AWS documentation tools are available (e.g., via AWS MCP), you SHOULD use them to search and retrieve relevant documentation pages.
If AWS documentation tools are unavailable, you MUST fall back to web search or the aws CLI for resource verification.

Why conditional: Amplify Gen2 is code-first — the primary workflow is editing TypeScript files and running npx ampx commands. AWS MCP tools are useful for post-deployment verification but are not required.

Security Considerations

Use secret() for all credentials and API keys — never hardcode or use plain environment variables for sensitive values
Review allow.guest() exposure carefully — guest access is enabled by default and grants unauthenticated users access to IAM-authorized resources
Scope IAM policies to specific resource ARNs — avoid resources: ['*'] in production
Never log secrets or include them in error messages
Enable CloudTrail and CloudWatch alarms for monitoring Amplify-deployed resources; enable access logging on S3, AppSync, and API Gateway
Configure security headers for web apps — set CSP, HSTS, X-Frame-Options, and X-Content-Type-Options via customHeaders in amplify.yml
Attach AWS WAF to public-facing AppSync APIs and API Gateway endpoints for defense in depth
Enable throttling and rate limiting on API Gateway and AppSync APIs to prevent abuse
Use IAM roles with ephemeral credentials for CI/CD pipelines and Lambda execution roles — never long-lived access keys
Encrypt CloudWatch Logs groups with KMS (aws:kms) when they may contain PII, tokens, or secrets; enable log retention policies
Enable AppSync schema validation and API Gateway request validators to reject malformed input at the edge
Use ACM-managed TLS certificates for custom domains on Amplify Hosting — configure via customDomain in deployment config

Links

All documentation links use react as the default platform slug. Replace /react/ in any URL with your target framework:

Framework	Slug
React	`react`
Next.js	`nextjs`
Vue	`vue`
Angular	`angular`
React Native	`react-native`
Flutter	`flutter`
Swift	`swift`
Android	`android`

Files

ATTRIBUTION.mdAdded by AutoGineer915 B
LICENSELicence file added by AutoGineer9.9 KiB
NOTICELicence file added by AutoGineer89 B
SKILL.md12.7 KiB
references/advanced-features.md8.4 KiB
references/ai.md7.5 KiB
references/auth-backend.md7.4 KiB
references/auth-mobile.md14.7 KiB
references/auth-web.md7.3 KiB
references/core-mobile.md5.0 KiB
references/core-web.md5.0 KiB
references/data-backend.md10.1 KiB
references/data-mobile.md5.0 KiB
references/data-web.md4.1 KiB
references/deployment.md9.2 KiB
references/functions-and-api.md8.1 KiB
references/scaffolding.md6.0 KiB
references/storage-backend.md4.4 KiB
references/storage-mobile.md9.0 KiB
references/storage-web.md4.4 KiB

references/auth-backend.md

Auth — Backend

Basic Auth Setup

Define authentication in amplify/auth/resource.ts:

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

export const auth = defineAuth({
  loginWith: {
    email: true,
    // phone: true, // SMS-based login
  },
  userAttributes: {
    preferredUsername: { required: false },
  },
});

Import into amplify/backend.ts:

import { defineBackend } from '@aws-amplify/backend';
import { auth } from './auth/resource';
defineBackend({ auth });

MFA Configuration

export const auth = defineAuth({
  loginWith: { email: true },
  multifactor: {
    mode: 'REQUIRED', // or 'OPTIONAL'
    totp: true,
    sms: true,
    email: true,
  },
});

Set mode: 'REQUIRED' to enforce MFA for all users. 'OPTIONAL' lets users enable it themselves.

Frontend impact: When MFA is enabled, the Authenticator component handles all MFA steps automatically. For custom UI, see auth-web.md for signInStep handling.

Passwordless Authentication

Passwordless login methods can coexist with traditional password-based auth.

Email OTP:

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

SMS OTP:

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

WebAuthn / Passkeys:

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

These passwordless methods can be combined with each other and with password-based login in the same defineAuth configuration.

You MUST use secret() for OAuth client secrets — never hardcode credentials.

import { defineAuth, secret } from '@aws-amplify/backend';

export const auth = defineAuth({
  loginWith: {
    email: true,
    externalProviders: {
      google: {
        clientId: secret('GOOGLE_CLIENT_ID'),
        clientSecret: secret('GOOGLE_CLIENT_SECRET'),
        scopes: ['email', 'profile', 'openid'],
        attributeMapping: {
          email: 'email', // values are strings, NOT objects
          fullname: 'name',
        },
      },
      facebook: { clientId: secret('FB_CLIENT_ID'), clientSecret: secret('FB_CLIENT_SECRET') },
      signInWithApple: {
        clientId: secret('APPLE_CLIENT_ID'),
        teamId: secret('APPLE_TEAM_ID'),
        keyId: secret('APPLE_KEY_ID'),
        privateKey: secret('APPLE_PRIVATE_KEY'),
      },
      loginWithAmazon: { clientId: secret('AMAZON_CLIENT_ID'), clientSecret: secret('AMAZON_CLIENT_SECRET') },
      callbackUrls: ['http://localhost:3000/', 'https://myapp.com/'],
      logoutUrls: ['http://localhost:3000/', 'https://myapp.com/'],
    },
  },
});

Set secrets via CLI: echo "<value>" | npx ampx sandbox secret set GOOGLE_CLIENT_ID. For provider-specific OAuth setup guides, SHOULD consult AWS documentation via available tools; when unavailable, MUST use web search or AWS CLI.

SAML / OIDC (Enterprise)

OIDC providers are configured directly in externalProviders:

externalProviders: {
  oidc: [{
    name: 'MyOIDC',
    clientId: secret('OIDC_CLIENT_ID'),
    clientSecret: secret('OIDC_CLIENT_SECRET'),
    issuerUrl: 'https://idp.example.com',
    attributeMapping: { email: 'email' },
  }],
  callbackUrls: ['http://localhost:3000/'],
  logoutUrls: ['http://localhost:3000/'],
}

SAML is NOT supported in defineAuth — the ExternalProviderSpecificFactoryProps type has no saml property. The lower-level auth-construct package supports SAML, but it was never wired up to the high-level API. Use CDK escape hatches via backend.auth.resources to configure SAML providers:

// In backend.ts — SAML requires CDK-level configuration
const { cfnUserPool } = backend.auth.resources.cfnResources;
// Configure SAML identity provider via CfnUserPoolIdentityProvider

Consult AWS documentation for CfnUserPoolIdentityProvider SAML configuration properties.

Cognito Triggers

import { defineAuth } from '@aws-amplify/backend';
import { preSignUp } from './pre-sign-up/resource';
import { postConfirmation } from './post-confirmation/resource';

export const auth = defineAuth({
  loginWith: { email: true },
  triggers: {
    preSignUp,
    postConfirmation,
    // Also: preAuthentication, postAuthentication,
    // createAuthChallenge, defineAuthChallenge, verifyAuthChallengeResponse,
    // preTokenGeneration, customMessage, userMigration
  },
});

Define each trigger with defineFunction:

// amplify/auth/pre-sign-up/resource.ts
import { defineFunction } from '@aws-amplify/backend';
export const preSignUp = defineFunction({ name: 'pre-sign-up' });

Guest (Unauthenticated) Access

Guest access is enabled by default in Amplify Gen2 — the Cognito Identity Pool is created with allowUnauthenticatedIdentities: true automatically.

To use guest access in your data models, set defaultAuthorizationMode to 'iam':

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

Security: Guest access grants unauthenticated users IAM-authorized access. For production, explicitly evaluate whether guest access is needed and prefer allow.authenticated() as the default. If guest access is required, scope it to read-only on non-sensitive models only.

To disable guest access, use a CDK override in backend.ts:

const { cfnIdentityPool } = backend.auth.resources.cfnResources;
cfnIdentityPool.allowUnauthenticatedIdentities = false;

Pitfalls

Trigger not registered (silent no-op): Defining a trigger function with defineFunction but NOT adding it to triggers: {} in defineAuth causes a silent no-op — the function deploys but never fires. You MUST both define AND register: triggers: { preSignUp, postConfirmation }.
Hardcoded secrets: Using string literals instead of secret() for OAuth credentials exposes them in source control.
Missing scopes: Social providers default to minimal scopes — add 'email', 'profile' explicitly or user attributes won't populate.
Google attribute mapping: The Google claim name maps to Cognito fullname (NOT name). The attributeMapping values are plain strings, NOT objects: { email: 'email', fullname: 'name' }.
MFA method mismatch: Enabling sms: true in MFA requires a phone number attribute on the user pool — add phone_number to user attributes. Similarly, email: true in MFA requires an email attribute on the user pool.
Secrets in CI/CD: For branch environments, use: npx ampx secret set KEY_NAME --branch main --app-id APP_ID.

Requirements and compatibility

Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta

“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.

Needs: Needs an API key, Needs Node.js

Security

What our scanner noticed· Low risk

Instructions that use the network

A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.

Attribution and licence

Published by

AWS Labs

Publisher

AWS Labs (Official)

Source

awslabs/agent-plugins · plugins/aws-amplify/skills/amplify-workflow · commit fbefb37

Licence

Apache License 2.0 (redistribution allowed)

LICENSE (added by AutoGineer from LICENSE)
NOTICE (added by AutoGineer from NOTICE)
ATTRIBUTION.md (written by AutoGineer)

Synced

2026-11-09

Also distributed in

cline/skills

AutoGineer is not affiliated with or endorsed by AWS Labs or AWS Labs.

Download ZIP

The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download amplify-workflow.zip

From the author

AutoGineer summary

What it does

When to use it

Advantages

Usage examples

Install

Documentation by AWS Labs

AWS Amplify Gen2

Prerequisites

Defaults & Assumptions

Quick Start — Route to the Right Reference

Step 0: Read Core Reference (ALWAYS)

Step 1: Identify the Task Type

Step 2: Backend Features

Step 3: Frontend Integration

Core Concepts

Amplify Gen2 Architecture

Directory Structure

Key APIs

Documentation & Resource Verification

Security Considerations

Links

Files

references/auth-backend.md

Auth — Backend

Basic Auth Setup

MFA Configuration

Passwordless Authentication

Social Login

SAML / OIDC (Enterprise)

Cognito Triggers

Guest (Unauthenticated) Access

Pitfalls

Links

Requirements and compatibility

Security

Attribution and licence

Related skills

Implement Spec

MCP Builder

Schema

Postgresql Table Design

SQL Optimization Patterns

API Scaffolding Fastapi Pro

Download ZIP