起動のたびに一瞬ログイン画面が出る expo-router アプリを、Protected routes と「まだ分からない」の三状態で組み直す

// providers/auth.tsx
import { createContext, useContext, useEffect, useState } from 'react';
import type { Session } from '@supabase/supabase-js';
import { supabase } from '@/lib/supabase';
 
export type AuthStatus = 'unknown' | 'signed-out' | 'signed-in';
 
type AuthValue = {
  status: AuthStatus;
  session: Session | null;
};
 
const AuthContext = createContext<AuthValue>({ status: 'unknown', session: null });
 
// 「不明」に留まってよい上限。私は 3 秒に置いています
const RESOLVE_TIMEOUT_MS = 3000;
 
export function AuthProvider({ children }: { children: React.ReactNode }) {
  const [value, setValue] = useState<AuthValue>({ status: 'unknown', session: null });
 
  useEffect(() => {
    let cancelled = false;
 
    const apply = (session: Session | null) => {
      if (cancelled) return;
      setValue({ status: session ? 'signed-in' : 'signed-out', session });
    };
 
    // 1) 保存済みセッションを読む。必要なら更新まで行う
    const initial = supabase.auth.getSession().then(({ data, error }) => {
      if (error) throw error;
      return data.session;
    });
 
    // 2) 時間切れ・例外はどちらも「未ログイン」に倒す（判定不能のまま保護画面を開けない）
    const timeout = new Promise<Session | null>((resolve) =>
      setTimeout(() => resolve(null), RESOLVE_TIMEOUT_MS)
    );
 
    Promise.race([initial, timeout]).then(apply).catch(() => apply(null));
 
    // 3) 以後の変化（ログイン・ログアウト・トークン更新）はここで受ける
    const { data: { subscription } } = supabase.auth.onAuthStateChange((_event, session) => {
      apply(session);
    });
 
    return () => {
      cancelled = true;
      subscription.unsubscribe();
    };
  }, []);
 
  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
}
 
export function useAuth() {
  return useContext(AuthContext);
}

// app/_layout.tsx
import { useEffect } from 'react';
import { Stack } from 'expo-router';
import * as SplashScreen from 'expo-splash-screen';
import { AuthProvider, useAuth } from '@/providers/auth';
 
// モジュール読み込み時に一度だけ。自動で消えるのを止める
SplashScreen.preventAutoHideAsync().catch(() => {});
 
export default function RootLayout() {
  return (
    <AuthProvider>
      <RootNavigator />
    </AuthProvider>
  );
}
 
function RootNavigator() {
  const { status } = useAuth();
 
  useEffect(() => {
    // 状態が定まった瞬間にだけスプラッシュを消す
    if (status !== 'unknown') {
      SplashScreen.hideAsync().catch(() => {});
    }
  }, [status]);
 
  // 「不明」のあいだは navigator を組み立てない。これが黒画面と一瞬のログイン画面を両方止める
  if (status === 'unknown') {
    return null;
  }
 
  const signedIn = status === 'signed-in';
 
  return (
    <Stack screenOptions={{ headerShown: false }}>
      {/* guard には必ず boolean を渡す。session オブジェクトを渡さない */}
      <Stack.Protected guard={signedIn}>
        <Stack.Screen name="(app)" />
      </Stack.Protected>
      <Stack.Protected guard={!signedIn}>
        <Stack.Screen name="(auth)" />
      </Stack.Protected>
    </Stack>
  );
}

app/
├── _layout.tsx          ← Step 2 のルート。Protected の分岐はここだけ
├── (auth)/
│   ├── _layout.tsx      ← 必ず置く。中身は <Stack /> だけでよい
│   ├── sign-in.tsx
│   └── sign-up.tsx
└── (app)/
    ├── _layout.tsx      ← 必ず置く
    ├── index.tsx
    └── settings.tsx

// app/(app)/_layout.tsx
import { Stack } from 'expo-router';
 
export default function AppGroupLayout() {
  // グループ内の画面は Stack がファイル名から自動で拾う。
  // ここでは Protected を重ねない（入れ子は次の節で触れます）
  return <Stack screenOptions={{ headerShown: false }} />;
}

// app/(auth)/_layout.tsx
import { Stack } from 'expo-router';
 
export default function AuthGroupLayout() {
  return (
    <Stack screenOptions={{ headerShown: false }}>
      {/* 名前は先頭にスラッシュを付けない。router.replace('/sign-in') とは書き方が違う */}
      <Stack.Screen name="sign-in" />
      <Stack.Screen name="sign-up" />
    </Stack>
  );
}

// app/(app)/settings.tsx の一部
import { supabase } from '@/lib/supabase';
 
async function handleSignOut() {
  const { error } = await supabase.auth.signOut();
  if (error) {
    // 通信断などで signOut が失敗したときは、ここで止める。
    // router.replace('/sign-in') で無理に飛ばすと、保存済みトークンが残ったまま画面だけ未ログインになる
    console.warn('sign-out failed', error.message);
    return;
  }
  // 成功時は何もしない。onAuthStateChange → status が signed-out → guard が反転 → 画面が切り替わる
}

// 入れ子（避ける）
<Stack.Protected guard={signedIn}>
  <Stack.Protected guard={!onboarded}>
    <Stack.Screen name="onboarding" />
  </Stack.Protected>
  <Stack.Screen name="(app)" />
</Stack.Protected>
 
// 平坦（こちらに統一）
<Stack.Protected guard={signedIn && !onboarded}>
  <Stack.Screen name="onboarding" />
</Stack.Protected>
<Stack.Protected guard={signedIn && onboarded}>
  <Stack.Screen name="(app)" />
</Stack.Protected>
<Stack.Protected guard={!signedIn}>
  <Stack.Screen name="(auth)" />
</Stack.Protected>