Supabase Auth with Next.js: Your Complete Guide

Hey everyone! 👋 If you’re building web apps with Next.js and looking for a robust and easy-to-implement authentication system, you’re in the right place! We’re diving deep into Supabase Auth and how you can seamlessly integrate it into your Next.js projects. This guide will walk you through everything from setup to advanced features, ensuring you have a solid understanding of how to authenticate users effectively. We’ll cover the core concepts, explore practical examples, and provide you with the tools you need to build secure and user-friendly applications. Let’s get started!

Why Choose Supabase Auth for Your Next.js Project?

So, why should you consider Supabase Auth when there are other authentication options out there, like Firebase Authentication? Well, guys, Supabase offers several compelling advantages, especially when paired with Next.js. First off, it’s open-source, which means you have complete control and can customize it to fit your specific needs. It’s built on top of PostgreSQL, a powerful and reliable database, which gives you a ton of flexibility and scalability options. Also, the developer experience is fantastic! Supabase provides a fantastic set of SDKs and tools that make the integration process a breeze. You’ll find yourself up and running in no time. Another cool thing is that Supabase integrates really well with serverless functions, which is super important in Next.js. You can effortlessly handle server-side operations like user data fetching and secure API calls. The combination of these features makes Supabase Auth an excellent choice for modern web development. It’s a great choice for both small projects and large-scale applications.

Benefits of Using Supabase Auth

• Easy Integration: Supabase provides clear, concise documentation and SDKs that make setting up authentication super easy. You can integrate it into your Next.js project in a matter of minutes. No more headaches with complex configurations. It’s designed to be developer-friendly from the start. Trust me, you’ll love how easy it is to get started.
• Open Source and Flexible: Since Supabase is open-source, you have complete control over your authentication system. You can customize the implementation, add features, and tailor it to your exact needs. This level of flexibility is super helpful when you have specific security requirements or unique user flows.
• Serverless Compatibility: Supabase works seamlessly with serverless functions, which is a key part of Next.js. This allows you to handle sensitive operations securely on the server side, ensuring that your client-side code remains safe and secure.
• Powerful Features: Supabase Auth offers a ton of features, including email/password authentication, social login (Google, GitHub, etc.), and multi-factor authentication (MFA). It supports everything you need to build a robust and secure authentication system.
• Scalability: Built on PostgreSQL, Supabase is designed to handle large-scale applications. You don’t have to worry about performance issues as your user base grows. It’s built to scale with you.

Setting Up Supabase in Your Next.js Project

Alright, let’s get down to the nitty-gritty and set up Supabase in your Next.js project! It’s actually a pretty straightforward process. First, you’ll need a Supabase account and a project. If you don’t have one already, head over to the Supabase website and sign up. Then, create a new project. Once your project is created, grab your project’s API keys ( anon public key and service_role private key). You’ll need these later on. These keys are super important, so keep them safe and secure. Don’t share them publicly or commit them to your repository.

Next, install the Supabase client library in your Next.js project. Open up your terminal and run the following command:

npm install @supabase/supabase-js

This command installs the necessary package to interact with your Supabase backend. Great job! Once the installation is complete, you’ll create a Supabase client. This client will be your primary interface for authentication and database operations. Create a new file (e.g., lib/supabase.js ) in your project and add the following code:

import { createClient } from '@supabase/supabase-js'

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY

export const supabase = createClient(supabaseUrl, supabaseAnonKey)

In this code, we’re importing createClient from the Supabase library and initializing the client with your Supabase URL and anonymous key. Important: make sure to add your SUPABASE_URL and SUPABASE_ANON_KEY to your .env.local file. It keeps your sensitive keys out of your codebase. This way, your keys are securely stored, and your code is clean and easy to read. This is a crucial step for security. Then, let’s look at the implementation of the auth function for registration and login.

Adding Environment Variables

To keep your API keys secure, use environment variables. Create a .env.local file in the root of your Next.js project and add the following:

NEXT_PUBLIC_SUPABASE_URL=YOUR_SUPABASE_URL
NEXT_PUBLIC_SUPABASE_ANON_KEY=YOUR_SUPABASE_ANON_KEY

