Supabase Integration

Setting up Supabase Authentication in Databutton

Supabase integrations are for advanced use cases.

Databutton provides native authentication and database capabilities that are automatically included in all new Databutton apps. No additional setup required – simply start building your app and the infrastructure is ready. Native Authentication and Database

Setting Up Supabase Authentication via Frontend

Prerequisites

Before you begin, ensure the following are ready:

✅ Creating a Supabase Account

• Sign Up: Go to the Supabase website and sign up using your email or a third-party provider like GitHub.

• Create a New Project: Once logged in, click on "New Project," choose a name for your project, select a region closest to your location, and click "Create new project" to continue.

✅ Authentication: Enable email & password authentication in Supabase under Authentication > Providers

• Navigate to the Authentication Tab: Go to the "Authentication" tab on the left sidebar in your Supabase project.

• Providers: Go to the "Providers" tab, you will find the "Auth Providers" section.

• Enable Email Sign-in: Toggle the switch to enable "Email" sign-in.

Ensure that if you enable "Confirm Email," a default rate limit on the maximum number of emails is applied. However, you can also toggle off this feature for testing purposes.

✅ Obtain Supabase API Credentials : Project Credentials: Get your Supabase Project URL and Public Anon Key from Home > Project API in the Supabase dashboard.

• Navigate to the Project Home: In the Supabase dashboard, go to the "Home" tab of your project.

• Grab the project API: Scroll down to find your project's API URL and anon/public key under "Project API." These are required to connect to your Supabase project.

---

Step 1: Set Up Supabase in Your App

Prompt to Set Up Supabase Client

Create a new task and copy/ paste this prompt:

Hi! I’m setting up user authentication in my app using Supabase via Frontend only.  I’ve already created a Supabase project and enabled email & password authentication.  

Please help me configure Supabase in my frontend app:  
- Set up the Supabase client using my project details.  
- Ensure authentication works via the frontend only, using the correct Supabase JS package which is already installed.  
- Place the configuration in a dedicated utility file.  
- Keep it clean and minimal, without unnecessary configurations.  
- Don’t write any UI code yet—just focus on setting up Supabase properly.

Request user for the Supabase details:  
- Project URL
- Public Anon Key

Once this is set up, let me know so we can move to the next step!  

---

Step 2: Add User Authentication

Prompt to Set Up Sign-Up & Sign-In

Copy and paste this prompt:

Now that Supabase is set up, please help me add authentication!  

- Create a way for users to **sign up** using email and password.  
- Create a way for users to **log in** using the same credentials.  
- Ensure authentication state is managed so logged-in users **stay signed in**.  
- Display a success message or toast notification ( use sooner frontend library) after a successful sign-up or login.  
- Show an **error message** if authentication fails (e.g., incorrect password).  
- Add a **loading state** during authentication to prevent multiple submissions.  
- Disable the submit button while authentication is in progress.  

Navigation:
- After a successful sign-up or login, **ask me which page users should navigate to** (e.g., Dashboard, Home, Profile).  
- If no specific page is mentioned, default navigation should go to the most probable page based on the app.

Keep everything simple and easy to integrate. 

---

Step 3: Verify Authentication Setup and Debugging

Once authentication is added, test the following:

✅ Sign up with an email & password. ✅ Log in with the same credentials. ✅ Refresh the page—are you still logged in? ✅ Check if success/error messages appear correctly. ✅ Confirm navigation is working as expected.

If you face issues, try running this debugging prompt in Databutton AI:

Something isn’t working in my authentication setup.  
- Check if the sign-up and login flows are working properly.  
- Make sure protected pages are restricted correctly.  
- If there are any errors, suggest fixes.
- Remind user to enable RLS policies and provide with a simplified SQL schema to execute with detailed guidelines.

---

Enabling Row-Level Security (RLS)

Once authentication is set up, make sure to implement Row-Level Security (RLS) to restrict data access to users' own records. This is critical for security and compliance.

To make it easy, the AI agent can generate SQL for you. Here’s an example SQL to ensure users can only access their own data:

-- Enable RLS for your table
ALTER TABLE your_table ENABLE ROW LEVEL SECURITY;

-- Create policies for user access
CREATE POLICY "Users can access their own data"
ON your_table
FOR ALL
USING (user_id = auth.uid());

You can copy and paste this SQL into the SQL editor in the Supabase dashboard under Database > SQL to apply RLS.

Learn more here.