@simple-auth-kit/cli 1.0.0

package/registry/mobile-apps/bare-rn/variants/workspaces/src/screens/WorkspaceSelectScreen.tsx

@@ -0,0 +1,165 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { ActivityIndicator, FlatList, Pressable, RefreshControl, Text, View } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import type { WorkspaceSummary } from '@simple-auth-kit/auth-client';
+import { FormInput } from '../components/FormInput';
+import { PrimaryButton } from '../components/PrimaryButton';
+import { useActiveWorkspaceId } from '../workspace/activeWorkspace';
+import { useAuthStore } from '../store/authStore';
+import { useWorkspaceStore } from '../store/workspaceStore';
+
+/**
+ * `"gate"` is the post-login stop when no workspace is active — it cannot be dismissed, and
+ * offers logging out as the only way past without choosing. `"switch"` is the same screen
+ * pushed from Home to change workspaces, and pops back once one is chosen.
+ */
+export type WorkspaceSelectMode = 'gate' | 'switch';
+
+export function WorkspaceSelectScreen({ mode }: { mode: WorkspaceSelectMode }): React.JSX.Element {
+  const navigation = useNavigation();
+  const workspaces = useWorkspaceStore((state) => state.workspaces);
+  const isLoading = useWorkspaceStore((state) => state.isLoading);
+  const isSubmitting = useWorkspaceStore((state) => state.isSubmitting);
+  const error = useWorkspaceStore((state) => state.error);
+  const clearError = useWorkspaceStore((state) => state.clearError);
+  const load = useWorkspaceStore((state) => state.load);
+  const select = useWorkspaceStore((state) => state.select);
+  const create = useWorkspaceStore((state) => state.create);
+  const activeWorkspaceId = useActiveWorkspaceId();
+  const refreshCurrentUser = useAuthStore((state) => state.refreshCurrentUser);
+  const logout = useAuthStore((state) => state.logout);
+
+  const [name, setName] = useState('');
+  const [refreshing, setRefreshing] = useState(false);
+  const [isActivating, setIsActivating] = useState(false);
+
+  useEffect(() => {
+    // The list is normally already loaded by the auth flow; refresh it anyway so a workspace
+    // added on another device shows up without a relaunch.
+    load().catch(() => {
+      // Surfaced through the store's `error`, rendered below.
+    });
+  }, [load]);
+
+  const onRefresh = useCallback(() => {
+    setRefreshing(true);
+    void load().finally(() => setRefreshing(false));
+  }, [load]);
+
+  /**
+   * The workspace switch and the identity refresh are one user-visible step: `me()` answers
+   * with the roles and permissions of *the workspace named on the request*, so re-fetching it
+   * is what makes the app's idea of "what I may do here" match the server's.
+   */
+  const activate = useCallback(
+    async (activation: () => Promise<unknown>) => {
+      setIsActivating(true);
+      try {
+        await activation();
+        await refreshCurrentUser();
+        if (mode === 'switch') navigation.goBack();
+      } catch {
+        // Store-level error already recorded and rendered.
+      } finally {
+        setIsActivating(false);
+      }
+    },
+    [mode, navigation, refreshCurrentUser],
+  );
+
+  const trimmedName = name.trim();
+  const canCreate = trimmedName.length > 0 && !isSubmitting && !isActivating;
+  const busy = isSubmitting || isActivating;
+
+  if (isLoading && workspaces.length === 0) {
+    return (
+      <View className="flex-1 items-center justify-center">
+        <ActivityIndicator size="large" />
+      </View>
+    );
+  }
+
+  return (
+    <View className="flex-1 p-6">
+      <Text className="mb-2 text-[13px] text-[#666666]">
+        Your roles are per workspace — a request acts in exactly one, named by the{' '}
+        <Text className="font-semibold">X-Workspace-Id</Text> header.
+      </Text>
+
+      {error ? <Text className="mb-3 text-sm text-red-600">{error}</Text> : null}
+
+      <FlatList
+        data={workspaces}
+        keyExtractor={(item) => item.id}
+        refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />}
+        ListEmptyComponent={
+          <Text className="mb-2 text-sm text-[#666666]">
+            You're not a member of any workspace yet. Create the first one below — you'll be its admin.
+          </Text>
+        }
+        renderItem={({ item }) => (
+          <WorkspaceRow
+            workspace={item}
+            isActive={item.id === activeWorkspaceId}
+            disabled={busy}
+            onPress={() => void activate(() => select(item.id))}
+          />
+        )}
+      />
+
+      <View className="mt-4 border-t border-[#eeeeee] pt-4">
+        <FormInput
+          label="New workspace"
+          value={name}
+          onChangeText={(text) => {
+            clearError();
+            setName(text);
+          }}
+          autoCapitalize="words"
+          placeholder="Acme"
+        />
+        <PrimaryButton
+          title="Create workspace"
+          onPress={() => {
+            const created = trimmedName;
+            setName('');
+            void activate(() => create(created));
+          }}
+          loading={busy}
+          disabled={!canCreate}
+        />
+      </View>
+
+      {mode === 'gate' ? (
+        <PrimaryButton title="Log out" variant="secondary" onPress={() => void logout()} disabled={busy} />
+      ) : null}
+    </View>
+  );
+}
+
+function WorkspaceRow({
+  workspace,
+  isActive,
+  disabled,
+  onPress,
+}: {
+  workspace: WorkspaceSummary;
+  isActive: boolean;
+  disabled: boolean;
+  onPress: () => void;
+}): React.JSX.Element {
+  return (
+    <Pressable
+      className={`mb-2.5 rounded-[10px] border p-3 ${isActive ? 'border-blue-600 bg-blue-50' : 'border-[#eeeeee]'} ${disabled ? 'opacity-50' : ''}`}
+      onPress={onPress}
+      disabled={disabled}
+    >
+      <View className="flex-row items-center justify-between">
+        <Text className="text-base font-semibold">{workspace.name}</Text>
+        {isActive ? <Text className="text-xs font-semibold text-blue-600">ACTIVE</Text> : null}
+      </View>
+      <Text className="mt-1 text-xs text-[#666666]">Your roles: {workspace.roles.length ? workspace.roles.join(', ') : '—'}</Text>
+      <Text className="mt-0.5 text-xs text-[#888888]">{workspace.id}</Text>
+    </Pressable>
+  );
+}

