React Native Expo中配置Supabase Google Auth：解决无Client Secret问题

核心原因 #

Google针对移动应用（Android/iOS）类型的OAuth客户端不会生成Client Secret（移动应用无法安全存储密钥），但Supabase的Google Auth Provider需要该密钥。解决思路是创建Web应用类型的OAuth客户端获取Secret，同时配置移动应用的授权回调地址。

具体步骤 #

1. 在Google Cloud Console创建Web应用OAuth客户端 #

• 进入「API和服务」→「凭据」页面
• 点击「创建凭据」→「OAuth客户端ID」
• 应用类型选「Web应用」，填写名称（如Supabase Web Auth）
• 在「已授权的重定向URI」中添加Supabase回调地址：https://<你的Supabase项目ID>.supabase.co/auth/v1/callback
• 创建后即可获取Client ID和Client Secret，复制保存这两个值

2. 配置移动应用的授权回调地址 #

• 回到「凭据」页面，找到已创建的（或新建）移动应用OAuth客户端
• 编辑该客户端，在「已授权的重定向URI」中添加Expo应用的回调地址：
  • Android：com.yourappname:/oauthredirect（替换为你的应用包名）
  • iOS：yourappscheme:/oauthredirect（替换为你的应用scheme，可在app.json的scheme字段查看）
• 保存配置

3. 在Supabase控制台配置Google Auth Provider #

• 进入项目「Authentication」→「Providers」→「Google」
• 粘贴Web应用的Client ID和Client Secret
• 在「已授权的重定向URI」中添加Expo应用的回调地址（与步骤2一致）
• 启用Google Provider并保存

4. Expo项目中实现Google Auth #

结合@supabase/supabase-js和expo-auth-session实现授权，核心代码示例：

import { createClient } from '@supabase/supabase-js';
import { AuthSession } from 'expo-auth-session';

const supabaseUrl = 'https://<你的Supabase项目ID>.supabase.co';
const supabaseAnonKey = '<你的Supabase匿名密钥>';
const supabase = createClient(supabaseUrl, supabaseAnonKey);

const signInWithGoogle = async () => {
  const { data, error } = await supabase.auth.signInWithOAuth({
    provider: 'google',
    options: {
      redirectTo: 'com.yourappname:/oauthredirect', // 替换为你的应用回调地址
    },
  });
  
  if (error) {
    console.error('登录错误:', error);
    return;
  }

  const result = await AuthSession.startAsync({ authUrl: data.url });
  if (result.type === 'success') {
    await supabase.auth.getSessionFromUrl(result.url);
    const { data: { user } } = await supabase.auth.getUser();
    console.log('用户信息:', user);
  }
};

注意事项 #

• 确保app.json中配置了正确的scheme字段：

  {
    "expo": {
      "scheme": "yourappscheme"
    }
  }
  

• 所有回调地址必须完全匹配，包括大小写和特殊字符
• Expo Go测试时可临时用exp://127.0.0.1:19000作为回调地址，正式发布前替换为应用实际回调地址

内容的提问来源于stack exchange，提问作者Suneth Udayanaga