Protected Routes & Middleware

app/
├── _layout.tsx          # SessionProvider + Stack.Protected
├── sign-in.tsx          # guard={!session}
└── (app)/
    ├── _layout.tsx      # authenticated stack
    └── (tabs)/...

// app/_layout.tsx
import { Stack } from "expo-router";
import { SplashScreen } from "expo-router";
import { SessionProvider, useSession } from "@/features/auth";
 
SplashScreen.preventAutoHideAsync();
 
export default function RootLayout() {
  return (
    <SessionProvider>
      <SplashScreenController />
      <RootNavigator />
    </SessionProvider>
  );
}
 
function SplashScreenController() {
  const { isLoading } = useSession();
  if (!isLoading) SplashScreen.hideAsync();
  return null;
}
 
function RootNavigator() {
  const { session } = useSession();
 
  return (
    <Stack>
      <Stack.Protected guard={!!session}>
        <Stack.Screen name="(app)" />
      </Stack.Protected>
 
      <Stack.Protected guard={!session}>
        <Stack.Screen name="sign-in" />
      </Stack.Protected>
    </Stack>
  );
}

// app/sign-in.tsx
import { router } from "expo-router";
import { Button, View } from "react-native";
import { useSession } from "@/features/auth";
 
export default function SignInScreen() {
  const { signIn } = useSession();
 
  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Button
        title="Sign in"
        onPress={async () => {
          await signIn();
          router.replace("/(app)/(tabs)");
        }}
      />
    </View>
  );
}

// features/auth/model/SessionProvider.tsx
import { createContext, use, useEffect, useState, type PropsWithChildren } from "react";
import * as SecureStore from "expo-secure-store";
 
type Session = { userId: string; role: "user" | "admin" } | null;
 
const AuthContext = createContext<{
  session: Session;
  isLoading: boolean;
  signIn: () => Promise<void>;
  signOut: () => Promise<void>;
} | null>(null);
 
export function useSession() {
  const ctx = use(AuthContext);
  if (!ctx) throw new Error("useSession requires SessionProvider");
  return ctx;
}
 
export function SessionProvider({ children }: PropsWithChildren) {
  const [session, setSession] = useState<Session>(null);
  const [isLoading, setLoading] = useState(true);
 
  useEffect(() => {
    SecureStore.getItemAsync("session")
      .then((raw) => setSession(raw ? JSON.parse(raw) : null))
      .finally(() => setLoading(false));
  }, []);
 
  const signIn = async () => {
    const next: Session = { userId: "u1", role: "user" };
    await SecureStore.setItemAsync("session", JSON.stringify(next));
    setSession(next);
  };
 
  const signOut = async () => {
    await SecureStore.deleteItemAsync("session");
    setSession(null);
  };
 
  return (
    <AuthContext value={{ session, isLoading, signIn, signOut }}>
      {children}
    </AuthContext>
  );
}

// app/_layout.tsx - root guards
import { Stack } from "expo-router";
import { SessionProvider, useSession } from "@/features/auth";
 
function RootNavigator() {
  const { session, isLoading } = useSession();
 
  if (isLoading) return null;
 
  const isLoggedIn = !!session;
  const isAdmin = session?.role === "admin";
 
  return (
    <Stack>
      <Stack.Protected guard={isLoggedIn}>
        <Stack.Protected guard={isAdmin}>
          <Stack.Screen name="admin" />
        </Stack.Protected>
        <Stack.Screen name="(app)" />
      </Stack.Protected>
 
      <Stack.Protected guard={!isLoggedIn}>
        <Stack.Screen name="sign-in" />
      </Stack.Protected>
    </Stack>
  );
}
 
export default function RootLayout() {
  return (
    <SessionProvider>
      <RootNavigator />
    </SessionProvider>
  );
}

// app/index.tsx - optional redirect hub (avoid fighting Stack.Protected)
import { Redirect } from "expo-router";
import { useSession } from "@/features/auth";
 
export default function Index() {
  const { session, isLoading } = useSession();
  if (isLoading) return null;
  if (session) return <Redirect href="/(app)/(tabs)" />;
  return <Redirect href="/sign-in" />;
}

// app/(app)/(tabs)/_layout.tsx - protect individual tabs
import { Tabs } from "expo-router";
import { useSession } from "@/features/auth";
 
export default function TabsLayout() {
  const { session } = useSession();
  const isLoggedIn = !!session;
 
  return (
    <Tabs>
      <Tabs.Screen name="home" options={{ title: "Home" }} />
      <Tabs.Protected guard={isLoggedIn}>
        <Tabs.Screen name="inbox" options={{ title: "Inbox" }} />
        <Tabs.Screen name="profile" options={{ title: "Profile" }} />
      </Tabs.Protected>
    </Tabs>
  );
}

// ❌ Loop risk - two layouts both redirect on /
// (auth)/_layout.tsx
if (!session) return <Redirect href="/sign-in" />;
// (app)/_layout.tsx
if (!session) return <Redirect href="/sign-in" />;
 
// ✅ Single source of truth
// app/_layout.tsx - Stack.Protected only

const redirect = useGlobalSearchParams<{ redirect?: string }>();
 
await signIn();
router.replace((redirect as `/${string}`) ?? "/(app)/(tabs)");