2024-09-09 web, development, javascript
Supabase Authentication With Next.js
By O. Wolfson
This example uses Supabase for authentication and Next.js 14 for the frontend. The example includes setting up environment variables, installing dependencies, running the project locally, and deploying to Vercel.
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:
You can find these keys in your Supabase dashboard under Project Settings>APINEXT_PUBLIC_SUPABASE_URL=your_supabase_url NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key SERVICE_ROLE_SECRET=your_service_role_secret
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 Settings
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 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.
sqlCREATE 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
.