Setting Up Authentication in Supabase

This guide will walk you through the steps to set up authentication in Supabase, including SQL queries for setting up your user tables and syncing data between them.

1. Create a Supabase Account and Project

Visit Supabase and sign up or log in. After logging in, click on "New Project" in the Supabase dashboard. Choose a name for your project, select the region closest to you, and click "Create New Project".

2. Get Your Supabase API URL and Key

To connect your project to Supabase, you need the API URL and Anon Key. To find these, go to Settings > API in the Supabase dashboard. Copy both the Project URL and Anon Key. These will be used to connect your app to Supabase.

3. Enable Authentication Providers

Supabase supports several authentication providers. To set them up, navigate to Authentication > Settings in the Supabase dashboard. Enable the authentication providers you want to use:

• Email/Password: Enables users to sign up using email and password.

• Social Logins: Enable providers like Google, GitHub, or Facebook. For social logins, you will need to create API keys for each provider in their respective developer consoles.

You can refer to the Supabase Authentication Guide for more details.

4. Create the Public Users Table (SQL Setup)

Although Supabase creates a default auth.users table, it’s often useful to have a separate table to store additional user information, such as display name and avatar. Here’s the SQL to create the public.users table:

CREATE TABLE public.users (
  id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
  name VARCHAR(255),
  email VARCHAR(255) UNIQUE NOT NULL,
  avatar_url VARCHAR(255),
  created_at TIMESTAMPTZ DEFAULT current_timestamp
)

To create a relationship between public.users and auth.users, add a foreign key:

ALTER TABLE public.users
ADD CONSTRAINT fk_users
FOREIGN KEY (id) REFERENCES auth.users (id) ON DELETE CASCADE

This will ensure that user data is consistently synced between both tables.

5. Sync User Data from auth.users to public.users (SQL Setup)

To automatically add new users from auth.users to public.users, you can set up a trigger. First, create the function that inserts user data into the public.users table when a new user is created:

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

Then, create the trigger:

CREATE TRIGGER on_new_user
AFTER INSERT ON auth.users
FOR EACH ROW
EXECUTE FUNCTION sync_new_user()

This trigger will automatically insert user data into the public.users table whenever a new user is created in the auth.users table.

6. Secure Your Project with SSL

Supabase provides SSL encryption automatically. Ensure you use the https:// version of your Supabase URL to secure your connection. This will protect the data transmitted between your app and Supabase.

7. Add Your API URL and Key to Your Project

To integrate Supabase authentication into your app, add the API URL and Anon Key that you copied earlier into your project’s authentication settings. These credentials will allow your app to interact with Supabase and handle authentication.

8. Test Authentication

After setting up authentication, test the process by signing up a new user using the email/password method or through a social login. Check that the user data is being added correctly to both the auth.users and public.users tables.

For additional troubleshooting or setup assistance, refer to the Supabase Authentication Troubleshooting Guide.

Useful Links:

• Supabase Home

• Supabase Authentication Guide

• Supabase SQL Reference

• Supabase API Documentation

Following these steps will set up authentication in Supabase and create a public user table that syncs with auth.users. You will also have the necessary SQL scripts to manage user data effectively.

To ensure seamless integration and functionality of the CozySpaceAuth component with your Supabase projects, it’s essential to configure it correctly. Here’s what you need to do:

CozySpaceAuth Component Setup

To fully sync your site with your projects, include the following details in the CozySpaceAuth component settings:

1. Supabase URL:
   This is your unique project URL provided by Supabase. You can find it in your Supabase dashboard under the Settings > API section. It typically looks like this:
   https://yourproject.supabase.co

2. Anon Key:
   The anonymous key is used to securely interact with your database. You’ll also find this in the API section of your Supabase dashboard under the "Project API keys" section. Use the "anon" (public) key for your projects.

Why This Is Needed

Adding your Supabase URL and Anon Key allows CozySpaceAuth to:

• Authenticate users seamlessly with your Supabase backend.

• Sync user data between your site and your Supabase projects.

• Enable full access to features like user-specific dashboards, form submissions, and project-related data.

How to Add These Details

• Open the CozySpaceAuth component in your project.

• Look for the Supabase URL and Anon Key fields in the property settings.

• Copy the values from your Supabase dashboard and paste them into the respective fields.

Once you’ve added these details, your CozySpaceAuth component will be fully connected to your Supabase project, ensuring smooth synchronization and real-time functionality.