@simple-auth-kit/cli 1.0.0

package/registry/mobile-apps/bare-rn/variants/base/src/navigation/RootNavigator.tsx

@@ -0,0 +1,58 @@
+import React, { useEffect } from 'react';
+import { ActivityIndicator, StyleSheet, View } from 'react-native';
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { useAuthStore } from '../store/authStore';
+import { LoginScreen } from '../screens/LoginScreen';
+import { SignupScreen } from '../screens/SignupScreen';
+import { TwoFactorScreen } from '../screens/TwoFactorScreen';
+import { HomeScreen } from '../screens/HomeScreen';
+import { SessionsScreen } from '../screens/SessionsScreen';
+import type { RootStackParamList } from './types';
+
+const Stack = createNativeStackNavigator<RootStackParamList>();
+
+export function RootNavigator(): React.JSX.Element {
+  const isHydrated = useAuthStore((s) => s.isHydrated);
+  const isAuthenticated = useAuthStore((s) => s.currentUser !== null);
+  const hydrate = useAuthStore((s) => s.hydrate);
+
+  useEffect(() => {
+    void hydrate();
+  }, [hydrate]);
+
+  if (!isHydrated) {
+    return (
+      <View style={styles.splash}>
+        <ActivityIndicator size="large" />
+      </View>
+    );
+  }
+
+  return (
+    <NavigationContainer>
+      <Stack.Navigator screenOptions={{ headerShown: true }}>
+        {isAuthenticated ? (
+          <>
+            <Stack.Screen name="Home" component={HomeScreen} options={{ title: 'Profile' }} />
+            <Stack.Screen name="Sessions" component={SessionsScreen} options={{ title: 'Sessions' }} />
+          </>
+        ) : (
+          <>
+            <Stack.Screen name="Login" component={LoginScreen} options={{ title: 'Log in' }} />
+            <Stack.Screen name="Signup" component={SignupScreen} options={{ title: 'Create account' }} />
+            <Stack.Screen name="TwoFactor" component={TwoFactorScreen} options={{ title: 'Verification code' }} />
+          </>
+        )}
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+}
+
+const styles = StyleSheet.create({
+  splash: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/registry/mobile-apps/bare-rn/variants/base/src/navigation/types.ts

@@ -0,0 +1,15 @@
+export type RootStackParamList = {
+  // Unauthenticated stack
+  Login: undefined;
+  Signup: undefined;
+  TwoFactor: { challengeToken: string };
+  // Authenticated stack
+  Home: undefined;
+  Sessions: undefined;
+};
+
+declare global {
+  namespace ReactNavigation {
+    interface RootParamList extends RootStackParamList {}
+  }
+}

package/registry/mobile-apps/bare-rn/variants/base/src/screens/HomeScreen.tsx

@@ -0,0 +1,64 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { RefreshControl, ScrollView, Text, View } from 'react-native';
+import type { NativeStackScreenProps } from '@react-navigation/native-stack';
+import { PrimaryButton } from '../components/PrimaryButton';
+import { useAuthStore } from '../store/authStore';
+import type { RootStackParamList } from '../navigation/types';
+
+type Props = NativeStackScreenProps<RootStackParamList, 'Home'>;
+
+export function HomeScreen({ navigation }: Props): React.JSX.Element {
+  const currentUser = useAuthStore((s) => s.currentUser);
+  const isLoading = useAuthStore((s) => s.isLoading);
+  const error = useAuthStore((s) => s.error);
+  const logout = useAuthStore((s) => s.logout);
+  const refreshCurrentUser = useAuthStore((s) => s.refreshCurrentUser);
+
+  const [refreshing, setRefreshing] = useState(false);
+
+  useEffect(() => {
+    void refreshCurrentUser();
+  }, [refreshCurrentUser]);
+
+  const onRefresh = useCallback(() => {
+    setRefreshing(true);
+    void refreshCurrentUser().finally(() => setRefreshing(false));
+  }, [refreshCurrentUser]);
+
+  return (
+    <ScrollView
+      contentContainerClassName="flex-grow p-6"
+      refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />}
+    >
+      <Text className="mb-4 text-[28px] font-bold">Profile</Text>
+
+      {currentUser ? (
+        <View className="mb-6 rounded-xl bg-[#f5f5f7] p-4">
+          <Row label="User ID" value={currentUser.sub} />
+          <Row label="Session ID" value={currentUser.sessionId} />
+          <Row label="Roles" value={currentUser.roles.length ? currentUser.roles.join(', ') : '—'} />
+          <Row
+            label="Permissions"
+            value={currentUser.permissions.length ? currentUser.permissions.join(', ') : '—'}
+          />
+        </View>
+      ) : (
+        <Text className="mb-6 text-sm text-[#666666]">Loading your profile…</Text>
+      )}
+
+      {error ? <Text className="mb-3 text-sm text-red-600">{error}</Text> : null}
+
+      <PrimaryButton title="View sessions" variant="secondary" onPress={() => navigation.navigate('Sessions')} />
+      <PrimaryButton title="Log out" variant="danger" onPress={() => void logout()} loading={isLoading} />
+    </ScrollView>
+  );
+}
+
+function Row({ label, value }: { label: string; value: string }): React.JSX.Element {
+  return (
+    <View className="mb-3">
+      <Text className="mb-0.5 text-xs font-semibold text-[#666666]">{label}</Text>
+      <Text className="text-[15px] text-[#111111]">{value}</Text>
+    </View>
+  );
+}

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

@@ -0,0 +1,143 @@
+import { create } from 'zustand';
+import {
+  AuthApiError,
+  type AuthTokens,
+  type CurrentUser,
+  type TwoFactorChallenge,
+} from '@simple-auth-kit/auth-client';
+import { authClient } from '../api/authClient';
+
+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 {
+      if (await authClient.isAuthenticated()) {
+        const currentUser = await authClient.me();
+        set({ currentUser });
+      }
+    } 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);
+      const currentUser = await authClient.me();
+      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 authClient.me();
+      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 authClient.me();
+      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 {
+      set({ currentUser: null, isLoading: false });
+    }
+  },
+
+  logoutAll: async () => {
+    set({ isLoading: true, error: null });
+    try {
+      await authClient.logoutAll();
+    } catch (err) {
+      set({ error: messageFor(err) });
+    } finally {
+      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/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "mobile-bare-rn-workspaces",
+  "version": "0.0.1",
+  "private": true,
+  "description": "Bare React Native CLI end-user mobile app consuming the workspaces simple-auth-kit backend variant (simple-auth-kit add <combo> --workspaces) — login/signup, 2FA, profile, sessions, workspace selection. A deliberate copy of apps/mobile-bare-rn rather than a shared abstraction: a consumer installs one variant, not both. Uses the shared @simple-auth-kit/auth-client package; state via Zustand, navigation via React Navigation.",
+  "scripts": {
+    "android": "react-native run-android",
+    "ios": "react-native run-ios",
+    "lint": "eslint .",
+    "start": "react-native start",
+    "test": "jest",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@simple-auth-kit/auth-client": "^1.0.0",
+    "@react-native-async-storage/async-storage": "^3.1.1",
+    "@react-native/new-app-screen": "0.86.2",
+    "@react-navigation/native": "^7.3.16",
+    "@react-navigation/native-stack": "^7.18.8",
+    "nativewind": "5.0.0-preview.4",
+    "react": "19.2.3",
+    "react-native": "0.86.2",
+    "react-native-config": "^1.6.1",
+    "react-native-css": "^3.0.7",
+    "react-native-gesture-handler": "^3.1.0",
+    "react-native-reanimated": "4.5.3",
+    "react-native-safe-area-context": "^5.5.2",
+    "react-native-screens": "^4.27.0",
+    "react-native-worklets": "0.11.3",
+    "tailwindcss": "^4.3.3",
+    "zustand": "^5.0.14"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.25.2",
+    "@babel/preset-env": "^7.25.3",
+    "@babel/runtime": "^7.25.0",
+    "@expo/metro-config": "^57.0.7",
+    "@react-native-community/cli": "20.1.0",
+    "@react-native-community/cli-platform-android": "20.1.0",
+    "@react-native-community/cli-platform-ios": "20.1.0",
+    "@react-native/babel-preset": "0.86.2",
+    "@react-native/eslint-config": "0.86.2",
+    "@react-native/jest-preset": "0.86.2",
+    "@react-native/metro-config": "0.86.2",
+    "@react-native/typescript-config": "0.86.2",
+    "@types/jest": "^29.5.13",
+    "@types/react": "^19.2.0",
+    "@types/react-test-renderer": "^19.1.0",
+    "eslint": "^8.19.0",
+    "jest": "^29.6.3",
+    "prettier": "2.8.8",
+    "react-test-renderer": "19.2.3",
+    "typescript": "^5.8.3"
+  },
+  "engines": {
+    "node": ">= 22.11.0"
+  }
+}

package/registry/mobile-apps/bare-rn/variants/workspaces/src/api/authClient.ts

@@ -0,0 +1,22 @@
+import { AuthClient } from '@simple-auth-kit/auth-client';
+import Config from 'react-native-config';
+import { asyncStorageTokenStorage } from './tokenStorage';
+import { activeWorkspaceIdResolver } from '../workspace/activeWorkspace';
+
+// react-native-config injects keys from the repo-root .env at build time (see .env / react-native-config.d.ts).
+// Falls back to the locally-running nestjs-prisma-app-workspaces example if the native build step wasn't
+// wired up (e.g. running the JS bundle standalone) — see README notes on Android emulator / physical device
+// hosts.
+const baseUrl = Config.API_BASE_URL ?? 'http://localhost:3005';
+
+// This app targets the workspaces backend variant (`simple-auth-kit add <combo> --workspaces`), so it
+// configures a workspace resolver. Which calls then carry `X-Workspace-Id` is not decided here and
+// not decided per call site: inside AuthClient only `scopedRequest()` can send it, so `login`,
+// `signup`, `sessions`, `logout*`, `POST /workspaces` and `GET /workspaces` structurally cannot —
+// you cannot already be in the workspace you are about to create or choose.
+/** Single shared client for the whole app — screens/store import this instead of constructing their own. */
+export const authClient = new AuthClient({
+  baseUrl,
+  storage: asyncStorageTokenStorage,
+  workspaceId: activeWorkspaceIdResolver,
+});

package/registry/mobile-apps/bare-rn/variants/workspaces/src/navigation/RootNavigator.tsx

@@ -0,0 +1,72 @@
+import React, { useEffect } from 'react';
+import { ActivityIndicator, StyleSheet, View } from 'react-native';
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { useAuthStore } from '../store/authStore';
+import { useActiveWorkspaceId } from '../workspace/activeWorkspace';
+import { LoginScreen } from '../screens/LoginScreen';
+import { SignupScreen } from '../screens/SignupScreen';
+import { TwoFactorScreen } from '../screens/TwoFactorScreen';
+import { WorkspaceSelectScreen } from '../screens/WorkspaceSelectScreen';
+import { HomeScreen } from '../screens/HomeScreen';
+import { SessionsScreen } from '../screens/SessionsScreen';
+import type { RootStackParamList } from './types';
+
+const Stack = createNativeStackNavigator<RootStackParamList>();
+
+// Module-scope wrappers rather than inline arrows so the screen component identity is stable
+// across renders and React Navigation doesn't remount the screen on every parent render.
+const ChooseWorkspace = () => <WorkspaceSelectScreen mode="gate" />;
+const SwitchWorkspace = () => <WorkspaceSelectScreen mode="switch" />;
+
+export function RootNavigator(): React.JSX.Element {
+  const isHydrated = useAuthStore((s) => s.isHydrated);
+  const isAuthenticated = useAuthStore((s) => s.currentUser !== null);
+  const hydrate = useAuthStore((s) => s.hydrate);
+  const activeWorkspaceId = useActiveWorkspaceId();
+
+  useEffect(() => {
+    void hydrate();
+  }, [hydrate]);
+
+  if (!isHydrated) {
+    return (
+      <View style={styles.splash}>
+        <ActivityIndicator size="large" />
+      </View>
+    );
+  }
+
+  return (
+    <NavigationContainer>
+      <Stack.Navigator screenOptions={{ headerShown: true }}>
+        {!isAuthenticated ? (
+          <>
+            <Stack.Screen name="Login" component={LoginScreen} options={{ title: 'Log in' }} />
+            <Stack.Screen name="Signup" component={SignupScreen} options={{ title: 'Create account' }} />
+            <Stack.Screen name="TwoFactor" component={TwoFactorScreen} options={{ title: 'Verification code' }} />
+          </>
+        ) : !activeWorkspaceId ? (
+          // Authenticated but no workspace chosen yet: the only screen reachable is the
+          // gate. Every workspace-scoped call would otherwise go out with no
+          // `X-Workspace-Id` and be refused.
+          <Stack.Screen name="ChooseWorkspace" component={ChooseWorkspace} options={{ title: 'Choose a workspace' }} />
+        ) : (
+          <>
+            <Stack.Screen name="Home" component={HomeScreen} options={{ title: 'Profile' }} />
+            <Stack.Screen name="Sessions" component={SessionsScreen} options={{ title: 'Sessions' }} />
+            <Stack.Screen name="SwitchWorkspace" component={SwitchWorkspace} options={{ title: 'Workspaces' }} />
+          </>
+        )}
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+}
+
+const styles = StyleSheet.create({
+  splash: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/registry/mobile-apps/bare-rn/variants/workspaces/src/navigation/types.ts

@@ -0,0 +1,18 @@
+export type RootStackParamList = {
+  // Unauthenticated stack
+  Login: undefined;
+  Signup: undefined;
+  TwoFactor: { challengeToken: string };
+  // Authenticated, no active workspace — the gate shown before the app stack is reachable.
+  ChooseWorkspace: undefined;
+  // Authenticated stack
+  Home: undefined;
+  Sessions: undefined;
+  SwitchWorkspace: undefined;
+};
+
+declare global {
+  namespace ReactNavigation {
+    interface RootParamList extends RootStackParamList {}
+  }
+}

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

@@ -0,0 +1,85 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { RefreshControl, ScrollView, Text, View } from 'react-native';
+import type { NativeStackScreenProps } from '@react-navigation/native-stack';
+import { PrimaryButton } from '../components/PrimaryButton';
+import { useAuthStore } from '../store/authStore';
+import { useActiveWorkspace } from '../store/workspaceStore';
+import type { RootStackParamList } from '../navigation/types';
+
+type Props = NativeStackScreenProps<RootStackParamList, 'Home'>;
+
+export function HomeScreen({ navigation }: Props): React.JSX.Element {
+  const currentUser = useAuthStore((s) => s.currentUser);
+  const isLoading = useAuthStore((s) => s.isLoading);
+  const error = useAuthStore((s) => s.error);
+  const logout = useAuthStore((s) => s.logout);
+  const refreshCurrentUser = useAuthStore((s) => s.refreshCurrentUser);
+  const activeWorkspace = useActiveWorkspace();
+
+  const [refreshing, setRefreshing] = useState(false);
+
+  useEffect(() => {
+    void refreshCurrentUser();
+  }, [refreshCurrentUser]);
+
+  const onRefresh = useCallback(() => {
+    setRefreshing(true);
+    void refreshCurrentUser().finally(() => setRefreshing(false));
+  }, [refreshCurrentUser]);
+
+  return (
+    <ScrollView
+      contentContainerClassName="flex-grow p-6"
+      refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />}
+    >
+      <Text className="mb-4 text-[28px] font-bold">Profile</Text>
+
+      <View className="mb-6 rounded-xl border border-blue-600 bg-blue-50 p-4">
+        <Text className="mb-0.5 text-xs font-semibold uppercase text-blue-600">Active workspace</Text>
+        <Text className="text-[17px] font-semibold text-[#111111]">{activeWorkspace?.name ?? '—'}</Text>
+        <Text className="mt-1 text-xs text-[#666666]">{activeWorkspace?.id ?? ''}</Text>
+        <PrimaryButton
+          title="Switch workspace"
+          variant="secondary"
+          onPress={() => navigation.navigate('SwitchWorkspace')}
+        />
+      </View>
+
+      {currentUser ? (
+        <View className="mb-6 rounded-xl bg-[#f5f5f7] p-4">
+          <Row label="User ID" value={currentUser.sub} />
+          <Row label="Session ID" value={currentUser.sessionId} />
+          {/*
+            `me()` carries the active workspace, so these two are the caller's roles and
+            permissions *inside it* — not deployment-wide. Being admin here says nothing about
+            any other workspace, which is the property the backend enforces.
+          */}
+          <Row
+            label={`Roles in ${activeWorkspace?.name ?? 'this workspace'}`}
+            value={currentUser.roles.length ? currentUser.roles.join(', ') : '—'}
+          />
+          <Row
+            label="Permissions here"
+            value={currentUser.permissions.length ? currentUser.permissions.join(', ') : '—'}
+          />
+        </View>
+      ) : (
+        <Text className="mb-6 text-sm text-[#666666]">Loading your profile…</Text>
+      )}
+
+      {error ? <Text className="mb-3 text-sm text-red-600">{error}</Text> : null}
+
+      <PrimaryButton title="View sessions" variant="secondary" onPress={() => navigation.navigate('Sessions')} />
+      <PrimaryButton title="Log out" variant="danger" onPress={() => void logout()} loading={isLoading} />
+    </ScrollView>
+  );
+}
+
+function Row({ label, value }: { label: string; value: string }): React.JSX.Element {
+  return (
+    <View className="mb-3">
+      <Text className="mb-0.5 text-xs font-semibold text-[#666666]">{label}</Text>
+      <Text className="text-[15px] text-[#111111]">{value}</Text>
+    </View>
+  );
+}