package/registry/mobile-apps/bare-rn/variants/workspaces/src/store/authStore.ts

@@ -0,0 +1,177 @@
+import { create } from 'zustand';
+import {
+  AuthApiError,
+  type AuthTokens,
+  type CurrentUser,
+  type TwoFactorChallenge,
+} from '@simple-auth-kit/auth-client';
+import { authClient } from '../api/authClient';
+import { useWorkspaceStore } from './workspaceStore';
+import { getActiveWorkspaceId, hydrateActiveWorkspace, setActiveWorkspaceId } from '../workspace/activeWorkspace';
+
+/**
+ * Everything that follows a successful authentication, in the order the workspaces variant
+ * requires it:
+ *
+ *  1. list the workspaces this user belongs to — `GET /workspaces` is not workspace-scoped, so
+ *     it is the one call that works before any workspace is chosen;
+ *  2. drop a persisted active workspace the user is no longer a member of. Without this,
+ *     `GET /auth/me` would carry a stale `X-Workspace-Id` and the backend would answer 403
+ *     (deliberately indistinguishable from "no such workspace"), which hydrate would read as a
+ *     dead session and sign a perfectly good user out;
+ *  3. only then ask who we are — `me()` carries the active workspace, so its `roles` and
+ *     `permissions` are the ones that apply *inside* it.
+ *
+ * No workspace is auto-selected when several are available: choosing is the user's, and
+ * `RootNavigator` routes to the picker while none is active.
+ */
+async function loadIdentityForActiveWorkspace(): Promise<CurrentUser> {
+  const workspaces = await useWorkspaceStore.getState().load();
+  const activeWorkspaceId = getActiveWorkspaceId();
+  if (activeWorkspaceId && !workspaces.some((workspace) => workspace.id === activeWorkspaceId)) {
+    await setActiveWorkspaceId(null);
+  }
+  return authClient.me();
+}
+
+export interface Credentials {
+  email: string;
+  password: string;
+}
+
+export interface LoginCredentials {
+  identifier: string;
+  password: string;
+}
+
+interface AuthState {
+  /** null until `hydrate()` has checked storage for an existing session at least once. */
+  isHydrated: boolean;
+  /** True while a login/signup/2fa/logout request is in flight. */
+  isLoading: boolean;
+  /** Message from the most recently failed action, cleared on the next attempt. */
+  error: string | null;
+  currentUser: CurrentUser | null;
+
+  /** Call once on app start: checks for a persisted session and loads `me()` if one exists. */
+  hydrate: () => Promise<void>;
+  signup: (input: Credentials) => Promise<AuthTokens>;
+  login: (input: LoginCredentials) => Promise<AuthTokens | TwoFactorChallenge>;
+  loginTwoFactor: (input: { challengeToken: string; code: string }) => Promise<AuthTokens>;
+  logout: () => Promise<void>;
+  logoutAll: () => Promise<void>;
+  refreshCurrentUser: () => Promise<void>;
+}
+
+function messageFor(err: unknown): string {
+  if (err instanceof AuthApiError) return err.message;
+  if (err instanceof Error) return err.message;
+  return 'Something went wrong. Please try again.';
+}
+
+export const useAuthStore = create<AuthState>((set) => ({
+  isHydrated: false,
+  isLoading: false,
+  error: null,
+  currentUser: null,
+
+  hydrate: async () => {
+    try {
+      // Before any scoped request, so the first `me()` already names the right workspace.
+      await hydrateActiveWorkspace();
+      if (await authClient.isAuthenticated()) {
+        const currentUser = await loadIdentityForActiveWorkspace();
+        set({ currentUser });
+      } else {
+        await useWorkspaceStore.getState().reset();
+      }
+    } catch {
+      // Stored tokens exist but are no longer valid (refresh failed, server reset, etc).
+      // authClient already clears storage on that path — just stay logged out.
+      set({ currentUser: null });
+    } finally {
+      set({ isHydrated: true });
+    }
+  },
+
+  signup: async (input) => {
+    set({ isLoading: true, error: null });
+    try {
+      const tokens = await authClient.signup(input);
+      // A brand-new user belongs to no workspace yet — the picker offers creating the first one.
+      const currentUser = await loadIdentityForActiveWorkspace();
+      set({ currentUser });
+      return tokens;
+    } catch (err) {
+      set({ error: messageFor(err) });
+      throw err;
+    } finally {
+      set({ isLoading: false });
+    }
+  },
+
+  login: async (input) => {
+    set({ isLoading: true, error: null });
+    try {
+      const result = await authClient.login(input);
+      if ('twoFactorRequired' in result) return result;
+      const currentUser = await loadIdentityForActiveWorkspace();
+      set({ currentUser });
+      return result;
+    } catch (err) {
+      set({ error: messageFor(err) });
+      throw err;
+    } finally {
+      set({ isLoading: false });
+    }
+  },
+
+  loginTwoFactor: async (input) => {
+    set({ isLoading: true, error: null });
+    try {
+      const tokens = await authClient.loginTwoFactor(input);
+      const currentUser = await loadIdentityForActiveWorkspace();
+      set({ currentUser });
+      return tokens;
+    } catch (err) {
+      set({ error: messageFor(err) });
+      throw err;
+    } finally {
+      set({ isLoading: false });
+    }
+  },
+
+  logout: async () => {
+    set({ isLoading: true, error: null });
+    try {
+      await authClient.logout();
+    } catch (err) {
+      // Even if the network call fails, storage is only cleared by authClient on success —
+      // surface the error but don't strand the user on a broken session screen.
+      set({ error: messageFor(err) });
+    } finally {
+      await useWorkspaceStore.getState().reset();
+      set({ currentUser: null, isLoading: false });
+    }
+  },
+
+  logoutAll: async () => {
+    set({ isLoading: true, error: null });
+    try {
+      await authClient.logoutAll();
+    } catch (err) {
+      set({ error: messageFor(err) });
+    } finally {
+      await useWorkspaceStore.getState().reset();
+      set({ currentUser: null, isLoading: false });
+    }
+  },
+
+  refreshCurrentUser: async () => {
+    const currentUser = await authClient.me();
+    set({ currentUser });
+  },
+}));
+
+/** Derived convenience selector, mirroring the admin apps' MobX `isAuthenticated` getter. */
+export const selectIsAuthenticated = (state: AuthState): boolean => state.currentUser !== null;

