Implement Sign in with Google using Supabase Auth in NextJS
Tags: nextjs, howto, javascript, beginners
Published: 2023-02-26 08:32:07

---
title: Implement Sign in with Google using Supabase Auth in NextJS
published: true
description: I'm using NextJS, Supabase, Typescript, and ChakraUI when implementing Sign in with Google
tags: nextjs, howto, javascript, beginner
# cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6408795xx6b2z0q5exht.png
# Use a ratio of 100:42 for best results.
# published_at: 2023-02-26 07:31 +0000
---

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ezg2uj5xk8i7vdybhpww.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xhb93e2r9mcx6femnj1i.png)

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

```javascript
npm i @supabase/supabase-js
```

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

```javascript
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.

```javascript
// ./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

```javascript
// ./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 <FcGoogle/>

![Login with Google Button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ku0xq96v6maq6xbkcbzg.png)

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

![Authenticated Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6408795xx6b2z0q5exht.png)

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