Clean Architecture on Mobile

src/features/auth/
├── domain/
│   ├── entities.ts          # User, Session
│   ├── ports.ts             # AuthGateway, TokenStorage (interfaces)
│   └── use-cases/
│       ├── signIn.ts
│       └── signOut.ts
├── adapters/
│   ├── restAuthGateway.ts
│   └── secureTokenStorage.ts
├── model/
│   └── useSignIn.ts         # hook wires use case + React state
└── ui/
    └── SignInScreen.tsx

// domain/ports.ts - interfaces only
import type { Session, User } from "./entities";
 
export type AuthGateway = {
  authenticate(email: string, password: string): Promise<User>;
};
 
export type TokenStorage = {
  save(session: Session): Promise<void>;
  load(): Promise<Session | null>;
  clear(): Promise<void>;
};

// src/features/auth/domain/entities.ts
export type User = {
  id: string;
  email: string;
  displayName: string;
};
 
export type Session = {
  accessToken: string;
  user: User;
};

// src/features/auth/domain/ports.ts
import type { Session, User } from "./entities";
 
export type AuthGateway = {
  authenticate(email: string, password: string): Promise<User>;
};
 
export type TokenStorage = {
  save(session: Session): Promise<void>;
  load(): Promise<Session | null>;
  clear(): Promise<void>;
};

// src/features/auth/domain/use-cases/signIn.ts
import type { Session } from "../entities";
import type { AuthGateway, TokenStorage } from "../ports";
 
export type SignInDeps = {
  authGateway: AuthGateway;
  tokenStorage: TokenStorage;
  createSession: (user: Awaited<ReturnType<AuthGateway["authenticate"]>>) => Session;
};
 
export type SignInResult =
  | { ok: true; session: Session }
  | { ok: false; error: "invalid_credentials" | "network" | "unknown" };
 
export async function signIn(
  deps: SignInDeps,
  input: { email: string; password: string }
): Promise<SignInResult> {
  try {
    const user = await deps.authGateway.authenticate(input.email, input.password);
    const session = deps.createSession(user);
    await deps.tokenStorage.save(session);
    return { ok: true, session };
  } catch (e) {
    if (e instanceof Error && e.message === "INVALID_CREDENTIALS") {
      return { ok: false, error: "invalid_credentials" };
    }
    if (e instanceof Error && e.message === "NETWORK") {
      return { ok: false, error: "network" };
    }
    return { ok: false, error: "unknown" };
  }
}

// src/features/auth/adapters/restAuthGateway.ts
import type { AuthGateway } from "../domain/ports";
import type { User } from "../domain/entities";
 
export function createRestAuthGateway(baseUrl: string): AuthGateway {
  return {
    async authenticate(email, password) {
      const response = await fetch(`${baseUrl}/auth/login`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ email, password }),
      });
      if (response.status === 401) throw new Error("INVALID_CREDENTIALS");
      if (!response.ok) throw new Error("NETWORK");
      return response.json() as Promise<User>;
    },
  };
}

// src/features/auth/adapters/secureTokenStorage.ts
import * as SecureStore from "expo-secure-store";
import type { TokenStorage } from "../domain/ports";
import type { Session } from "../domain/entities";
 
const KEY = "session";
 
export function createSecureTokenStorage(): TokenStorage {
  return {
    async save(session) {
      await SecureStore.setItemAsync(KEY, JSON.stringify(session));
    },
    async load() {
      const raw = await SecureStore.getItemAsync(KEY);
      return raw ? (JSON.parse(raw) as Session) : null;
    },
    async clear() {
      await SecureStore.deleteItemAsync(KEY);
    },
  };
}

// src/features/auth/model/useSignIn.ts
import { useCallback, useState } from "react";
import { signIn } from "../domain/use-cases/signIn";
import { createRestAuthGateway } from "../adapters/restAuthGateway";
import { createSecureTokenStorage } from "../adapters/secureTokenStorage";
import { getAppConfig } from "@/shared/config/env";
import type { Session } from "../domain/entities";
 
const authGateway = createRestAuthGateway(getAppConfig().apiBaseUrl);
const tokenStorage = createSecureTokenStorage();
 
export function useSignIn() {
  const [pending, setPending] = useState(false);
  const [error, setError] = useState<string | null>(null);
 
  const submit = useCallback(async (email: string, password: string): Promise<Session | null> => {
    setPending(true);
    setError(null);
    const result = await signIn(
      {
        authGateway,
        tokenStorage,
        createSession: (user) => ({ accessToken: `mock-token-${user.id}`, user }),
      },
      { email, password }
    );
    setPending(false);
    if (!result.ok) {
      setError(result.error);
      return null;
    }
    return result.session;
  }, []);
 
  return { submit, pending, error };
}

// src/features/auth/ui/SignInScreen.tsx
import { useState } from "react";
import { StyleSheet, Text, TextInput, View } from "react-native";
import { Button } from "@/shared/ui/Button";
import { Screen } from "@/shared/ui/Screen";
import { useSignIn } from "../model/useSignIn";
 
type Props = { onSignedIn: () => void };
 
export function SignInScreen({ onSignedIn }: Props) {
  const { submit, pending, error } = useSignIn();
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
 
  return (
    <Screen>
      <View style={styles.form}>
        <TextInput
          style={styles.input}
          autoCapitalize="none"
          keyboardType="email-address"
          placeholder="Email"
          value={email}
          onChangeText={setEmail}
        />
        <TextInput
          style={styles.input}
          secureTextEntry
          placeholder="Password"
          value={password}
          onChangeText={setPassword}
        />
        {error ? <Text style={styles.error}>{error}</Text> : null}
        <Button
          label={pending ? "Signing in…" : "Sign in"}
          disabled={pending}
          onPress={async () => {
            const session = await submit(email, password);
            if (session) onSignedIn();
          }}
        />
      </View>
    </Screen>
  );
}
 
const styles = StyleSheet.create({
  form: { gap: 12, padding: 24 },
  input: { borderWidth: 1, borderColor: "#d1d5db", borderRadius: 8, padding: 12 },
  error: { color: "#dc2626" },
});

// Test double - no framework required
const fakeGateway: AuthGateway = {
  authenticate: async () => ({ id: "1", email: "a@b.c", displayName: "Test" }),
};
 
const fakeStorage: TokenStorage = {
  saved: null as Session | null,
  async save(s) { this.saved = s; },
  async load() { return this.saved; },
  async clear() { this.saved = null; },
};