Seamless Google Login With Supabase And Next.js

Oct 23, 2025 by Alex Braham 48 views

Hey guys! Ever wanted to effortlessly integrate Google Login into your Next.js application? It's a breeze when you combine the power of Supabase and Next.js. This guide will walk you through the entire process, from setting up your Supabase project to implementing the login functionality and handling user sessions. We'll cover everything you need to know to get your app up and running with Google authentication. So, buckle up, and let's dive into the world of secure and user-friendly authentication!

Setting Up Your Supabase Project

First things first, you'll need a Supabase project. If you haven't already, head over to Supabase and create a new project. It's super simple! Once your project is ready, you'll need to enable the Google provider. Here's how to do it:

Navigate to the Authentication settings: In your Supabase dashboard, click on the "Authentication" icon. It looks like a lock. Inside the Authentication settings, you'll find various options, including "Providers."
Enable Google as a Provider: Click on "Providers." You'll see a list of available providers, including Google. Click on the "Google" provider to enable it.
Configure Google OAuth Settings: You'll need to configure your Google OAuth settings. This involves creating a Google Cloud project and obtaining your OAuth client ID and client secret. Don't worry, I'll guide you through it:
- Create a Google Cloud Project: Go to the Google Cloud Console and create a new project (or use an existing one). Give your project a name that makes sense for your application.
- Enable the Google+ API: In the Google Cloud Console, navigate to the "APIs & Services" section and enable the "Google+ API." (Note: You may see the "Google People API" instead, it's the updated version. Enable that one if you don't find Google+).
- Configure OAuth Consent Screen: Go to "APIs & Services" -> "OAuth consent screen." Choose the user type (usually "External" for apps you'll share publicly) and fill out the necessary information, such as your app name, user support email, and authorized domains (your Supabase project URL).
- Create OAuth Credentials: In "APIs & Services" -> "Credentials," click "Create Credentials" and select "OAuth client ID." Choose "Web application" as the application type. Give your client a name (like "Next.js App"). In the "Authorized JavaScript origins" field, add your Next.js app's URL (e.g., http://localhost:3000 for local development and your deployed app's URL for production). In the "Authorized redirect URIs" field, add https://<your-supabase-project-ref>.supabase.co/auth/v1/callback and http://localhost:3000/auth/callback (replace <your-supabase-project-ref> with your Supabase project's unique reference).
- Get Client ID and Client Secret: After creating the OAuth client ID, you'll be provided with a client ID and client secret. Copy these credentials; you'll need them in your Supabase project.
Enter Credentials in Supabase: Go back to your Supabase dashboard, paste your Google client ID and client secret into the respective fields, and save the settings.

Great job! You've successfully set up your Supabase project and enabled Google authentication. Now, let's move on to the Next.js side of things.

Setting up Next.js for Google Login with Supabase

Now that your Supabase project is ready, let's get your Next.js application ready to rock. We'll install the necessary packages, create the authentication flow, and integrate it with Supabase. Ready, set, go!

