AWS Amplify integration in mobile app

AWS Amplify Integration in Mobile Applications

AWS Amplify is a set of libraries and CLI for connecting mobile app to AWS cloud services: authentication via Cognito, API via AppSync (GraphQL) or REST Gateway, storage via S3, push notifications via Pinpoint. Amplify Gen 2 (2024) moved to TypeScript-based configuration instead of JSON, simplifying typing and CI/CD integration.

Authentication via Cognito + Amplify Auth

Most common entry point is Auth. Setup takes 20 minutes but hides nuances.

React Native:

import { Amplify } from 'aws-amplify';
import { signIn, signUp, confirmSignUp, fetchAuthSession } from 'aws-amplify/auth';
import outputs from './amplify_outputs.json';

Amplify.configure(outputs);

// Sign in
const { isSignedIn } = await signIn({ username: email, password });

// JWT token for API requests
const session = await fetchAuthSession();
const token = session.tokens?.idToken?.toString();

Amplify UI Components (@aws-amplify/ui-react-native) provides ready Authenticator component — LoginForm + SignUp + MFA in one line. Default look, but customizable via components prop.

Flutter:

await Amplify.addPlugins([AmplifyAuthCognito()]);
await Amplify.configure(amplifyconfig);

final result = await Amplify.Auth.signIn(
  username: email,
  password: password,
);

AppSync GraphQL: Easy to Get Wrong

AppSync is managed GraphQL with subscription on changes via WebSocket. Amplify generates typed client from schema:

import { generateClient } from 'aws-amplify/data';
import type { Schema } from './amplify/data/resource';

const client = generateClient<Schema>();

// Real-time query
const sub = client.models.Post.observeQuery().subscribe({
  next: ({ items }) => setPosts(items),
});

N+1 Problem in AppSync. If resolver not configured with batch resolver or DynamoDB Single Table Design, each list item makes separate DB request. On 50 posts — 51 requests. Solution: BatchInvoke in AppSync resolver or Pipeline resolvers.

Offline mode. Amplify DataStore syncs data with AppSync and stores locally in SQLite. On connection loss, mutations queue and send on recovery. Configuration requires @model directives in GraphQL schema and DataStore.configure(). Conflicts resolved via ConflictResolutionStrategy (Auto Merge, Optimistic Concurrency, Custom Lambda).

S3: File Upload

import { uploadData, getUrl } from 'aws-amplify/storage';

const result = await uploadData({
  key: `avatars/${userId}.jpg`,
  data: fileBlob,
  options: {
    accessLevel: 'protected',
    contentType: 'image/jpeg',
    onProgress: ({ loaded, total }) => setProgress(loaded / total),
  },
}).result;

const { url } = await getUrl({ key: result.key, options: { accessLevel: 'protected' } });

accessLevel: 'protected' — file accessible only to owner (via Cognito Identity ID in path). 'public' — everyone. 'private' — owner only without public URL. Wrong accessLevel is common cause of 403 when accessing others' files.

Typical Integration Pitfalls

React Native bundle size. aws-amplify with full configuration adds ~500KB to JS bundle. Use modular imports: import { signIn } from 'aws-amplify/auth' instead of import Amplify from 'aws-amplify'.

CORS on REST API. Amplify CLI creates API Gateway with CORS, but manually added resources need CORS per method + preflight OPTIONS.

Refresh tokens on iOS. Amplify stores tokens in Keychain. On TestFlight update without deletion, old tokens remain. signOut({ global: true }) invalidates all backend sessions.

What's Included in Integration

Amplify CLI / Gen 2 config setup. Auth connection (Cognito) with needed flows (email/Google/Apple Sign In). API setup (AppSync or REST). Offline mode via DataStore (if needed). Storage for files. Amplify setup in CI/CD.

Timeline

Basic Auth + API integration: 3–4 days. Full integration with DataStore + Storage + Push: 1–2 weeks. Cost after requirement analysis and service selection.