Generated banner for Amplify Workflow
Generated logo for Amplify Workflow

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

  1. Download the skill as a ZIP:

    https://mp-staging.autogineer.com/agent-skills/awslabs/amplify-workflow/download
  2. 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
TaskGo 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:

FeatureReferenceWhen to Use
Authenticationauth-backend.mdEmail/password, social login, MFA, SAML/OIDC
Data Modelsdata-backend.mdGraphQL schema, DynamoDB, relationships, auth rules
File Storagestorage-backend.mdS3 uploads/downloads, access rules
Functions & APIfunctions-and-api.mdLambda, custom resolvers, REST/HTTP APIs, calling from client
AI Featuresai.mdConversation, generation, AI tools via Bedrock (backend config + React/Next.js frontend)
Geo, PubSub, CDKadvanced-features.mdBackend-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):

FeatureReference
Auth UI & flowsauth-web.md
Data CRUD & subscriptionsdata-web.md
Storage upload/downloadstorage-web.md

Mobile (Flutter, Swift, Android):

FeatureReference
Auth UI & flowsauth-mobile.md
Data CRUD & subscriptionsdata-mobile.md
Storage upload/downloadstorage-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
PackagePurpose
@aws-amplify/backenddefineAuth, defineData, defineStorage, defineFunction, defineBackend
aws-amplifyFrontend: Amplify.configure(), generateClient(), auth/data/storage APIs
@aws-amplify/ui-reactPre-built UI: <Authenticator>, <StorageBrowser>
@aws-amplify/ui-react-aiAI UI: <AIConversation>, useAIConversation

Documentation & Resource Verification

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

  1. If AWS documentation tools are available (e.g., via AWS MCP), you SHOULD use them to search and retrieve relevant documentation pages.

  2. 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

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

FrameworkSlug
Reactreact
Next.jsnextjs
Vuevue
Angularangular
React Nativereact-native
Flutterflutter
Swiftswift
Androidandroid

Files

references/auth-mobile.md

Auth — Mobile

Backend required: Auth must be defined in amplify/auth/resource.ts using defineAuth — see auth-backend.md.

All three mobile platforms provide a drop-in Authenticator component that handles sign-in, sign-up, MFA, social login, passwordless, password reset, and all intermediate auth states automatically. Use it unless you need a fully custom UI. Zero manual signInStep handling is required.

Passwordless: The Authenticator component handles passwordless flows (email OTP, SMS OTP, and WebAuthn/passkey) automatically when configured in defineAuth. No custom UI code needed for passwordless authentication. To default to passkeys, see the platform-specific "Passwordless / user-choice flow" examples below. Custom OTP/passkey flows require additional challenge handling.

Flutter

Dependencies — add to pubspec.yaml:

dependencies:
  amplify_flutter: ^2.0.0
  amplify_auth_cognito: ^2.0.0
  amplify_authenticator: ^2.0.0

Usage — wrap your MaterialApp and set its builder:

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 'amplify_outputs.dart';

class MyApp extends StatefulWidget {
  const MyApp({super.key});
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  void initState() {
    super.initState();
    _configureAmplify();
  }

  void _configureAmplify() async {
    try {
      await Amplify.addPlugin(AmplifyAuthCognito());
      await Amplify.configure(amplifyOutputs);
    } on Exception catch (e) {
      safePrint('Error configuring Amplify: $e');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Authenticator(
      child: MaterialApp(
        builder: Authenticator.builder(),
        home: const Scaffold(
          body: Center(child: Text('You are logged in!')),
        ),
      ),
    );
  }
}
Swift (Apple platforms)

Supports iOS 13+, macOS 12+, tvOS 13+, watchOS 9+, visionOS 1+ (preview). Passkeys require iOS 17.4+, macOS 13.5+, or visionOS 1.0+.

Dependencies — add both SPM packages in Xcode (File > Add Packages…):

PackageURLLibraries
Amplify Library for Swifthttps://github.com/aws-amplify/amplify-swiftAmplify, AWSCognitoAuthPlugin
Amplify UI Swift Authenticatorhttps://github.com/aws-amplify/amplify-ui-swift-authenticatorAuthenticator

SPM versioning: For both packages, select "Up to Next Major Version" in Xcode's dependency rule. Do NOT pin to a specific branch (e.g., main) — use "Up to Next Major Version" to get compatible updates automatically.

Usage — SwiftUI entry point:

import Amplify
import Authenticator
import AWSCognitoAuthPlugin
import SwiftUI

@main
struct MyApp: App {
    init() {
        do {
            try Amplify.add(plugin: AWSCognitoAuthPlugin())
            try Amplify.configure(with: .amplifyOutputs)
        } catch {
            print("Unable to configure Amplify \(error)")
        }
    }