package/registry/mobile-apps/bare-rn/variants/workspaces/src/store/workspaceStore.ts

@@ -0,0 +1,90 @@
+import { create } from 'zustand';
+import { AuthApiError, type WorkspaceSummary } from '@simple-auth-kit/auth-client';
+import { authClient } from '../api/authClient';
+import { setActiveWorkspaceId, useActiveWorkspaceId } from '../workspace/activeWorkspace';
+
+/**
+ * The workspaces the signed-in user belongs to, and the operations that change which one is
+ * active. The *id* of the active workspace lives one layer down in
+ * `src/workspace/activeWorkspace.ts` so that `authClient` can read it without importing this
+ * store (which imports `authClient`).
+ *
+ * Deliberately does not touch `authStore`: selecting a workspace changes the roles and
+ * permissions `/auth/me` answers with, and the screen that selects is the one that re-fetches
+ * them. That keeps the two stores acyclic and the refresh visible at the call site.
+ */
+interface WorkspaceState {
+  workspaces: WorkspaceSummary[];
+  /** True while the list is being (re)fetched. */
+  isLoading: boolean;
+  /** True while creating a workspace. */
+  isSubmitting: boolean;
+  error: string | null;
+
+  /** Fetches `GET /workspaces` — not workspace-scoped, so it works before any workspace is chosen. */
+  load: () => Promise<WorkspaceSummary[]>;
+  /** Makes `workspaceId` the workspace every scoped call acts in, and persists that choice. */
+  select: (workspaceId: string) => Promise<void>;
+  /** Creates a workspace (the creator becomes its admin) and makes it active. */
+  create: (name: string) => Promise<WorkspaceSummary>;
+  /** Wipes list and active workspace — used on logout so the next user starts clean. */
+  reset: () => Promise<void>;
+  clearError: () => void;
+}
+
+function messageFor(err: unknown): string {
+  if (err instanceof AuthApiError) return err.message;
+  if (err instanceof Error) return err.message;
+  return 'Something went wrong. Please try again.';
+}
+
+export const useWorkspaceStore = create<WorkspaceState>((set) => ({
+  workspaces: [],
+  isLoading: false,
+  isSubmitting: false,
+  error: null,
+
+  load: async () => {
+    set({ isLoading: true, error: null });
+    try {
+      const workspaces = await authClient.listWorkspaces();
+      set({ workspaces, isLoading: false });
+      return workspaces;
+    } catch (err) {
+      set({ isLoading: false, error: messageFor(err) });
+      throw err;
+    }
+  },
+
+  select: async (workspaceId) => {
+    await setActiveWorkspaceId(workspaceId);
+    set({ error: null });
+  },
+
+  create: async (name) => {
+    set({ isSubmitting: true, error: null });
+    try {
+      const workspace = await authClient.createWorkspace(name);
+      await setActiveWorkspaceId(workspace.id);
+      set((state) => ({ workspaces: [...state.workspaces, workspace], isSubmitting: false }));
+      return workspace;
+    } catch (err) {
+      set({ isSubmitting: false, error: messageFor(err) });
+      throw err;
+    }
+  },
+
+  reset: async () => {
+    await setActiveWorkspaceId(null);
+    set({ workspaces: [], isLoading: false, isSubmitting: false, error: null });
+  },
+
+  clearError: () => set({ error: null }),
+}));
+
+/** The active workspace as a full summary, or `null` while none is chosen (or not yet listed). */
+export const useActiveWorkspace = (): WorkspaceSummary | null => {
+  const activeWorkspaceId = useActiveWorkspaceId();
+  const workspaces = useWorkspaceStore((state) => state.workspaces);
+  return workspaces.find((workspace) => workspace.id === activeWorkspaceId) ?? null;
+};

