如何让Firebase Auth支持Hash片段URL以实现正确重定向？

Firebase Auth支持Hash片段URL的重定向，你遇到的问题是因为Firebase Web SDK默认会忽略continueUrl中的hash部分，将验证参数直接附加到根路径。通过以下配置和手动处理逻辑，可以保留Flutter默认的Hash URL策略：

1. 正确配置ActionCodeSettings #

发送邮件链接时，continueUrl直接使用Hash格式的URL即可，Firebase会自动对hash部分进行URL编码：

await FirebaseAuth.instance.sendSignInLinkToEmail(
  email: userEmail,
  actionCodeSettings: ActionCodeSettings(
    url: 'http://localhost:52751/#/authentication',
    handleCodeInApp: true,
    // 按需添加iOS/Android平台配置
    iOSBundleId: 'com.your.app.ios',
    androidPackageName: 'com.your.app.android',
  ),
);
// 务必存储用户邮箱，用于后续登录验证
window.localStorage.setItem('pendingEmail', userEmail);

2. 手动处理回调参数与路由跳转 #

在Flutter Web应用启动时，需要手动提取URL中的Auth验证参数和Hash路由，完成登录后再导航到目标路由：

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform);

  // 处理Firebase Auth邮件链接回调
  final currentUrl = window.location.href;
  if (FirebaseAuth.instance.isSignInWithEmailLink(currentUrl)) {
    try {
      // 读取之前存储的用户邮箱
      final pendingEmail = window.localStorage.getItem('pendingEmail');
      if (pendingEmail != null) {
        // 完成邮件链接登录
        await FirebaseAuth.instance.signInWithEmailLink(
          email: pendingEmail,
          emailLink: currentUrl,
        );
        // 登录成功后，导航到Hash指定的路由
        final targetRoute = window.location.hash.replaceFirst('#', '');
        if (targetRoute.isNotEmpty) {
          // 使用你的路由框架跳转，这里以Navigator为例
          WidgetsBinding.instance.addPostFrameCallback((_) {
            Navigator.pushNamed(navigatorKey.currentContext!, targetRoute);
          });
        }
        // 清理存储的邮箱
        window.localStorage.removeItem('pendingEmail');
      }
    } catch (e) {
      print('邮件登录失败: $e');
    }
  }

  runApp(const MyApp());
}

3. 关键说明 #

• Firebase Web SDK默认不会保留continueUrl中的Hash片段，因此需要我们手动提取并跳转。
• 必须存储用户邮箱：因为邮件链接本身不包含邮箱信息，登录时需要提供对应邮箱才能完成验证。
• 该方案完全保留Flutter的Hash URL策略，无需切换到Path策略，兼顾浏览器兼容性。

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