Authentication App with Supabase and Nextjs 14

Supabase provides backend services like authentication, databases, and storage, making it a good choice for developers looking to implement these features quickly. This article will guide you through creating a simple authentication app using Supabase Auth and Next.js 14.

See the app deployed on Vercel: Authentication App with Supabase and Next.js 14

Check out the Github repository: Supabase Auth

Supabase is an open-source Firebase alternative that offers a suite of backend services, including a PostgreSQL database, authentication and authorization, real-time subscriptions, and more. Next.js is a React framework that enables functionality such as server-side rendering and generating static websites, which are beneficial for SEO and performance.

Some topics worth exploring, in relation to this project include:

SSR (Server-Side Rendering): Next.js provides server-side rendering out of the box, which can improve SEO and performance. Supabase offers an ssr package that facilitates cookie-based authentication for SSR applications.
Middleware: Middleware in your Next.js application handles authentication tokens with Supabase. Middleware will refresh authentication tokens, and ensure that both the server components and the client browser have the updated token. This is essential for maintaining a secure and seamless user experience. For more clientInformation, read this article.

Installation

Step 1: Clone the Repository

Open your terminal.

Clone the repository using the following command:

git clone https://github.com/owolfdev/supabase-auth

Navigate to the cloned directory:
```
cd supabase-auth
```

Step 2: Set up Environment Variables

Create a .env.local file at the root of the project.

Fill in the required environment variables:

NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
SERVICE_ROLE_SECRET=your_service_role_secret

You can find these keys in your Supabase dashboard under Project Settings>API

Step 3: Install Dependencies

In the terminal, run:
```
npm install
```

Step 6: Run Locally (Optional)

You can run the project locally to test it by running:
```
npm run dev
```
Open your browser and navigate to http://localhost:3000 to see the app.

Step 7: Deploy to Vercel

Go to the Vercel website: vercel.com.
Sign in to your Vercel account.
Click on the Add New button, select Project.
Add your Github account (if not connected).
Import and deploy your project.
Be sure to add environment variables as needed.

Supabase Setup

There are several setting at Supabase that you need to consider.

You will need to create a profiles table with the following (suggested) table schema:

id (UUID): Unique identifier for each user
name (String): Name of the user
email (String): Email address of the user
phone (String): Phone number of the user
avatar_url (String): URL to the user's avatar image
description (String): Description or bio of the user
subscription (String): Subscription details of the user
website (String): Website URL of the user
website_description (String): Description of the user's website
location (String): Location of the user
active (Boolean): Indicates whether the user is currently active or not

You should create rls policies for reading privileges for all and update privileges for authenticated users only.

You should create a database function that creates a new profile based on a new auth.user account.

sql


CREATE OR REPLACE FUNCTION handle_new_user()
RETURNS TRIGGER AS $$
BEGIN
  INSERT INTO public.profiles(id, email)
  VALUES (NEW.id, NEW.email);
  RETURN NEW;
END;
$$ LANGUAGE plpgsql;

You should create a trigger that triggers the function.

sql

CREATE TRIGGER trigger_after_user_creation
AFTER INSERT ON auth.users
FOR EACH ROW
EXECUTE FUNCTION public.handle_new_user();

I am using Resend as the Custom SMTP server to bypass the Supabase email limit of 3 per hour. You can find the SMTP settings in Supabase under Settings > Authentication > SMTP Settings.

At supabase you will need to set the project url at Authentication > Site URL to enable your app to redirect users back to your site.

You may also need to adjust the rate limit at Rate Limits.

You will want to set up a Supabase storage bucket called avatars. You will need to set up rls that allows you to read and write files to the bucket.

sql

CREATE POLICY "AllowAllReadsToAvatars"
ON storage.objects FOR SELECT
USING (bucket_id = 'avatars'::text);

create policy "Allow authenticated uploads"
on storage.objects
for insert
to authenticated
with check (
  bucket_id = 'avatars'
);