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.
Latest comments (3)
You're instructing people to make their supabase keys public? That's basically insane behavior, go fix this guide
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
THANK YOU