Supabase Login With Next.js: A Simple Guide

Hey guys! Are you looking to add authentication to your Next.js app? Look no further! Supabase, the open-source Firebase alternative, makes it incredibly easy to implement secure and scalable login functionality. This guide will walk you through setting up Supabase authentication in your Next.js project, step-by-step. We'll cover everything from creating a Supabase project to handling user sessions and building a simple login form. So, grab your favorite beverage, fire up your code editor, and let's dive in!

Setting Up Your Supabase Project

First things first, you'll need a Supabase project. Head over to the Supabase website (https://supabase.com/) and create an account. Once you're logged in, you can create a new project. Choose a name for your project, select a region that's close to your users, and set a secure database password. Remember this password – you'll need it later to connect your Next.js app to your Supabase database. After creating the project, Supabase will take a few minutes to provision the database and other services. While you're waiting, you can start setting up your Next.js project.

Creating a Supabase project is crucial for managing your application's data and authentication. Think of it as your backend headquarters. You'll define your database schema, configure authentication providers (like email/password, Google, GitHub, etc.), and manage your application's API endpoints all within the Supabase dashboard. Spend some time exploring the dashboard and familiarizing yourself with the different features. You'll find tools for managing users, setting up real-time subscriptions, and even running serverless functions. A well-configured Supabase project is the foundation for a secure and scalable Next.js application. So make sure you take the time to set it up correctly. Choosing the right region is also important for minimizing latency and ensuring a good user experience. Pick a region that's geographically close to the majority of your users. This will help reduce the time it takes for data to travel between your application and the database. And don't forget to set a strong database password! This is the key to protecting your data from unauthorized access. Use a password manager to generate a strong, random password and store it securely. With your Supabase project set up and your password safely stored, you're ready to move on to the next step: setting up your Next.js project.

Creating Your Next.js App

Now that your Supabase project is ready, let's create a new Next.js app. Open your terminal and run the following command:

npx create-next-app my-supabase-app

Replace my-supabase-app with the name you want to give your project. Once the project is created, navigate into the project directory:

cd my-supabase-app

Next, you'll need to install the Supabase client library:

npm install @supabase/supabase-js

This library provides the tools you need to interact with your Supabase project from your Next.js app.

Setting up your Next.js app correctly is essential for a smooth development experience. The create-next-app command sets up a basic Next.js project with all the necessary configurations and dependencies. It also includes a development server that allows you to preview your changes in real-time. Before you start adding any code, make sure you can run the development server by running npm run dev in your terminal. If everything is set up correctly, you should see a message indicating that the server is running and you can access your app in your browser. Installing the Supabase client library is also crucial. This library provides a set of functions and classes that make it easy to interact with the Supabase API. It handles things like authentication, data fetching, and real-time subscriptions. Without this library, you would have to manually make HTTP requests to the Supabase API, which would be much more complex and time-consuming. So make sure you install the @supabase/supabase-js package before you start writing any code that interacts with Supabase. Once you have the Supabase client library installed, you can start configuring it to connect to your Supabase project. This involves providing your Supabase URL and API key, which you can find in your Supabase project settings. We'll cover this in more detail in the next section.

Configuring Supabase in Your Next.js App

To connect your Next.js app to your Supabase project, you'll need to create a Supabase client. Create a new file called supabaseClient.js (or .ts if you're using TypeScript) in the root of 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);

Replace process.env.NEXT_PUBLIC_SUPABASE_URL and process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY with your Supabase URL and API key, respectively. You can find these values in your Supabase project settings under "API".

Important: Store your Supabase URL and API key in environment variables to protect them from being exposed in your client-side code. Create a .env.local file in the root of your project and add the following lines:

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 URL and API key.

