Supabase Flutter Web端OAuth重定向后currentSession为null问题

代码片段 #

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:spacevault_cash/constants.dart';
import 'package:supabase_flutter/supabase_flutter.dart';
import 'package:supabase/supabase.dart' as supabase_;

import '../services/supabase_service.dart';

class TestPage extends ConsumerWidget {
  const TestPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final user = ref.watch(userProvider);
    print(supabase.auth.currentSession);

    // Use the user variable here
    return ElevatedButton(
      onPressed: () {
        ref.read(supabaseProvider).auth.signInWithOAuth(
            supabase_.Provider.github,
            redirectTo: kIsWeb ? null : authRedirectUrl);
      },
      child: Text(user != null ? 'Logged in' : 'Login'),
    );
  }
}

问题描述 #

Web端点击登录按钮后，跳转至GitHub完成授权，返回应用后地址栏可见access_token，但supabase.auth.currentSession打印结果为null，该功能在iOS和Android端可正常运行。

解决方案 #

1. 确认Web端redirectUrl配置

在Supabase控制台的Authentication > URL Configuration中，确保添加了Web端的回调地址（比如http://localhost:53557/#/或线上域名），且与代码逻辑匹配。注意Web端回调地址需包含哈希路由（若使用Flutter Web哈希模式）。

2. 手动处理Web端回调参数

Flutter Web不会自动解析URL中的认证参数，需在应用初始化时手动触发解析：

import 'dart:html' as html;

void main() async {
  await Supabase.initialize(
    url: '你的Supabase URL',
    anonKey: '你的Anon Key',
  );
  
  // 处理Web端OAuth回调
  if (kIsWeb) {
    await Supabase.instance.auth.getSessionFromUrl(html.window.location.href);
  }
  
  runApp(const ProviderScope(child: MyApp()));
}

3. 让Provider监听Auth状态变化

修改userProvider为监听Supabase认证状态的流，确保状态更新时自动同步：

final userProvider = StreamProvider<User?>((ref) {
  return Supabase.instance.auth.onAuthStateChange.map((event) => event.session?.user);
});

避免页面build时获取到旧的null值。

4. 检查浏览器存储权限

确认浏览器允许网站使用localStorage（Supabase默认用它存储会话），若存储权限被禁用，会话无法持久化会导致currentSession为null。

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