Login with gmail in react native expo with Supabase

To implement “Login with Gmail (Google Sign-In) in React Native Expo using Supabase”, follow these steps. Expo provides easy integration using expo-auth-session and Supabase supports OAuth login.

✅ Prerequisites

• A Supabase project

• React Native app using Expo (Managed Workflow)

• Your app must be served over HTTPS (in dev use expo.dev)

• Google OAuth credentials (Client ID & Secret)

🧩 1. Enable Google Auth in Supabase

Go to [Supabase Project] → Authentication → Providers → Google

Enable Google

Add your credentials:

Client ID

Client Secret

📦 2. Install Dependencies

npx expo install expo-auth-session
npm install @supabase/supabase-js

Configure Supabase Client

Create a file supabase.js:

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

const supabaseUrl = 'https://YOUR_PROJECT_ID.supabase.co';
const supabaseAnonKey = 'YOUR_PUBLIC_ANON_KEY';

export const supabase = createClient(supabaseUrl, supabaseAnonKey);

GoogleLoginButton

import React, { useState } from 'react';
import { TouchableOpacity, Text, StyleSheet } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';
import { supabase } from '../utils/supabase';
import { useTheme } from '../theme/ThemeContext';

const GoogleLoginButton = () => {
    const [disabled, setDisabled] = useState(false);
    const [isLoading, setIsLoading] = useState(false);
    const { colors } = useTheme();

    // login with gmail and redirect to profile page

    const signInWithGoogle = async () => {
        setIsLoading(true);
        try {
            const { error } = await supabase.auth.signInWithOAuth({
                provider: 'google',
                options: {
                    redirectTo: 'http://localhost:8081/profile', // or your custom callback URL                  
                },
            });

            if (error) throw error;
        } catch (error) {
            console.error('Google sign-in error:', error.message);
        } finally {
            setIsLoading(false);
        }
    };


    return (
        <TouchableOpacity
            style={[styles.button, (isLoading || disabled) && styles.buttonDisabled]}
            onPress={signInWithGoogle}
            disabled={isLoading || disabled}
        >
            <LinearGradient
                colors={['#4285F4', '#34A853']}
                style={styles.gradientButton}
                start={{ x: 0, y: 0 }}
                end={{ x: 1, y: 0 }}
            >
                {/* Google "G" Icon */}
                <Text style={styles.googleIcon}>G</Text>
                <Text style={[styles.buttonText, { color: colors.white }]}>
                    {isLoading ? 'Signing in...' : 'Continue with Google'}
                </Text>
            </LinearGradient>
        </TouchableOpacity>
    );
};



export default GoogleLoginButton;