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
Copy and paste this prompt into Databutton AI:
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.
Here are my Supabase details:
- Project URL: [PASTE YOUR SUPABASE PROJECT URL]
- Public Anon Key: [PASTE YOUR SUPABASE 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 into Databutton AI:
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.