package/registry/mobile-apps/bare-rn/variants/workspaces/src/workspace/activeWorkspace.ts

@@ -0,0 +1,55 @@
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { create } from 'zustand';
+import type { WorkspaceIdResolver } from '@simple-auth-kit/auth-client';
+
+/**
+ * The single source of truth for "which workspace am I acting in", and the app side of
+ * `AuthClient`'s `WorkspaceIdResolver` seam — the same injected-dependency shape as
+ * `TokenStorage`. The client never owns this; it asks.
+ *
+ * Deliberately dependency-free: `src/api/authClient.ts` imports this module, so this module
+ * must never import the client back. Anything that needs both (listing workspaces, creating
+ * one) lives in `src/store/workspaceStore.ts`, one layer up.
+ *
+ * Persisted to AsyncStorage so a relaunch lands back in the workspace you were last in.
+ * Unencrypted, for the same reason the tokens are — see `asyncStorageTokenStorage`.
+ */
+const STORAGE_KEY = 'simple-auth-kit/active-workspace';
+
+interface ActiveWorkspaceState {
+  workspaceId: string | null;
+  /** False until `hydrateActiveWorkspace()` has read AsyncStorage — read before trusting `workspaceId === null`. */
+  isHydrated: boolean;
+}
+
+export const useActiveWorkspaceStore = create<ActiveWorkspaceState>(() => ({
+  workspaceId: null,
+  isHydrated: false,
+}));
+
+/** Call once, before the first workspace-scoped request, so it can carry the persisted workspace. */
+export async function hydrateActiveWorkspace(): Promise<string | null> {
+  const stored = await AsyncStorage.getItem(STORAGE_KEY);
+  const workspaceId = stored && stored.length > 0 ? stored : null;
+  useActiveWorkspaceStore.setState({ workspaceId, isHydrated: true });
+  return workspaceId;
+}
+
+/** `null` goes back to sending no `X-Workspace-Id` at all — which is what logging out does. */
+export async function setActiveWorkspaceId(workspaceId: string | null): Promise<void> {
+  useActiveWorkspaceStore.setState({ workspaceId, isHydrated: true });
+  if (workspaceId === null) await AsyncStorage.removeItem(STORAGE_KEY);
+  else await AsyncStorage.setItem(STORAGE_KEY, workspaceId);
+}
+
+export function getActiveWorkspaceId(): string | null {
+  return useActiveWorkspaceStore.getState().workspaceId;
+}
+
+/**
+ * Handed to `new AuthClient({ workspaceId })`. Resolved per request, so a workspace switch
+ * takes effect on the very next scoped call without rebuilding the client.
+ */
+export const activeWorkspaceIdResolver: WorkspaceIdResolver = () => getActiveWorkspaceId();
+
+export const useActiveWorkspaceId = (): string | null => useActiveWorkspaceStore((state) => state.workspaceId);

