Let us see how to enhance our web app's security and user experience by integrating Google authentication using Supabase. This guide will walk you through creating a Google Cloud project, obtaining client credentials, and configuring them in Supabase for seamless Google sign-in functionality.

🔗 Check out the full code for this series here.

Google Cloud is a comprehensive suite of cloud computing services that includes Google Cloud Platform (GCP), Google Workspace, and more. GCP provides a robust infrastructure for building, deploying, and managing web applications, leveraging services such as computing, storage, and machine learning. A Google Cloud project is a top-level entity that organizes resources and services, allowing users to manage access, billing, and resource allocation efficiently.

Creating a new Google Cloud Project and getting the Credentials

Ignore this step if you want to integrate Google login in an already existing project.

1. Sign up for console.cloud.google.com if you didn’t already. Go to your Google Cloud Dashboard, and click “All Projects”, then in the dialog that appeared, click “New Project”.

1. Give your project a suitable name and click “Create”. Wait for a few minutes, and sip that cola while the project is being created.

1. After the project is created, select that project from the “All Projects” dropdown.
2. Click on the hamburger menu on the top left, then select APIs and Services > OAuth Consent Screen.

💡 Tip: If you don’t find these settings, then just search for “OAuth consent screen” in the search bar at the top.

1. Click “Get Started”. Here are the settings that you need to fill/choose:
   1. Give an app name of your choice, preferably the same as your project name.
   2. In the user support email, give your email that you want to be contacted on.
   3. Select audience as “External”
   4. Give your email as the contact information.
   5. Agree to the terms and conditions after carefully reading them.
   6. Click “Create”. This will create a new consent screen for login to your application.

Now we are ready to create a new OAuth Client that will handle the signup and login in our application.

1. Click “Create OAuth Client” on the right side of the screen

1. Fill in the details as follows. For application type, select “Web application”. For “Authorized JavaScript Origins”, select your local host address. If you have a production environment URL, you can add it here too. DO NOT CLICK “CREATE”. We need to enter the “Authorized Redirect URL” from Supabase here.

1. Go to your Supabase Dashboard and select the project for which you want to enable the Google authentication. In our case, we created “supabase-auth-demo” project, so I will be using that one.
2. In the left pane, select the “Authentication” screen

1. In the left pane, click “Sign In / Up” and then scroll down in the “Auth Providers” section and click “Google”, and enable it.

1. Copy the “Callback URL (for OAuth)” URL and head over back to your GCP Project and paste it there. DO NOT CLOSE THIS TAB, as we will have to fill in the details “Client ID” and “Client Secret” after generating it.

1. Add that “Callback URL” from Supabase to the “Authorized redirect URIs” in the OAuth Client in GCP and click “Create”.

1. Now visit the client you just created, copy the “Client ID” and “Client Secret” and paste it in the Supabase Google settings.

Now we are ready to set up the routes in our NextJS application to perform the Google Authentication.

Adding Google authentication functionality to our Next JS application

Now all we need is to add the function that will handle the Google signup and Login for us.

Add the signInWithGoogle function to the component below and use this function on the Google sign in button.

Signup /app/signup/page.ts

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

// rest of the code
...
...
// rest of the code

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);
        }
    }
    // rest of the code
    // ...
    // ...
    // rest of the code
    
     <Button
        type="button"
        variant="outline"
        className="w-full"
        onClick={() => signInWithGoogle()}
    >
        <Mail size={16} className="mr-2" />
        Sign up with Google
    </Button>

And do the same in the file /app/login/page.tsx

Test out the Google Login/Signup flow.

Note: Supabase will take care of the Email and Google integration if you Sign Up with your Gmail address.

💡Tips

1. In case of any errors, look for any console logs in the browser console as well as the server terminal. Also check Supabase logs in your Supabase project.
2. For production, you should publish your Google OAuth Client that you created in the GCP.

🔗 Check out the full code for this series here.

If you found this article useful, like, comment, and share, or just buy me a coffee?