Amplify Workflow
AWS LabsOfficialPublished by AWS Labs
- Skill
- Tool integration
- Software development
- Apache-2.0
- Low risk
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/downloadUnzip 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-identitysucceeds)For sandbox:
npx ampx --versionreturns a valid versionFor 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()) withdefaultAuthorizationMode: '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.tsimports and combines all resources viadefineBackend()Resource files:
amplify/auth/resource.ts,amplify/data/resource.ts,amplify/storage/resource.ts,amplify/functions/<name>/resource.tsGenerated output:
amplify_outputs.json— consumed by frontendAmplify.configure(). Gitignored — generated bynpx ampx sandbox(local dev) ornpx 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.jsonKey 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
awsCLI for resource verification.
Why conditional: Amplify Gen2 is code-first — the primary workflow is editing TypeScript files and running
npx ampxcommands. 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 valuesReview
allow.guest()exposure carefully — guest access is enabled by default and grants unauthenticated users access to IAM-authorized resourcesScope IAM policies to specific resource ARNs — avoid
resources: ['*']in productionNever 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
customHeadersinamplify.ymlAttach 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
customDomainin deployment config
Links
All documentation links use
reactas 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-mobile.md
Auth — Mobile
Backend required: Auth must be defined in
amplify/auth/resource.tsusingdefineAuth— see auth-backend.md.
Authenticator Component (Recommended)
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.0Usage — 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…):
| Package | URL | Libraries |
|---|---|---|
| Amplify Library for Swift | https://github.com/aws-amplify/amplify-swift | Amplify, AWSCognitoAuthPlugin |
| Amplify UI Swift Authenticator | https://github.com/aws-amplify/amplify-ui-swift-authenticator | Authenticator |
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 AmplifySign 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.AuthSignUpOptionsSign 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 toMainActivityinAndroidManifest.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 beforeconfigure()on all platforms — see core-mobile.md.Missing INTERNET permission (Android): Without
<uses-permission android:name="android.permission.INTERNET"/>inAndroidManifest.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
callbackUrlsin yourdefineAuthbackend resource. A mismatch causes a silent redirect failure.Unhandled auth steps (Custom UI only): When building custom sign-in flows, the
nextStepreturned fromsignInmust be handled. Ignoring steps like MFA confirmation causes the auth flow to stall silently. The Authenticator component handles all steps automatically.
Links
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 or AWS Labs.
Download ZIP
The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download amplify-workflow.zip