Flutter集成Supabase：实现登录状态校验跳转与登录态持久化

1. 配置持久化存储依赖 #

Supabase需要本地存储来持久化用户会话，热重启后才能自动恢复登录状态。首先在pubspec.yaml中添加必要依赖：

dependencies:
  supabase_flutter: ^2.0.0 # 建议使用最新稳定版本
  shared_preferences: ^2.2.0

2. 初始化Supabase时配置本地存储 #

在应用启动的main函数中，完成Supabase初始化并指定持久化存储实现：

import 'package:flutter/material.dart';
import 'package:supabase_flutter/supabase_flutter.dart';
import 'package:shared_preferences/shared_preferences.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  final prefs = await SharedPreferences.getInstance();
  
  await Supabase.initialize(
    url: '你的Supabase项目URL',
    anonKey: '你的Supabase匿名密钥',
    localStorage: SharedPreferencesLocalStorage(prefs),
  );
  
  runApp(const MyApp());
}

3. 根组件监听会话状态自动跳转 #

在应用根组件中，通过StreamBuilder监听Auth状态变化，根据当前会话状态自动导航到首页或登录页：

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Supabase Demo',
      home: StreamBuilder<AuthState>(
        stream: Supabase.instance.client.auth.onAuthStateChange,
        initialData: AuthState(
          session: Supabase.instance.client.auth.currentSession,
          event: AuthChangeEvent.initialSession,
        ),
        builder: (context, snapshot) {
          final session = snapshot.data?.session;
          return session != null ? const HomePage() : const LoginPage();
        },
      ),
    );
  }
}

4. 验证会话持久化效果 #

登录/注册成功后，可以通过以下代码确认会话已保存：

// 登录成功后调用
final session = Supabase.instance.client.auth.currentSession;
print('当前会话：${session?.user.email}');

热重启后，再次打印该值，若不为空则说明持久化生效。

常见问题排查 #

• 确保WidgetsFlutterBinding.ensureInitialized()在所有异步操作前调用，避免初始化顺序问题
• 检查Supabase项目的Auth设置中，JWT过期时间是否合理（默认不会立即过期）
• 若使用iOS模拟器，确认SharedPreferences能正常写入（部分模拟器可能存在权限问题）

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