Flutter Web端Supabase OAuth登录重定向路由异常问题

问题原因 #

Web端完成Google OAuth登录后，Supabase会将认证token通过URL hash（#access_token=...）返回，但Flutter Web的路由系统会将hash后的内容视为路由路径尝试匹配，而你并未定义对应路由，因此抛出GoException: no routes for location错误。

解决方案 #

1. 配置Supabase重定向URL #

在Supabase控制台的Authentication > Settings > Site URL和Additional Redirect URLs中，添加你的Web应用地址（如http://localhost:44769/），确保OAuth登录完成后重定向回应用根路径。

2. 在应用启动时优先处理Supabase Auth回调 #

修改main()函数，先调用SupabaseAuth.instance.handleInitialAuth()处理URL中的认证信息，再启动应用，避免路由系统解析hash内容：

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  // 初始化Supabase
  await Supabase.initialize(
    url: '你的Supabase URL',
    anonKey: '你的Supabase Anon Key',
  );

  // 处理初始Auth回调（关键步骤）
  await SupabaseAuth.instance.handleInitialAuth();

  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Supabase Demo',
      // 确保路由配置正常，这里是示例路由
      initialRoute: '/',
      routes: {
        '/': (context) => const HomePage(),
        // 其他路由...
      },
    );
  }
}

3. 优化登录按钮代码 #

Supabase的signInWithOAuth在移动端和Web端都能适配（移动端会打开系统浏览器完成登录），无需单独拆分平台逻辑：

ElevatedButton(
  onPressed: () async {
    await Supabase.instance.client.auth.signInWithOAuth(
      Provider.google,
      // 可选：指定重定向URL，需和控制台配置一致
      redirectTo: kIsWeb ? 'http://localhost:44769/' : null,
    );
  },
  child: const Text("Google Sign In"),
),

原理说明 #

handleInitialAuth()会自动解析URL中的认证hash参数，完成用户登录状态的同步，之后路由系统会正常加载初始路由，不会再把token内容当作路由路径处理。

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