Expo集成Supabase Google登录报错：RNGoogleSignin未找到

错误原因 #

RNGoogleSignin是原生React Native模块，Expo Managed应用不支持直接使用未经过Expo预构建或配置的原生模块，所以即便安装了依赖也会触发TurboModule找不到的错误。直接改用Supabase官方的OAuth流程即可实现Google登录，无需依赖该原生模块。

实现Supabase Auth Google登录步骤 #

1. 配置Supabase项目的Google OAuth #

• 登录Supabase控制台，进入目标项目
• 进入Authentication > Providers > Google
• 启用Google登录，填入Google Cloud控制台获取的Client ID和Client Secret（注意：Expo应用需在Google Cloud的OAuth授权页面添加exp://127.0.0.1:19000（本地测试）和你的Expo生产域名作为授权回调URL）

2. 安装必要依赖 #

在Expo项目中执行安装命令：

npx expo install @supabase/supabase-js @supabase/auth-ui-react @supabase/auth-ui-shared

3. 初始化Supabase客户端 #

创建配置文件（如supabaseClient.js）并初始化客户端：

import { createClient } from '@supabase/supabase-js';

const supabaseUrl = '你的Supabase项目URL';
const supabaseAnonKey = '你的Supabase匿名密钥';

export const supabase = createClient(supabaseUrl, supabaseAnonKey);

4. 实现Google登录功能 #

方式一：手动实现登录按钮

import { supabase } from './supabaseClient';

const handleGoogleLogin = async () => {
  const { error } = await supabase.auth.signInWithOAuth({
    provider: 'google',
    options: {
      redirectTo: 'exp://127.0.0.1:19000/redirect' // 对应Expo应用的回调页面路径
    }
  });

  if (error) {
    console.error('登录失败:', error.message);
  }
};

// 在组件中调用
<button onPress={handleGoogleLogin}>Google登录</button>

方式二：使用Supabase Auth UI组件

import { View } from 'react-native';
import { Auth } from '@supabase/auth-ui-react';
import { ThemeSupa } from '@supabase/auth-ui-shared';
import { supabase } from './supabaseClient';

export default function AuthScreen() {
  return (
    <View>
      <Auth
        supabaseClient={supabase}
        appearance={{ theme: ThemeSupa }}
        providers={['google']}
        redirectTo="exp://127.0.0.1:19000/redirect"
      />
    </View>
  );
}

5. 处理登录回调（可选） #

在回调页面添加会话验证逻辑：

import { useEffect } from 'react';
import { supabase } from './supabaseClient';
import { useNavigation } from '@react-navigation/native';

export default function RedirectScreen() {
  const navigation = useNavigation();

  useEffect(() => {
    const getSession = async () => {
      const { data } = await supabase.auth.getSession();
      if (data.session) {
        // 登录成功，跳转到首页
        navigation.navigate('Home');
      }
    };

    getSession();
  }, [navigation]);

  return <View>登录中...</View>;
}

6. 验证登录状态 #

在应用页面监听用户登录状态：

import { useEffect, useState } from 'react';
import { Text } from 'react-native';
import { supabase } from './supabaseClient';

export default function HomeScreen() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    // 获取当前用户
    const getUser = async () => {
      const { data: { user } } = await supabase.auth.getUser();
      setUser(user);
    };

    getUser();

    // 监听用户状态变化
    const subscription = supabase.auth.onAuthStateChange((_event, session) => {
      setUser(session?.user ?? null);
    });

    return () => subscription.unsubscribe();
  }, []);

  return user ? <Text>欢迎, {user.email}</Text> : <Text>请登录</Text>;
}

内容的提问来源于stack exchange，提问作者Jay Suthar