DEV Community

Irwan Phan
Irwan Phan

Posted on • Updated on

Implement Sign in with Google using Supabase Auth in NextJS

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

Get 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

Google Auth Provider in 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


Enter fullscreen mode Exit fullscreen mode

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)


Enter fullscreen mode Exit fullscreen mode

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
        // }
    })
}


Enter fullscreen mode Exit fullscreen mode

then create the signOut.ts



// ./connections/signOut.ts

import { supabase } from "./supabase";

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


Enter fullscreen mode Exit fullscreen mode

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

Login with Google Button



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


Enter fullscreen mode Exit fullscreen mode

Authenticated Example

I created a component to replace the button after checking the authentication that shown like above.

Latest comments (3)

Collapse
 
megabasedchad profile image
L3 Tweet Engineer

You're instructing people to make their supabase keys public? That's basically insane behavior, go fix this guide

Collapse
 
irwanphan profile image
Irwan Phan

Sorry, I don't quite understand, would you like to elaborate?
I thought it is common practice to put it in .env file or environment variables

Collapse
 
karan16prog profile image
Karan

THANK YOU