Configuring Supabase correctly in your Next.js app is paramount for secure and reliable data access. The createClient function from the @supabase/supabase-js library initializes a Supabase client instance that you can use to interact with your Supabase project. This client handles things like authentication, data fetching, and real-time subscriptions. By storing your Supabase URL and API key in environment variables, you prevent them from being accidentally exposed in your client-side code. This is crucial for security, as anyone with access to your API key could potentially access your Supabase project and its data. The .env.local file is a special file in Next.js that allows you to define environment variables that are only available during development. These variables are not included in your production build, which further enhances security. Make sure you add the .env.local file to your .gitignore file to prevent it from being committed to your Git repository. Once you have configured your Supabase client, you can start using it to interact with your Supabase project. You can use it to sign up users, log them in, fetch data from your database, and subscribe to real-time updates. The Supabase client provides a simple and intuitive API that makes it easy to perform these tasks. So take the time to configure your Supabase client correctly and you'll be well on your way to building a secure and scalable Next.js application with Supabase.

Implementing the Login Form

Now that you have your Supabase client set up, let's create a simple login form. Create a new component called LoginForm.js (or .tsx) and add the following code:

import { useState } from 'react';
import { supabase } from './supabaseClient';

function LoginForm() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  const handleSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);
    setError(null);

    try {
      const { error } = await supabase.auth.signInWithPassword({
        email,
        password,
      });

      if (error) {
        setError(error.message);
      }
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

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

export default LoginForm;

This component renders a simple login form with email and password fields. When the form is submitted, it calls the supabase.auth.signInWithPassword function to authenticate the user. If the login is successful, the user will be redirected to the authenticated part of your app. If there's an error, the error message will be displayed in the form.

Implementing the login form requires careful attention to detail to ensure a secure and user-friendly experience. The useState hook is used to manage the form's state, including the email, password, loading state, and error message. The handleSubmit function is called when the form is submitted. It first sets the loading state to true and clears any previous errors. Then, it calls the supabase.auth.signInWithPassword function to authenticate the user. This function takes the email and password as arguments and returns a promise that resolves with the user object if the login is successful, or rejects with an error if the login fails. If there's an error, the error message is displayed in the form. Finally, the loading state is set back to false. The form includes basic validation to ensure that the user enters a valid email address and password. The required attribute on the input fields ensures that the user cannot submit the form without entering these values. The button is disabled while the form is loading to prevent the user from submitting the form multiple times. This helps to prevent race conditions and other issues. With a well-implemented login form, you can provide a seamless and secure authentication experience for your users.

Handling User Sessions

After a user logs in, you need to handle their session. Supabase provides a getSession function that you can use to check if a user is currently logged in. You can use this function in your _app.js (or _app.tsx) file to wrap your entire app with a session context. This will make the user session available to all of your components.

import { useState, useEffect } from 'react';
import { supabase } from './supabaseClient';

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

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

    supabase.auth.onAuthStateChange((_event, session) => {
      setSession(session);
    });
  }, []);

  return (
    <SessionContext.Provider value={session}>
      <Component {...pageProps} />
    </SessionContext.Provider>
  );
}

export default MyApp;

This code fetches the current session when the app mounts and then listens for authentication state changes. Whenever the user logs in or out, the session state is updated. You can then access the session in any of your components using the useContext hook.

Handling user sessions correctly is absolutely essential for maintaining a secure and personalized user experience. The getSession function provided by Supabase allows you to retrieve the current user session from the server. This session contains information about the currently logged-in user, such as their user ID, email address, and any other data that you have stored in their user profile. By wrapping your entire app with a session context, you make the user session available to all of your components. This allows you to easily access the user's information and customize the UI based on their authentication status. The useEffect hook is used to fetch the current session when the app mounts and to listen for authentication state changes. This ensures that the session state is always up-to-date, even if the user logs in or out from another tab or device. The onAuthStateChange function is called whenever the user's authentication state changes. This allows you to update the session state and re-render your components to reflect the user's new authentication status. The SessionContext.Provider component makes the session available to all of its children. This allows you to access the session in any of your components using the useContext hook. By handling user sessions correctly, you can create a secure and personalized user experience for your users.

Conclusion

And there you have it! You've successfully implemented Supabase authentication in your Next.js app. This guide covered the basics of setting up a Supabase project, creating a Next.js app, configuring the Supabase client, implementing a login form, and handling user sessions. With these skills, you can now build secure and scalable Next.js applications with Supabase. Happy coding!

Remember, this is just a starting point. Supabase offers a wide range of features that you can use to enhance your authentication system, such as social login, multi-factor authentication, and role-based access control. Explore the Supabase documentation to learn more and take your authentication system to the next level.