package/registry/mobile-apps/expo/shared/App.tsx

@@ -0,0 +1,15 @@
+import "./global.css";
+
+import React from "react";
+import { StatusBar } from "expo-status-bar";
+import { SafeAreaProvider } from "react-native-safe-area-context";
+import { RootNavigator } from "./src/navigation/RootNavigator";
+
+export default function App() {
+  return (
+    <SafeAreaProvider>
+      <RootNavigator />
+      <StatusBar style="auto" />
+    </SafeAreaProvider>
+  );
+}

package/registry/mobile-apps/expo/shared/babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: ["babel-preset-expo", "nativewind/babel"],
+  };
+};

package/registry/mobile-apps/expo/shared/global.css

@@ -0,0 +1,2 @@
+@import "tailwindcss";
+@import "nativewind/theme";

package/registry/mobile-apps/expo/shared/index.ts

@@ -0,0 +1,8 @@
+import { registerRootComponent } from 'expo';
+
+import App from './App';
+
+// registerRootComponent calls AppRegistry.registerComponent('main', () => App);
+// It also ensures that whether you load the app in Expo Go or in a native build,
+// the environment is set up appropriately
+registerRootComponent(App);

package/registry/mobile-apps/expo/shared/metro.config.js

@@ -0,0 +1,6 @@
+const { getDefaultConfig } = require("expo/metro-config");
+const { withNativeWind } = require("nativewind/metro");
+
+const config = getDefaultConfig(__dirname);
+
+module.exports = withNativeWind(config);

