Flutter Web + Supabase：浏览器关闭后用户会话无法持久化问题

问题核心 #

你遇到的关闭浏览器重启后会话丢失的问题，根源在于Web端会话恢复的时机判断错误——Supabase Auth在Web端默认使用浏览器localStorage持久化会话（而非移动端的Hive），但你的代码在会话未完成异步加载时就执行了路由跳转判断。

解决方案 #

1. 在应用启动时等待会话加载完成

修改main.dart，先等待Supabase Auth的初始会话加载完毕，再启动应用，确保会话状态已恢复：

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();

  await Supabase.initialize(
    url: 'https://<placeholder>.supabase.co',
    anonKey: <placeholder>,
  );
  // 等待初始会话从localStorage加载完成
  await SupabaseAuth.instance.initialSession;
  debugPrint("App initialized, session loaded: ${Supabase.instance.client.auth.currentSession != null}");
  runApp(MyApp());
}

2. 优化路由跳转逻辑

修改home.dart的_redirect方法，确保等待会话初始化完成后再判断跳转：

Future<void> _redirect() async {
  // 等待Auth会话加载完成
  await SupabaseAuth.instance.initialSession;
  if (!mounted) return;

  final session = supabase.auth.currentSession;
  if (session != null) {
    context.goNamed('watch');
  } else {
    debugPrint("Session was NULL");
    context.goNamed('login');
  }
}

3. （可选）手动指定Hive作为Web端存储

如果默认localStorage无法满足需求，可手动配置Hive作为会话存储（需添加依赖）：

• 先在pubspec.yaml添加依赖：

dependencies:
  hive: ^2.2.3
  hive_web: ^0.4.1

• 初始化Hive并配置Supabase：

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();

  // 初始化Hive Web存储
  await Hive.initWeb();
  final sessionBox = await Hive.openBox('supabase_auth_session');

  await Supabase.initialize(
    url: 'https://<placeholder>.supabase.co',
    anonKey: <placeholder>,
    authOptions: AuthOptions(
      storage: HiveLocalStorage(box: sessionBox),
    ),
  );
  await SupabaseAuth.instance.initialSession;
  runApp(MyApp());
}

关键说明 #

• Web端Supabase Auth默认使用localStorage，无需额外配置Hive即可实现会话持久化
• 登录后刷新浏览器能保留会话，说明存储功能正常，问题仅出在启动时的会话加载时机判断
• 必须等待SupabaseAuth.instance.initialSession完成后再进行路由判断，否则会出现会话未加载完成就跳转登录页的情况

内容的提问来源于stack exchange，提问作者liquardo