Create a Next.js App (if you don't have one): If you already have a Next.js app, awesome! If not, create one using the following command in your terminal:
```
npx create-next-app my-supabase-app
cd my-supabase-app
```
Install Supabase JavaScript Client: You'll need the Supabase JavaScript client to interact with your Supabase backend. Install it using npm or yarn:
```
npm install @supabase/supabase-js
# or
yarn add @supabase/supabase-js
```
Initialize Supabase Client: Create a file (e.g., utils/supabaseClient.js) to initialize the Supabase client. Replace YOUR_SUPABASE_URL and YOUR_SUPABASE_ANON_KEY with your project's URL and anon key from your Supabase dashboard (Settings -> API):
```
import { createClient } from '@supabase/supabase-js'

const supabaseUrl = 'YOUR_SUPABASE_URL'
const supabaseAnonKey = 'YOUR_SUPABASE_ANON_KEY'

export const supabase = createClient(supabaseUrl, supabaseAnonKey)
```

Create the Authentication Callback Route: Create a route to handle the authentication callback from Supabase. This route will be responsible for exchanging the authorization code for tokens. Create a file (e.g., pages/auth/callback.js) with the following code:

import { useEffect } from 'react'
import { useRouter } from 'next/router'
import { supabase } from '../../utils/supabaseClient'

function AuthCallback() {
  const router = useRouter()

  useEffect(() => {
    async function handleCallback() {
      if (router.query.code) {
        await supabase.auth.exchangeCodeForSession(router.query.code)
        router.push('/') // Redirect to your home page or a success page
      } else {
        // Handle any errors during the authentication process.
        console.error('No code provided in the query parameters.')
        router.push('/login?error=auth_failed') // Redirect to login page with an error
      }
    }

    handleCallback()
  }, [router])

  return <p>Redirecting...</p> // You can display a loading message or redirect immediately
}

export default AuthCallback

Implement the Login Function: Create a login function that redirects the user to the Google authentication flow. You can put this function in a component (e.g., components/LoginButton.js) or a utility file.

import { supabase } from '../utils/supabaseClient'

async function signInWithGoogle() {
  await supabase.auth.signInWithOAuth({
    provider: 'google',
    options: {
      redirectTo: `${window.location.origin}/auth/callback`,
    },
  })
}

function LoginButton() {
  return (
    <button onClick={signInWithGoogle}>Sign in with Google</button>
  )
}

export default LoginButton

Use the Login Button: Import and use the LoginButton component in your login page or any page where you want to initiate the Google login flow. For example:

// pages/login.js
import LoginButton from '../components/LoginButton'

function LoginPage() {
  return (
    <div>
      <h1>Login</h1>
      <LoginButton />
    </div>
  )
}

export default LoginPage

Implement Session Handling: Add session handling to your application to manage user state. You can use the supabase.auth.getSession() method to get the current session and supabase.auth.onAuthStateChange() to listen for authentication state changes. Here's a basic example:

// _app.js
import { useState, useEffect } from 'react'
import { supabase } from '../utils/supabaseClient'

function MyApp({ Component, pageProps }) {
  const [session, setSession] = useState(null)

  useEffect(() => {
    supabase.auth.getSession().then(({ data: { session } }) => {
      setSession(session)
    })

    const { data: { subscription } } = supabase.auth.onAuthStateChange((_event, session) => {
      setSession(session)
    })

    return () => subscription.unsubscribe()
  }, [])

  return (
    <>
      {session ? (
        <Component {...pageProps} />
      ) : (
        <p>Please log in.</p> // Or redirect to a login page
      )}
    </>
  )
}

export default MyApp

Voila! You've successfully integrated Google Login with Supabase and Next.js. Time to test your work and see how it works.

Testing and Further Improvements

Alright, you've got the basics down, but how do you test this to make sure everything is working as it should? Let's take a look.

Testing Your Google Login Integration

Run Your Next.js App: Start your Next.js development server using npm run dev or yarn dev. This will typically launch your app on http://localhost:3000.
Navigate to the Login Page: If you've created a dedicated login page (as suggested in the example above), navigate to it in your browser. Otherwise, go to the page where you placed the LoginButton component.
Click the "Sign in with Google" Button: Click the button you created. This will redirect you to Google's authentication page.
Sign In with Your Google Account: Log in with your Google account. You may be prompted to grant your application access to your Google account information. Grant the permissions.
Be Redirected Back to Your App: After successful authentication, you should be redirected back to your application, likely to your home page or a success page.
Verify User Session: Check if the user is authenticated by inspecting the session data. You can do this by using supabase.auth.getSession() in your application and checking the returned user object.

If everything works as described, congratulations! You've successfully implemented Google Login with Supabase and Next.js.

Further Improvements

Error Handling: Implement robust error handling to gracefully handle authentication failures. Display user-friendly error messages and provide options for retrying.
User Profiles: After successful authentication, consider creating or updating user profiles in your Supabase database. You can store user information such as name, email, and profile picture.
Custom UI: Customize the appearance of the login button and other UI elements to match your application's branding.
Session Management: Implement a more advanced session management strategy, such as using local storage or cookies to persist the user's session even after the browser is closed.
Server-Side Rendering: If you're using server-side rendering (SSR) in your Next.js app, ensure that you handle authentication on the server-side as well.
Security Best Practices: Always follow security best practices, such as validating user input, using HTTPS, and protecting your API keys.

Advanced Tips and Troubleshooting

Alright, let's explore some more advanced tips and tricks, as well as some troubleshooting steps if you run into any issues. This is where you can take your implementation to the next level.

Handling Redirects and CORS Issues

One common issue you might encounter is related to redirects and Cross-Origin Resource Sharing (CORS). Here's how to tackle these problems:

CORS Configuration in Supabase: If you're experiencing CORS errors, make sure that your Supabase project's allowed origins include the origin of your Next.js application. You can configure this in your Supabase dashboard under the "Authentication" settings.
Redirect URIs: Double-check your authorized redirect URIs in your Google Cloud Console and your Supabase project. They should match the URLs of your Next.js application, including the /auth/callback route. Remember to include both http://localhost:3000/auth/callback (for local development) and your production URL (e.g., https://your-app.com/auth/callback).
Environment Variables: Store your Supabase URL and anon key as environment variables in your Next.js application. This prevents accidentally exposing sensitive information in your codebase. You can use a .env file for local development and configure environment variables in your deployment platform for production. (e.g., NEXT_PUBLIC_SUPABASE_URL, NEXT_PUBLIC_SUPABASE_ANON_KEY)

Debugging Authentication Issues

When things aren't working as expected, debugging is key! Here's how to approach authentication issues:

Check the Browser Console: Open your browser's developer tools (usually by pressing F12) and check the console for any error messages. These messages often provide valuable clues about what's going wrong.
Network Tab: Inspect the network requests in the developer tools. Look for any failed requests, especially those related to the Supabase authentication flow.
Logging: Add logging statements to your code to track the flow of execution and the values of variables. Log the results of your Supabase authentication calls to see what's being returned.
Supabase Dashboard Logs: Supabase provides detailed logs in its dashboard. Check the logs for your project to see if any errors are being reported on the server-side.
Console.log(): Use console.log() liberally to output data at various points in your authentication process. This can help you understand what's happening step-by-step.

Common Pitfalls and Solutions

Incorrect API Keys: Double-check that you're using the correct Supabase URL and anon key in your supabaseClient.js file. These keys are crucial for your app to communicate with your Supabase project.
Mismatching Redirect URIs: Ensure that the redirect URIs configured in your Google Cloud Console and your Supabase project exactly match the URL of your callback route in your Next.js application.
CORS Issues: Make sure your Supabase project's CORS configuration allows requests from your Next.js application's origin.
Asynchronous Operations: Be aware of asynchronous operations. Always await the result of Supabase authentication calls (like signInWithOAuth) to ensure that the operations have completed before proceeding.
State Management: Pay attention to how you manage the user's authentication state. Use state management solutions (like React's useState or a state management library like Zustand or Redux) to accurately reflect the user's login status throughout your application.

Conclusion: Making Authentication a Breeze

That's it, guys! You now know how to implement seamless Google Login with Supabase and Next.js. You've learned how to set up your Supabase project, configure Google OAuth, create the necessary authentication flow in your Next.js application, and handle user sessions. With this guide, you can quickly add secure and user-friendly authentication to your web app. Remember to follow the best practices and customize the implementation to suit your needs. Now go build something amazing! Feel free to ask any questions in the comments below. Happy coding!

Key Takeaways:

Supabase and Next.js are a powerful combination for building modern web applications with secure authentication.
Setting up Google OAuth requires configuring a Google Cloud project and obtaining credentials.
Creating a callback route is essential for handling the authentication process and exchanging the code for tokens.
Implementing session management ensures that user sessions are maintained throughout the application.
Error handling and security are crucial considerations for a robust and secure authentication system.

By following these steps, you'll create a seamless and secure authentication experience for your users. Good luck, and have fun building!