Supabase Auth Basics for a Small Next.js App

Supabase Auth Basics for a Small Next.js App

Creating a solid authentication system is one of the first steps in building any web application. In this post, I'll walk you through the basics of integrating Supabase Auth into a small Next.js app. This guide is aimed at founders, builders, and anyone learning software and AI tools. Let’s dive in!

What is Supabase?

Supabase is an open-source alternative to Firebase that provides a backend as a service. It offers a suite of tools including authentication, real-time databases, and file storage. One of the standout features of Supabase is its authentication system, which simplifies user management and session handling.

Why Use Supabase Auth?

There are several reasons why you might choose Supabase Auth for your Next.js application:

• Ease of Use: The API is straightforward, making integration quick.
• Open Source: You have full control over your backend.
• Real-Time Capabilities: Supabase can handle real-time data updates, enhancing user experience.

Setting Up Your Next.js App

Before we dive into authentication, let's set up a basic Next.js app. If you haven't already created one, use the following command:

npx create-next-app@latest my-next-app
cd my-next-app

Once your Next.js app is ready, install the Supabase client in your project:

npm install @supabase/supabase-js

Creating a Supabase Project

To use Supabase Auth, you’ll need a Supabase account and a project:

1. Go to Supabase and sign up.
2. Create a new project and note down your API URL and anon key from the settings.
3. In your Supabase project, navigate to the Authentication section to set up your authentication settings like email sign-ups, OAuth providers, etc.

Initializing Supabase in Your App

Next, let's initialize Supabase in your Next.js application. Create a new file called supabaseClient.js in your root directory:

// supabaseClient.js
import { createClient } from '@supabase/supabase-js';

const supabaseUrl = 'YOUR_SUPABASE_URL';
const supabaseAnonKey = 'YOUR_ANON_KEY';

export const supabase = createClient(supabaseUrl, supabaseAnonKey);

Replace YOUR_SUPABASE_URL and YOUR_ANON_KEY with the values from your Supabase project.

Implementing User Sign-Up and Sign-In

Now that we have Supabase set up, let's implement user sign-up and sign-in functionalities. Create a new page called auth.js in the pages directory:

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

const Auth = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const signUp = async () => {
    const { user, error } = await supabase.auth.signUp({ email, password });
    if (error) console.error(error);
    else console.log('User created:', user);
  };

  const signIn = async () => {
    const { user, error } = await supabase.auth.signIn({ email, password });
    if (error) console.error(error);
    else console.log('User signed in:', user);
  };

  return (
    <div>
      <h1>Authentication</h1>
      <input type="email" placeholder="Email" onChange={(e) => setEmail(e.target.value)} />
      <input type="password" placeholder="Password" onChange={(e) => setPassword(e.target.value)} />
      <button onClick={signUp}>Sign Up</button>
      <button onClick={signIn}>Sign In</button>
    </div>
  );
};

export default Auth;

This page allows users to enter their email and password to sign up or sign in. The signUp and signIn functions make calls to Supabase Auth.

Handling User Sessions

To manage user sessions, you can listen for changes in authentication state. This is crucial for managing UI states based on whether a user is logged in or not. You can add this logic in your _app.js file:

// pages/_app.js
import { useEffect } from 'react';
import { supabase } from '../supabaseClient';

function MyApp({ Component, pageProps }) {
  useEffect(() => {
    const { data: authListener } = supabase.auth.onAuthStateChange((event, session) => {
      console.log(event, session);
    });

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

  return <Component {...pageProps} />;
}

export default MyApp;

Protecting Routes

To protect certain routes in your application, you can create a higher-order component (HOC) to check if a user is authenticated.

// components/withAuth.js
import { useEffect } from 'react';
import { useRouter } from 'next/router';
import { supabase } from '../supabaseClient';

const withAuth = (WrappedComponent) => {
  return (props) => {
    const router = useRouter();

    useEffect(() => {
      const user = supabase.auth.user();
      if (!user) {
        router.push('/auth');
      }
    }, []);

    return <WrappedComponent {...props} />;
  };
};

export default withAuth;

You can then wrap any component that requires authentication with this HOC.

Checklist for Supabase Auth Integration

• [ ] Set up Supabase account and project.
• [ ] Initialize Supabase in your Next.js app.
• [ ] Implement user sign-up and sign-in.
• [ ] Handle user sessions.
• [ ] Protect routes that require authentication.

Conclusion

Integrating Supabase Auth into your Next.js app is a straightforward process that enhances your application’s security and user experience. By following the steps outlined above, you should have a basic authentication system up and running. For more in-depth guides and resources, check out the LookManLook blog or the FAQ section. Happy coding!