Setting up Google Auth using NextJS and Supabase

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.

lets create our project first

npx create-next-app@latest
# or
yarn create next-app
# or
pnpm create next-app

To enable Google Auth for your project, you need to set up a Google OAuth application and add the application credentials to your Supabase Dashboard.

Access your Google Cloud Platform account

• Go to cloud.google.com.
• Click on Sign in at the top right to log in.

Create a Google Cloud Platform Project

• Click on Select a Project at the top left.
• (Or, if a project is currently selected, click on the current project name at the top left.)
• Click New Project at the top right.
• Fill in your app information, then click Create.

This should bring you to the dashboard for your new project.

Create the OAuth Keys for your project

From your project’s dashboard screen: there is a search bar at the top of the page click and search OAuth and click on OAuth consent screen from the list. Select the external and create.

fill out your app information and developer contact information. Click Save and continue at the bottom.

Find your callback URL

The next step requires a callback URL, which looks like this: https://<project-ref>.supabase.co/auth/v1/callback

• Go to your Supabase Project Dashboard
• Go to the Authentication icon in the left sidebar
• Click on Providers under the Configuration section
• Click on Google from the accordion list to expand and you’ll find your Redirect URL, you can click Copy to copy it to the clipboard

Create your Google credentials

Create OAuth client ID select the web application.The most important part is Authorized redirect URIs. It is realy important that we get this right so lets go over to supabase and create a new project.

then paste the redirect url and hit create. now we have the Client ID and Client Secret paste these in supabase and enabled the google provider

lets get back to vscode and

cd supabase-google-auth-article && npm install @supabase/supabase-js

Install the Next.js helper library

npm install @supabase/auth-helpers-nextjs
# or
yarn add @supabase/auth-helpers-nextjs

npm install @supabase/auth-helpers-react
# or
yarn add @supabase/auth-helpers-react

Set up environment variables

create a .env file inside your project

NEXT_PUBLIC_SUPABASE_URL=YOUR_SUPABASE_URL
2NEXT_PUBLIC_SUPABASE_ANON_KEY=YOUR_SUPABASE_ANON_KEY

Retrieve your project URL and anon key in your project’s API_SETTINGS in the Dashboard

We can run our project.

npm run dev

project is up and running on http://localhost:3000

we can clean up the file and just create an basic Home and Login page

we need to wrap our pages/_app.js component with the SessionContextProvider component:

we can go back to pages/index.js and add to login With Google functionality

in our LoginPage component get an supabase object and create an async function with using supabase object. make sure to add onClick in your button

in our HomePage component we need to check the session if user loggedIn. if process is success we can show our home page.

now we need to add logout functionality

in our Home function get an supabase object and create an async function with using supabase object. make sure to add onClick in your button

We can succesffuly login with google and logout!

Source Code:

GitHub - taylankalkan01/supabase-google-auth-article