    var body: some Scene {
        WindowGroup {
            Authenticator { state in
                VStack {
                    Text("Hello, \(state.user.username)")
                    Button("Sign out") {
                        Task { await state.signOut() }
                    }
                }
            }
        }
    }
}

Passwordless / user-choice flow:

Authenticator(authenticationFlow: .userChoice(
    preferredAuthFactor: .webAuthn
)) { state in
    Text("Welcome \(state.user.username)!")
}
Android (Kotlin)

Dependencies — add to your app's build.gradle.kts:

// Enable Jetpack Compose
android {
    compileOptions {
        isCoreLibraryDesugaringEnabled = true
        sourceCompatibility = JavaVersion.VERSION_1_8
        targetCompatibility = JavaVersion.VERSION_1_8
    }
    buildFeatures { compose = true }
    composeOptions { kotlinCompilerExtensionVersion = "1.5.3" }
}

dependencies {
    implementation("com.amplifyframework.ui:authenticator:1.4.0")
    coreLibraryDesugaring("com.android.tools:desugar_jdk_libs:2.0.4")
}

INTERNET permission is required in AndroidManifest.xml:

<uses-permission android:name="android.permission.INTERNET"/>

Configure — in your Application.onCreate():

try {
    Amplify.addPlugin(AWSCognitoAuthPlugin())
    Amplify.configure(AmplifyOutputs(R.raw.amplify_outputs), applicationContext)
} catch (error: AmplifyException) {
    Log.e("MyApp", "Could not initialize Amplify", error)
}

Usage — Jetpack Compose:

import com.amplifyframework.ui.authenticator.ui.Authenticator
import com.amplifyframework.ui.authenticator.SignedInState

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Authenticator { state ->
                Column {
                    Text("Signed in as ${state.user.username}")
                    val scope = rememberCoroutineScope()
                    Button(onClick = { scope.launch { state.signOut() } }) {
                        Text("Sign Out")
                    }
                }
            }
        }
    }
}

Passwordless / user-choice flow:

val authenticatorState = rememberAuthenticatorState(
    authenticationFlow = AuthenticationFlow.UserChoice(
        preferredAuthFactor = AuthFactor.WebAuthn
    )
)
Authenticator(state = authenticatorState) { state ->
    Text("Welcome ${state.user.username}!")
}

Custom UI

Use the low-level Auth APIs when you need full control over the UI. Each platform returns a nextStep from signIn / signUp — switch on it and call confirmSignIn as needed. The Authenticator handles all these steps automatically; the list below is for reference when building custom flows.

Flutter
import 'package:amplify_flutter/amplify_flutter.dart';

Sign in:

final result = await Amplify.Auth.signIn(
  username: username,
  password: password,
);
if (result.isSignedIn) {
  safePrint('Sign in complete');
} else {
  // Handle result.nextStep.signInStep — e.g.:
  //   confirmSignInWithSmsMfaCode → prompt for SMS code, call confirmSignIn
  //   confirmSignInWithTotpMfaCode → prompt for TOTP code, call confirmSignIn
  //   confirmSignInWithNewPassword → prompt new password, call confirmSignIn
  //   done → authenticated
}

Confirm sign-in (for MFA / challenge steps):

final result = await Amplify.Auth.confirmSignIn(
  confirmationValue: codeFromUser,
);

Sign up:

final result = await Amplify.Auth.signUp(
  username: username,
  password: password,
  options: SignUpOptions(
    userAttributes: {AuthUserAttributeKey.email: email},
  ),
);
if (result.nextStep.signUpStep == AuthSignUpStep.confirmSignUp) {
  // Prompt for confirmation code
}

Confirm sign-up:

await Amplify.Auth.confirmSignUp(
  username: username,
  confirmationCode: code,
);
Swift (Apple platforms)

Uses async/await.

import Amplify

Sign in:

do {
    let result = try await Amplify.Auth.signIn(
        username: username,
        password: password
    )
    switch result.nextStep {
    case .done:
        print("Sign in succeeded")
    case .confirmSignInWithSMSMFACode(let details, _):
        print("SMS code sent to \(details.destination)")
        // Prompt user, then call confirmSignIn
    case .confirmSignInWithTOTPCode:
        // Prompt for TOTP code, then call confirmSignIn
    default:
        print("Next step: \(result.nextStep)")
    }
} catch let error as AuthError {
    print("Sign in failed: \(error)")
}

Confirm sign-in:

let result = try await Amplify.Auth.confirmSignIn(
    challengeResponse: codeFromUser
)

Sign up:

let options = AuthSignUpRequest.Options(
    userAttributes: [AuthUserAttribute(.email, value: email)]
)
let result = try await Amplify.Auth.signUp(
    username: username,
    password: password,
    options: options
)
if case .confirmUser(let details, _, _) = result.nextStep {
    print("Confirmation sent to \(String(describing: details))")
}

