/aws-amplify

Auth — Web

Prerequisites: Project initialized, amplify_outputs.json exists (from npx ampx sandbox), and Amplify.configure(outputs) called in app entry point.

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

Authenticator Component

Props: loginMechanisms={['email']}, socialProviders={['google']}. Slot: {({ signOut, user }) => ...} — access user?.signInDetails?.loginId. Next.js SSR: wrap layout in <Authenticator.Provider>, use useAuthenticator hook.

Angular

Angular cannot resolve npm CSS via @import in stylesheets. Add to angular.json instead:

"styles": [
  "node_modules/@aws-amplify/ui-angular/theme.css",
  "src/styles.css"
]

Manual Auth Flows

Imports from aws-amplify/auth: signIn, signUp, confirmSignUp, confirmSignIn, signOut, resetPassword.

After signIn(), switch on result.nextStep.signInStep to handle each possible challenge:

OAuth/social: signInWithRedirect({ provider: 'Google' }).

Session Management

Tokens refresh automatically.

Device Tracking

import { rememberDevice, forgetDevice, fetchDevices } from 'aws-amplify/auth';

await rememberDevice();                    // Remember current device for MFA
await forgetDevice();                      // Forget current device
const { devices } = await fetchDevices();  // List remembered devices

Next.js Server-Side Auth

For server components and route handlers, use cookie-based auth:

For server-side auth + data access in Next.js, see data-web.md § Server-Side (Next.js).

For server actions and middleware, use createServerRunner from @aws-amplify/adapter-nextjs:

import { createServerRunner } from '@aws-amplify/adapter-nextjs';
import outputs from '@/amplify_outputs.json';

export const { runWithAmplifyServerContext } = createServerRunner({ config: outputs });

React Native

React Native uses the same aws-amplify auth APIs as web. All manual auth flows (signIn, signUp, confirmSignIn, etc.) and session management APIs work identically.

Setup

Import order matters: react-native-get-random-values must be the FIRST import in the entry file — it polyfills crypto.getRandomValues() which the Amplify SDK requires for token generation and is missing in React Native's JavaScript runtime. @aws-amplify/react-native must come before aws-amplify. See SKILL.md § Framework Setup for the full required import order.

npm install @aws-amplify/ui-react-native @react-native-async-storage/async-storage

Same <Authenticator> prop API as web React (from @aws-amplify/ui-react-native). @react-native-async-storage/async-storage is required for token persistence.

Social Login

signInWithRedirect({ provider: 'Google' }) — same as web. Ensure callback URLs in defineAuth include your Expo scheme.

Pitfalls

• Missing CSS import: Without the styles.css import, the <Authenticator> renders as unstyled HTML.
• Unhandled sign-in steps: Not switching on ALL signInStep values causes the flow to silently stall on MFA or password-reset challenges. Handle every possible value — missing any causes the auth flow to hang with no visible error.
• MFA timing: Calling updateMFAPreference() before authentication completes fails silently because the user is not yet authenticated. Wait until signInStep is 'DONE'.
• OAuth in multi-page apps: Call Hub.listen('auth', ...) to capture the OAuth redirect callback on page reload.
• Vue component syntax: Vue requires PascalCase <Authenticator> component syntax (not kebab-case <authenticator>).

Links

• Auth Overview (React)
• Set Up Auth (React)
• Connect Auth Frontend (React)
• Auth Overview (Next.js)
• Set Up Auth (Next.js)
• Connect Auth Frontend (Next.js)
• Auth Overview (React Native)
• Set Up Auth (React Native)
• Connect Auth Frontend (React Native)