Implement Sign in with Google using Supabase Auth in NextJS

#nextjs #howto #javascript #beginners

I'm writing this as my personal documentation also, because I was having a hard time when I tried re-implementing this in another project. Feels free to give me advice for better way to implement this.

Get Your Google Credential

Here's the step:

First of all, sign in to cloud.google.com.
Create or select a project
Go to APIs & Services, Credentials
Create Credentials, and pick OAuth client ID
Copy the CLIENT_ID and CLIENT_SECRET to your local .env or note

Enter Google Credentials On Supabase

Here's the step:

Go to your Supabase project, on the left menu pick Authentication
On menu Providers, look for Google, then enable it
Paste Google's CLIENT_ID and CLIENT_SECRET then hit save
Copy the redirect URL and paste to cloud.google.com project, in your previous Credentials, paste to Authorized redirect URIs

Local ENV

Go to your Supabase Project, to Project Settings, API
copy your Project URL to local ENV and name it NEXT_PUBLIC_SUPABASE_URL
copy your Anon Public Key in Project API Keys to local ENV and name it NEXT_PUBLIC_SUPABASE_ANON_KEY

Create a Sign In module

First, install Supabase Client, using npm or yarn



npm i @supabase/supabase-js

Then connect to Supabase, and make sure the URL is available



import { createClient } from "@supabase/supabase-js"

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL || ''
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY || ''

if (!supabaseUrl) throw new Error('Supabase URL not found.')
if (!supabaseAnonKey) throw new Error('Supabase Anon key not found.')

export const supabase = createClient(supabaseUrl, supabaseAnonKey)

I create a connections folder and create a signIn.ts file inside, for first test run, I do not use any options on the function.



// ./connections/signIn.ts

import { supabase } from "./supabase"

export async function signInWithGoogle() {
    const { data, error } = await supabase.auth.signInWithOAuth({
        provider: 'google',
        // options: {
        //     // redirectTo: getURL() // function to get your URL
        // }
    })
}

then create the signOut.ts



// ./connections/signOut.ts

import { supabase } from "./supabase";

export async function signOut() {
    const signOut = await supabase.auth.signOut()
}

Now you can apply the signInWithGoogle() and the signOut() to your preferable trigger.
here's an example, I am using Chakra-UI, you so the theming with Button was preset in theme and there's the Box element, with the react icon



<Button
    onClick={() => {
        toast({title:'Redirecting...'})
        signInWithGoogle()
    }}>
    <Box as={FcGoogle} mr={1} fontSize={20}/>Login
</Button>