Next.js Supabase Authentication: Complete Guide - Part 3

That Moment Users Asked for "Sign in with Google"

Email authentication works, but let's be honest—nobody likes creating yet another password. When my first users asked, "Can I just use my Google account?" I knew I had to add OAuth. Turns out, it's easier than I thought.

Today we're adding Google authentication to our Next.js and Supabase app. Users will be able to sign up and log in with one click using their Google account. No passwords to remember, no email verification delays—just smooth, instant authentication.

🔗 Check out the full code for this series here

Why Google OAuth Improves User Experience

Think about the last time you signed up for a service. If there was a "Continue with Google" button, you probably clicked it. Why?

• No password fatigue: Users don't need to create and remember another password
• Faster signup: One click vs filling out a form
• Better security: Google's security team is probably better than yours (no offense)
• Social proof: Google has verified this person's email

For developers, it's also easier. Google handles email verification, password resets, and account security. We just receive verified user data.

Understanding Google Cloud Platform

Before we dive in, let me explain what we're setting up. Google Cloud Platform (GCP) is Google's suite of cloud services. We'll use it to create an OAuth application that Supabase will communicate with.

An OAuth client is like a middleman. When a user clicks "Sign in with Google":

1. Your app redirects them to Google
2. User approves access
3. Google sends a code back to your app
4. Your app exchanges that code for user information
5. Supabase creates or logs in the user

We need to tell Google about our app so it knows where to send users back after they authenticate.

Creating a Google Cloud Project

If you're adding Google login to an existing Google Cloud project, skip to the OAuth client creation section. Otherwise, let's create a new project.

Setting Up the Project

1. Go to console.cloud.google.com
2. Sign in with your Google account
3. Click "Select a project" dropdown at the top
4. Click "New Project"

5. Give your project a descriptive name (like "supabase-auth-demo")
6. Click "Create"
7. Wait a minute or two while Google provisions your project

Once created, make sure you've selected your new project from the dropdown at the top.

Configuring the OAuth Consent Screen

This is the screen users see when they click "Sign in with Google." It shows your app name and what permissions you're requesting.

1. Click the hamburger menu (three lines) in the top left
2. Navigate to "APIs & Services" > "OAuth consent screen"

Quick tip: If you can't find it in the menu, just search for "OAuth consent screen" in the search bar at the top.

3. Click "Get Started"
4. Fill in the required information:
   • App name: Your application name (users will see this)
   • User support email: Your email for support inquiries
   • Audience: Select "External" (allows anyone with a Google account)
   • Developer contact: Your email for Google to contact you
5. Read and agree to Google's terms
6. Click "Create"

Your consent screen is now configured! Users will see your app name when they sign in.

Creating the OAuth Client

Now for the important part—creating OAuth credentials that connect Google to Supabase.

1. Click "Create OAuth Client" on the right side

