Supabase Google Login on Web

targetLanguage":"Chinese"

texts":["","","","","","","","",""],

• "","This guide will help you integrate Google Sign-In with Supabase Authentication on Web. It is assumed that you have already completed:","Google Login Web setup","Supabase Google Login - General Setup","Implementation","Implementation","The complete implementation is available in the example app’s file. This guide explains the key concepts and how to use it.","the","the"]]} the
• the the.

the

the the supabaseAuthUtils.ts the

使用身份验证助手

这个 authenticateWithGoogleSupabase 函数处理整个身份验证流程：

import { authenticateWithGoogleSupabase } from './supabaseAuthUtils';

const result = await authenticateWithGoogleSupabase();
if (result.success) {
  console.log('Signed in:', result.user);
  // Navigate to your authenticated area
} else {
  console.error('Error:', result.error);
}

重要：重定向处理

重要：重定向处理

在使用 Google 登录时， 必须 在重定向发生时调用插件中的任何函数来初始化插件，以便它可以处理重定向并关闭弹出窗口。您可以调用 isLoggedIn() 或 initialize() - both 会触发重定向处理。

这是 OAuth popup 流程正常工作所必需的。

实现示例

将此添加到处理 Google Sign-In 的组件中：

import { useEffect } from 'react';
import { SocialLogin } from '@capgo/capacitor-social-login';

function SupabasePage() {
  // Check Google login status on mount to invoke redirect handling
  // This doesn't serve any functional purpose in the UI but ensures
  // that any pending OAuth redirects are properly processed
  useEffect(() => {
    const checkGoogleLoginStatus = async () => {
      try {
        await SocialLogin.isLoggedIn({ provider: 'google' });
        // We don't use the result, this is just to trigger redirect handling
      } catch (error) {
        // Ignore errors - this is just for redirect handling
        console.log('Google login status check completed (redirect handling)');
      }
    };

    checkGoogleLoginStatus();
  }, []);

  // ... rest of your component
}

查看 SupabasePage.tsx 以获取完整示例。

如何工作

有关详细说明，包括 nonce 生成、 JWT 验证和 Supabase 登录，请参见 How It Works section in the General Setup guide.

查看完整的code参考文档，请参见 查看完整的Code参考文档.

另外请参见：

• SupabasePage.tsx - 使用重定向处理的示例组件
• SupabaseCreateAccountPage.tsx - 重定向处理示例创建账户页面

重要注意事项

重定向处理

当使用 Google 登录时， MUST 在重定向发生时从插件中调用任何函数以初始化插件，使其可以处理重定向并关闭弹出窗口。您可以调用 isLoggedIn() OR initialize() - 两者都会触发重定向处理。

这是 OAuth 弹出窗口流程正常工作所必需的。没有这个，弹出窗口在身份验证后不会关闭。

Nonce 处理

Nonce 实现遵循了 React Native Google Sign In 文档中的模式:

• rawNonce 转到 Supabase 的 signInWithIdToken()
• Supabase 生成了一个散列值 rawNonce 并将其与Google Sign-In ID令牌中的内容进行比较 nonceDigest （SHA-256哈希，16进制编码）将发送到
• nonceDigest Google Sign-In API中的参数 nonce 自动重试

标题：自动重试

如果第一次尝试JWT验证失败，则注销并重试一次

• 这处理了缓存令牌可能具有错误的非法令牌的案例
• 如果重试也失败，则返回错误
• 故障排除

标题：故障排除

If authentication fails:

• Redirect未能正常工作: 确保您在组件挂载时调用 isLoggedIn() on component mount (see example above)
• : 验证您的Google Client ID在Google Cloud Console和Supabase中匹配Invalid audience
• : 检查Google Cloud Console和Supabase中是否配置了授权重定向URLAuthorized redirect URLs
• : 检查您是否使用: 检查控制台日志 - 函数将自动重试，但如果需要，可以手动注销
• Nonce mismatch: 确保您使用 mode: 'online' 在初始化调用中获取 idToken
• Review 示例应用程序 code 参考

从 Supabase Google Login on Web 中继续

如果您正在使用 Supabase Google Login on Web 来规划身份验证和帐户流程，连接它到 使用 @capgo/capacitor-social-login 为在使用 @capgo/capacitor-social-login 中的本机功能 @capgo/capacitor-social-login for the implementation detail in @capgo/capacitor-social-login, @capgo/capacitor-passkey for the implementation detail in @capgo/capacitor-passkey, @capgo/capacitor-native-biometric for the implementation detail in @capgo/capacitor-native-biometric, and Two-factor authentication for the implementation detail in Two-factor authentication.