Docs
Social Authentication

Social Authentication

Social authentication block for React Single Page Applications

Installation

Open in

Folder structure

This block includes the Supabase client. If you already have one installed, you can skip overwriting it.

  • components
  • lib
    • supabase
1'use client'
2
3import { useState } from 'react'
4
5import { cn } from '@/lib/utils'
6import { createClient } from '@/lib/supabase/client'
7import { Button } from '@/components/ui/button'
8import {
9  Card,
10  CardContent,
11  CardDescription,
12  CardHeader,
13  CardTitle,
14} from '@/components/ui/card'
15
16export function LoginForm({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {
17  const [error, setError] = useState<string | null>(null)
18  const [isLoading, setIsLoading] = useState(false)
19
20  const handleSocialLogin = async (e: React.FormEvent) => {
21    e.preventDefault()
22    const supabase = createClient()
23    setIsLoading(true)
24    setError(null)
25
26    try {
27      const { error } = await supabase.auth.signInWithOAuth({
28        provider: 'github',
29      })
30
31      if (error) throw error
32      location.href = '/protected'
33    } catch (error: unknown) {
34      setError(error instanceof Error ? error.message : 'An error occurred')
35      setIsLoading(false)
36    }
37  }
38
39  return (
40    <div className={cn('flex flex-col gap-6', className)} {...props}>
41      <Card>
42        <CardHeader>
43          <CardTitle className="text-2xl">Welcome!</CardTitle>
44          <CardDescription>Sign in to your account to continue</CardDescription>
45        </CardHeader>
46        <CardContent>
47          <form onSubmit={handleSocialLogin}>
48            <div className="flex flex-col gap-6">
49              {error && <p className="text-sm text-destructive-500">{error}</p>}
50              <Button type="submit" className="w-full" disabled={isLoading}>
51                {isLoading ? 'Logging in...' : 'Continue with GitHub'}
52              </Button>
53            </div>
54          </form>
55        </CardContent>
56      </Card>
57    </div>
58  )
59}

Usage

Once you install the block in your React project, you'll get all the necessary pages and components to set up a social authentication flow.

Getting started

After installing the block, you'll have the following environment variables in your .env.local file:

VITE_SUPABASE_URL=
VITE_SUPABASE_PUBLISHABLE_KEY=

  • If you're using supabase.com, you can find these values in the Connect modal under App Frameworks or in your project's API settings.

  • If you're using a local instance of Supabase, you can find these values by running supabase start or supabase status (if you already have it running).

Setting up third party providers

We support a wide variety of social providers that you can use to integrate with your application. The full list is available here. This block uses the implicit flow with GitHub as the provider. To switch providers, just update the provider field in the supabase.auth.signInWithOAuth call. Enable the provider you want to use under Auth Providers in the Supabase Dashboard and add the necessary credentials.

Setting up routes and redirect URLs

  1. Set the site URL in the URL Configuration settings in the Supabase Dashboard.
  2. Update the redirect paths in login-form.tsx to point to your app’s logged-in routes. Our examples use /protected, but you can set this to whatever fits your app.

Combining social auth with password-based auth

If you want to combine this block with the password-based auth, you need to copy the handleSocialLogin function into the password-based login-form.tsx component and bind it to a button.

Further reading