Supabase OAuth: Social Login with Google and GitHub

// OAuthLogin.jsx
import { supabase } from './supabaseClient'

function OAuthLogin() {
  async function handleGoogleLogin() {
    const { data, error } = await supabase.auth.signInWithOAuth({
      provider: 'google',
      options: {
        redirectTo: `${window.location.origin}/dashboard`,
        scopes: 'email profile',
        queryParams: {
          access_type: 'offline',
          prompt: 'consent'
        }
      }
    })

    if (error) {
      console.error('Google login error:', error.message)
    }
  }

  async function handleGitHubLogin() {
    const { data, error } = await supabase.auth.signInWithOAuth({
      provider: 'github',
      options: {
        redirectTo: `${window.location.origin}/dashboard`,
        scopes: 'read:user user:email'
      }
    })

    if (error) {
      console.error('GitHub login error:', error.message)
    }
  }

  return (
    <div className="oauth-buttons">
      <h2>Log In</h2>
      
      <button onClick={handleGoogleLogin} className="btn-google">
        <img src="/google-icon.svg" alt="Google" />
        Continue with Google
      </button>

      <button onClick={handleGitHubLogin} className="btn-github">
        <img src="/github-icon.svg" alt="GitHub" />
        Continue with GitHub
      </button>

      <div className="divider">OR</div>

      <a href="/login/email">Log in with Email</a>
    </div>
  )
}

export default OAuthLogin

// App.jsx - Automatic callback handling
import { useEffect, useState } from 'react'
import { supabase } from './supabaseClient'
import { useNavigate } from 'react-router-dom'

function App() {
  const navigate = useNavigate()

  useEffect(() => {
    // Listen for OAuth callback
    supabase.auth.onAuthStateChange((event, session) => {
      if (event === 'SIGNED_IN') {
        console.log('User signed in:', session.user)
        console.log('Provider:', session.user.app_metadata.provider)
        
        // Redirect to dashboard after OAuth login
        navigate('/dashboard')
      }
    })
  }, [])

  return (
    // Your routes
  )
}

// Dashboard.jsx - Access OAuth user data
function Dashboard() {
  const [user, setUser] = useState(null)

  useEffect(() => {
    getUser()
  }, [])

  async function getUser() {
    const { data: { user } } = await supabase.auth.getUser()
    setUser(user)
  }

  if (!user) return <div>Loading...</div>

  return (
    <div>
      <h1>Welcome!</h1>
      <div className="user-info">
        <img 
          src={user.user_metadata.avatar_url} 
          alt="Avatar" 
          className="avatar"
        />
        <p><strong>Name:</strong> {user.user_metadata.full_name}</p>
        <p><strong>Email:</strong> {user.email}</p>
        <p><strong>Provider:</strong> {user.app_metadata.provider}</p>
        
        {/* GitHub-specific data */}
        {user.app_metadata.provider === 'github' && (
          <p><strong>GitHub Username:</strong> {user.user_metadata.user_name}</p>
        )}
      </div>
    </div>
  )
}

// Available user metadata from OAuth providers

// Google provides:
{
  "full_name": "John Doe",
  "avatar_url": "https://lh3.googleusercontent.com/...",
  "email": "[email protected]",
  "email_verified": true,
  "phone_verified": false,
  "sub": "google-id",
  "iss": "https://accounts.google.com"
}

// GitHub provides:
{
  "full_name": "John Doe",
  "avatar_url": "https://avatars.githubusercontent.com/...",
  "email": "[email protected]",
  "email_verified": false,
  "phone_verified": false,
  "sub": "github-id",
  "user_name": "johndoe",
  "preferred_username": "johndoe"
}

// Access in your components
const { data: { user } } = await supabase.auth.getUser()

const fullName = user.user_metadata.full_name
const avatarUrl = user.user_metadata.avatar_url
const provider = user.app_metadata.provider // 'google' or 'github'

// LoginPage.jsx - Unified login page
import { supabase } from './supabaseClient'
import { useState } from 'react'

function LoginPage() {
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')

  async function signInWithProvider(provider) {
    await supabase.auth.signInWithOAuth({
      provider: provider,
      options: {
        redirectTo: `${window.location.origin}/dashboard`
      }
    })
  }

  async function handleEmailLogin(e) {
    e.preventDefault()
    await supabase.auth.signInWithPassword({ email, password })
  }

  return (
    <div className="login-page">
      <h2>Welcome Back</h2>

      {/* Social Login Options */}
      <div className="social-login">
        <button onClick={() => signInWithProvider('google')}>
          Continue with Google
        </button>
        <button onClick={() => signInWithProvider('github')}>
          Continue with GitHub
        </button>
        <button onClick={() => signInWithProvider('facebook')}>
          Continue with Facebook
        </button>
      </div>

      <div className="divider">OR</div>

      {/* Email/Password Login */}
      <form onSubmit={handleEmailLogin}>
        <input
          type="email"
          placeholder="Email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
        <input
          type="password"
          placeholder="Password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
        />
        <button type="submit">Log In with Email</button>
      </form>
    </div>
  )
}

export default LoginPage