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
yarn create next-app
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 inat the top right to log in.
Create a Google Cloud Platform Project
- Click on
Select a Projectat the top left.
- (Or, if a project is currently selected, click on the current project name at the top left.)
New Projectat the top right.
- Fill in your app information, then click
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:
- Go to your Supabase Project Dashboard
- Go to the
Authenticationicon in the left sidebar
- Click on
Providersunder the Configuration section
- Click on Google from the accordion list to expand and you’ll find your Redirect URL, you can click
Copyto 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
yarn add @supabase/auth-helpers-nextjs
npm install @supabase/auth-helpers-react
yarn add @supabase/auth-helpers-react
Set up environment variables
create a .env file inside your project
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
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!