2. Select "Web application" as the application type
3. Give it a name (like "Supabase Auth")
4. Under "Authorized JavaScript origins," add:
   • http://localhost:3000 (for development)
   • Your production URL if you have one (like https://yourapp.com)

Getting the Callback URL from Supabase

Before we finish creating the OAuth client, we need Supabase's callback URL. This is where Google sends users after they authenticate.

Don't close the Google Cloud tab—we'll come back to it!

1. Open your Supabase dashboard in a new tab
2. Select your project
3. Click "Authentication" in the left sidebar

4. Click "Providers"
5. Scroll down to find "Google" and enable it

6. Copy the "Callback URL (for OAuth)" shown in the configuration

Keep this Supabase tab open—we'll need to paste credentials here in a moment!

Finishing the OAuth Client

Go back to your Google Cloud tab:

1. Under "Authorized redirect URIs," paste the callback URL from Supabase
2. Click "Create"

Google will show you a popup with your credentials:

3. Copy the "Client ID"
4. Copy the "Client Secret"

Important: Save these somewhere temporarily—you'll need them in the next step.

Configuring Supabase with Google Credentials

Go back to your Supabase tab (the one showing Google provider settings):

1. Paste the Client ID into the "Client ID" field
2. Paste the Client Secret into the "Client Secret" field
3. Click "Save"

That's it! The hardest part is done. Google and Supabase are now connected.

Adding Google Sign-In to Your Next.js App

Now let's add the functionality to our forms. The code is surprisingly simple.

Understanding the Flow

When users click "Sign in with Google":

1. We call Supabase's signInWithOAuth method
2. Supabase redirects to Google's auth page
3. User approves access on Google
4. Google redirects back to our callback route
5. Callback route exchanges the code for a session
6. User is logged in and redirected to dashboard

All the heavy lifting happens automatically. We just need to trigger it.

Updating the Signup Page

Open app/signup/page.tsx and add this function:

import { useSearchParams } from "next/navigation";
import { createClient } from "@/utils/supabase/client";

export default function SignupForm() {
    const searchParams = useSearchParams();
    const next = searchParams.get("next");
    const supabase = createClient();

    // ... existing form code ...

    async function signInWithGoogle() {
        try {
            const { error } = await supabase.auth.signInWithOAuth({
                provider: "google",
                options: {
                    redirectTo: `${window.location.origin}/auth/callback${
                        next ? `?next=${encodeURIComponent(next)}` : ""
                    }`,
                },
            });

            if (error) {
                throw error;
            }
        } catch (error) {
            alert("There was an error logging in with Google.");
            console.error(error);
        }
    }

    // ... rest of component ...

    // Update the Google button's onClick:
    return (
        // ... form JSX ...
        <Button
            type="button"
            variant="outline"
            className="w-full"
            onClick={() => signInWithGoogle()}
        >
            <Mail size={16} className="mr-2" />
            Sign up with Google
        </Button>
        // ... rest of JSX ...
    );
}

Understanding the Code

Let me break down what's happening:

useSearchParams(): Checks if there's a "next" parameter in the URL. This allows deep linking—users can be sent to a specific page after login.

createClient(): Creates the browser Supabase client to communicate with Supabase.

signInWithOAuth(): Supabase's method to initiate OAuth flow. We specify Google as the provider.

redirectTo: Where to send users after Google authenticates them. We use our callback route that we created in Part 2.

Updating the Login Page

The login page needs the exact same function. Open app/login/page.tsx and add the same signInWithGoogle function and button handler.

import { useSearchParams } from "next/navigation";
import { createClient } from "@/utils/supabase/client";

export default function LoginForm() {
    const searchParams = useSearchParams();
    const next = searchParams.get("next");
    const supabase = createClient();

    async function signInWithGoogle() {
        try {
            const { error } = await supabase.auth.signInWithOAuth({
                provider: "google",
                options: {
                    redirectTo: `${window.location.origin}/auth/callback${
                        next ? `?next=${encodeURIComponent(next)}` : ""
                    }`,
                },
            });

            if (error) {
                throw error;
            }
        } catch (error) {
            alert("There was an error logging in with Google.");
            console.error(error);
        }
    }

    // Update the Google button's onClick in your JSX
    // ... same as signup page ...
}

Testing Google Authentication

Let's test the complete flow:

Development Testing

1. Start your dev server: pnpm dev
2. Visit http://localhost:3000/signup
3. Click "Sign up with Google"
4. You should be redirected to Google's consent screen
5. Select your Google account
6. Approve the permissions
7. You should be redirected back to your dashboard, logged in!

What Happens Behind the Scenes

When you clicked that button, here's what happened:

1. Supabase generated an OAuth URL with your app's credentials
2. Your browser redirected to Google
3. Google checked that your OAuth client is valid
4. Google showed you the consent screen
5. After approval, Google redirected to your callback URL with a code
6. Your callback route exchanged that code for a session
7. Supabase created a user record (or logged in an existing user)
8. You were redirected to the dashboard

All that in about 3 seconds!

How Supabase Handles Duplicate Accounts

Here's something cool I discovered: if a user signs up with an email, then later signs in with Google using the same email, Supabase is smart enough to link them to the same account.

For example:

1. User signs up with john@gmail.com and a password
2. Later, they click "Sign in with Google"
3. They authorize with the same john@gmail.com Google account
4. Supabase recognizes it's the same email and links the accounts

The user can now sign in either way—with email/password or with Google. It just works.

Common Issues and Solutions

"Redirect URI Mismatch" Error

This means the callback URL in Google Cloud doesn't match what Supabase is sending. Double-check:

• Copy the exact callback URL from Supabase settings
• Make sure you didn't add or remove any trailing slashes
• Verify it's saved in Google Cloud's "Authorized redirect URIs"

"Access Blocked: Authorization Error"

This usually happens if your OAuth consent screen isn't properly configured. Make sure:

• You've added all required information to the consent screen
• The user support email is valid
• You've saved the consent screen configuration

Users See "This App Hasn't Been Verified"

This is normal for apps in development. Users can click "Advanced" and then "Go to Your App (unsafe)" to proceed. In production, you'll want to verify your app with Google, but that's only necessary if you need sensitive permissions or expect high volume.

Testing in Production

When you deploy to production, remember to:

1. Add your production URL to "Authorized JavaScript origins" in Google Cloud
2. Add your production callback URL to "Authorized redirect URIs"
3. Update environment variables on your hosting platform

Production Considerations

Publishing Your OAuth App

For production, you should publish your OAuth consent screen. While in development, only you (and test users you manually add) can sign in. Publishing makes it available to everyone.

To publish:

1. Go to OAuth consent screen in Google Cloud
2. Click "Publish App"
3. Follow the verification process if required

For most apps with basic permissions, publishing is instant. If you request sensitive scopes, Google may review your app first.

Monitoring OAuth Usage

Google Cloud provides analytics on your OAuth usage:

• Number of users who've authorized your app
• Authorization success/failure rates
• Most common errors

Find this in the "APIs & Services" > "Credentials" section of Google Cloud.

What We Built

In this part, we added Google OAuth authentication to our app. Now users can:

• ✅ Sign up with Google in one click
• ✅ Log in with Google in one click
• ✅ Have their accounts automatically linked if they use the same email
• ✅ Skip email verification (Google already verified them)

The authentication experience is now significantly smoother. Email auth for those who want it, Google OAuth for those who prefer convenience.

In Part 4, we'll dive into advanced database management. We'll use Prisma ORM to create a profiles table, set up automatic triggers that create profiles when users sign up, and implement Row-Level Security to ensure users can only access their own data.

🔗 Check out the full code for this series here

Social login is now expected by users. If you found this guide helpful, share it with other developers building authentication systems. Connect with me on Twitter or LinkedIn for more web development tips.

Support My Work

If this guide helped you with this topic, I'd really appreciate your support! Creating comprehensive, free content like this takes significant time and effort. Your support helps me continue sharing knowledge and creating more helpful resources for developers.

☕ Buy me a coffee - Every contribution, big or small, means the world to me and keeps me motivated to create more content!

Cover image by FlyD on Unsplash