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>

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