Replace YOUR_SUPABASE_URL and YOUR_SUPABASE_ANON_KEY with your actual Supabase project URL and anonymous key. Always remember that the NEXT_PUBLIC_ prefix is essential. It ensures that these variables are available in your client-side code. This is a very secure practice that is very useful for preventing any security breach.

Implementing Authentication in Next.js

Now that you have Supabase set up, let’s implement the actual authentication features in your Next.js application. We’ll start with user registration and then move on to user login and logout. We’ll also cover how to handle user sessions and protect your routes. I promise it is not as hard as it sounds. You got this!

User Registration

First, let’s create a registration form. In your Next.js component, you’ll need an input field for the user’s email and password. Also, you’ll need a button to submit the form. Inside the form’s submit handler, call Supabase’s signUp method. This method creates a new user account in your Supabase project. Here’s a basic example:

import { useState } from 'react'
import { supabase } from '../lib/supabase'

export default function Register() {
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const [error, setError] = useState(null)

  const handleRegister = async (e) => {
    e.preventDefault()
    const { error } = await supabase.auth.signUp({
      email,
      password,
    })
    if (error) {
      setError(error.message)
      console.error('Registration error:', error)
    } else {
      setError(null)
      alert('Registration successful! Check your email to verify.')
    }
  }

  return (
    <div>
      <h2>Register</h2>
      {error && <p style={{ color: 'red' }}>{error}</p>}
      <form onSubmit={handleRegister}>
        <div>
          <label htmlFor="email">Email:</label>
          <input
            type="email"
            id="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            required
          />
        </div>
        <div>
          <label htmlFor="password">Password:</label>
          <input
            type="password"
            id="password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            required
          />
        </div>
        <button type="submit">Register</button>
      </form>
    </div>
  )
}

In this component, we use the signUp method from supabase.auth to register the user. If the registration is successful, Supabase sends a verification email to the user. Make sure your email settings are configured in your Supabase project. This verification step helps ensure that only legitimate users can access your application. It prevents bots and malicious users from creating fake accounts. The error handling is also important. If something goes wrong, you want to display an informative error message to the user.

User Login

Next, let’s implement the login functionality. Similar to registration, you’ll need an email and password input field. In your form’s submit handler, use the signIn method from supabase.auth . This method authenticates the user and creates a session. Here’s the code:

import { useState } from 'react'
import { supabase } from '../lib/supabase'

export default function Login() {
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const [error, setError] = useState(null)

  const handleLogin = async (e) => {
    e.preventDefault()
    const { error } = await supabase.auth.signInWithPassword({
      email,
      password,
    })
    if (error) {
      setError(error.message)
      console.error('Login error:', error)
    } else {
      setError(null)
      alert('Login successful!')
    }
  }

  return (
    <div>
      <h2>Login</h2>
      {error && <p style={{ color: 'red' }}>{error}</p>}
      <form onSubmit={handleLogin}>
        <div>
          <label htmlFor="email">Email:</label>
          <input
            type="email"
            id="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            required
          />
        </div>
        <div>
          <label htmlFor="password">Password:</label>
          <input
            type="password"
            id="password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            required
          />
        </div>
        <button type="submit">Login</button>
      </form>
    </div>
  )
}

In this example, we’re using the signInWithPassword method to log the user in. If the login is successful, Supabase handles the session creation. After a successful login, you’ll typically redirect the user to a protected page or display a personalized dashboard. Proper error handling is super important here, as well. You need to show meaningful error messages to the user if the login fails.

User Logout

Logging out is even easier! You can use the signOut method to log the user out. Here’s a simple implementation:

import { supabase } from '../lib/supabase'

export default function Logout() {
  const handleLogout = async () => {
    const { error } = await supabase.auth.signOut()
    if (error) {
      console.error('Logout error:', error)
    } else {
      alert('Logout successful!')
      // Redirect to login page or home page
    }
  }

  return (
    <button onClick={handleLogout}>Logout</button>
  )
}

When the user clicks the