Confirm sign-up:

try await Amplify.Auth.confirmSignUp(
    for: username,
    confirmationCode: code
)
Android (Kotlin)

Android supports both Kotlin coroutines and callbacks. Coroutines are recommended.

import com.amplifyframework.kotlin.core.Amplify
import com.amplifyframework.auth.AuthUserAttributeKey
import com.amplifyframework.auth.options.AuthSignUpOptions

Sign in (coroutines — recommended):

try {
    val result = Amplify.Auth.signIn("username", "password")
    if (result.isSignedIn) {
        Log.i("Auth", "Sign in succeeded")
    } else {
        // Handle result.nextStep.signInStep — e.g.:
        //   CONFIRM_SIGN_IN_WITH_SMS_MFA_CODE → prompt SMS code
        //   CONFIRM_SIGN_IN_WITH_TOTP_CODE → prompt TOTP code
        //   DONE → authenticated
        Log.i("Auth", "Next step: ${result.nextStep.signInStep}")
    }
} catch (error: AuthException) {
    Log.e("Auth", "Sign in failed", error)
}

Sign in (callbacks — alternative):

import com.amplifyframework.core.Amplify  // Java facade for callback style

Amplify.Auth.signIn("username", "password",
    { result -> Log.i("Auth", "Signed in: ${result.isSignedIn}") },
    { error -> Log.e("Auth", "Sign in failed", error) }
)

Confirm sign-in (coroutines):

try {
    val result = Amplify.Auth.confirmSignIn("code from user")
    Log.i("Auth", "Confirmed: $result")
} catch (error: AuthException) {
    Log.e("Auth", "Confirm failed", error)
}

Sign up (coroutines):

val options = AuthSignUpOptions.builder()
    .userAttributes(listOf(
        AuthUserAttribute(AuthUserAttributeKey.email(), email)
    ))
    .build()
try {
    val result = Amplify.Auth.signUp("username", "password", options)
    Log.i("Auth", "Sign up step: ${result.nextStep.signUpStep}")
} catch (error: AuthException) {
    Log.e("Auth", "Sign up failed", error)
}

Confirm sign-up (coroutines):

try {
    Amplify.Auth.confirmSignUp("username", "123456")
} catch (error: AuthException) {
    Log.e("Auth", "Confirm sign-up failed", error)
}

Social Login on Mobile

Social sign-in uses an OAuth web UI redirect. Callback URLs must match the callbackUrls configured in your defineAuth backend resource.

Flutter:

final result = await Amplify.Auth.signInWithWebUI(
  provider: AuthProvider.google,
);

Platform setup for Flutter OAuth:

  • Android: Add <intent-filter> with your callback scheme to MainActivity in AndroidManifest.xml.

  • iOS: No additional platform configuration required.

  • macOS: Enable App Sandbox → "Incoming Connections (Server)" in Xcode.

Swift:

let result = try await Amplify.Auth.signInWithWebUI(
    for: .google,
    presentationAnchor: window
)

Platform setup: Add callback URL scheme to Info.plist under CFBundleURLSchemes.

Android (coroutines):

try {
    val result = Amplify.Auth.signInWithSocialWebUI(
        AuthProvider.google(), activity
    )
    Log.i("Auth", "Social sign-in OK: $result")
} catch (error: AuthException) {
    Log.e("Auth", "Social sign-in failed", error)
}

Platform setup: Add HostedUIRedirectActivity with your callback scheme to AndroidManifest.xml:

<activity
    android:name="com.amplifyframework.auth.cognito.activities.HostedUIRedirectActivity"
    android:exported="true">
    <intent-filter>
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <data android:scheme="myapp" />
    </intent-filter>
</activity>

Pitfalls

  • Plugin order: addPlugin() / add(plugin:) MUST be called before configure() on all platforms — see core-mobile.md.

  • Missing INTERNET permission (Android): Without <uses-permission android:name="android.permission.INTERNET"/> in AndroidManifest.xml, all auth calls fail with a network error.

  • Callback URL mismatch (social login): OAuth redirect URLs configured in the native app (Info.plist / AndroidManifest.xml / Flutter scheme) MUST match the callbackUrls in your defineAuth backend resource. A mismatch causes a silent redirect failure.

  • Unhandled auth steps (Custom UI only): When building custom sign-in flows, the nextStep returned from signIn must be handled. Ignoring steps like MFA confirmation causes the auth flow to stall silently. The Authenticator component handles all steps automatically.

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
Also distributed in
cline/skills

AutoGineer is not affiliated with or endorsed by AWS Labs.

Download ZIP

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