package/registry/mobile-apps/expo/shared/nativewind-env.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="nativewind/types" />
+
+declare module "*.css";

package/registry/mobile-apps/expo/shared/postcss.config.mjs

@@ -0,0 +1,5 @@
+export default {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};

package/registry/mobile-apps/expo/shared/src/screens/LoginScreen.tsx

@@ -0,0 +1,81 @@
+import React, { useState } from "react";
+import { ActivityIndicator, Pressable, Text, TextInput, View } from "react-native";
+import type { NativeStackScreenProps } from "@react-navigation/native-stack";
+import type { AuthStackParamList } from "../navigation/types";
+import { useAuthStore } from "../store/authStore";
+
+type Props = NativeStackScreenProps<AuthStackParamList, "Login">;
+
+export function LoginScreen({ navigation }: Props) {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const login = useAuthStore((state) => state.login);
+  const isSubmitting = useAuthStore((state) => state.isSubmitting);
+  const error = useAuthStore((state) => state.error);
+  const clearError = useAuthStore((state) => state.clearError);
+
+  const canSubmit = email.trim().length > 0 && password.length > 0 && !isSubmitting;
+
+  async function handleSubmit() {
+    try {
+      const result = await login({ identifier: email.trim(), password });
+      if (result.twoFactorRequired) {
+        navigation.navigate("TwoFactor");
+      }
+      // On plain success, RootNavigator swaps to the app stack automatically
+      // because `currentUser` becomes non-null — nothing to navigate to here.
+    } catch {
+      // Error is surfaced via the store's `error` field, rendered below.
+    }
+  }
+
+  return (
+    <View className="flex-1 justify-center p-6 bg-white">
+      <Text className="text-[28px] font-bold mb-6">Log in</Text>
+
+      <Text className="text-[13px] font-semibold text-[#444] mb-1.5 mt-3">Email</Text>
+      <TextInput
+        className="border border-[#ccc] rounded-lg px-3 py-2.5 text-base"
+        value={email}
+        onChangeText={(text) => {
+          clearError();
+          setEmail(text);
+        }}
+        autoCapitalize="none"
+        autoCorrect={false}
+        keyboardType="email-address"
+        placeholder="you@example.com"
+      />
+
+      <Text className="text-[13px] font-semibold text-[#444] mb-1.5 mt-3">Password</Text>
+      <TextInput
+        className="border border-[#ccc] rounded-lg px-3 py-2.5 text-base"
+        value={password}
+        onChangeText={(text) => {
+          clearError();
+          setPassword(text);
+        }}
+        secureTextEntry
+        placeholder="••••••••"
+      />
+
+      {error ? <Text className="text-[#c0392b] mt-4">{error}</Text> : null}
+
+      <Pressable
+        className={`bg-blue-600 rounded-lg py-3.5 items-center mt-6 ${!canSubmit ? "opacity-50" : ""}`}
+        onPress={handleSubmit}
+        disabled={!canSubmit}
+      >
+        {isSubmitting ? (
+          <ActivityIndicator className="text-white" />
+        ) : (
+          <Text className="text-white text-base font-semibold">Log in</Text>
+        )}
+      </Pressable>
+
+      <Pressable className="mt-4 items-center" onPress={() => navigation.navigate("Signup")}>
+        <Text className="text-blue-600 text-sm">Need an account? Sign up</Text>
+      </Pressable>
+    </View>
+  );
+}