Supabase_Auth Configuration

To start ,copy the index.html in my repo (it's a simple interface to test supabase)

Note

If your entend to make all your files in the same repo ,tap : <script type="module" src="auth.js"></script>

Then create an account in supabase (It's all free).

Create a file config.js to initialize a new Supabase client using createClient() method. copy this in your file

import { createClient } from "https://cdn.jsdelivr.net/npm/@supabase/supabase-js/+esm"
const supabaseUrl = 'your url ' //replace 'your url' with your project URL
const supabaseKey = 'your anon key ' //replace 'your anon key' with your API anon key

const supabase = createClient(supabaseUrl, supabaseKey)

export default supabase

Note

Do not use your publishable key , use the anon key

Go to Table Editor and create automatically a table to save the inf of the user , or you can create it with SQL in SQL Editor using :

CREATE TABLE client (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    nom TEXT NOT NULL,
    email TEXT NOT NULL,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

Note

to create automatically a TABLE : go to Table Editor and press New Table .

Add policy (insert) to the table after you enable the RLS (this step can be treated automatically or with SQL Editor) :

-- DELETE the current policy first if it exists
DROP POLICY IF EXISTS "Allow public inserts" ON client;

-- Create the CORRECT policy
CREATE POLICY "Allow public inserts"
ON client
FOR INSERT
TO public
WITH CHECK (true);

Important

You must click "Save policy" after pasting this code. The visual editor in Supabase can be misleading - the SQL version is more reliable.

---

link the supabase to the frontend

Create a new file auth.js in the same directory as config.js , in this file paste my auth.js (created by me in the js repo)

Now , all you need to do is : download this extension in vscode live Server .

double click on your index.html and choose the option " open with live server " . If everything is OK , enter name and email example so you can see the client table is updated in supabase (you can also add users in supabase automatically ) .

Troubleshooting

"supabaseUrl is required" Error

If you see this error, it means your environment variables aren't set up:

1. Create .env.local file in the root directory
2. Add your Supabase credentials: ```env NEXT_PUBLIC_SUPABASE_URL=https://your-project-id.supabase.co NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key-here ```
3. Restart your development server
4. Or use the setup script: ./create-env.sh (Mac/Linux) or create-env.bat (Windows)

Common Issues

• App shows "Configure Supabase First": Environment variables not set
• OAuth not working: Enable Google provider in Supabase dashboard
• Database errors: Run the database.sql script in your SQL Editor
• Build errors: Make sure all environment variables are set
• "null value in column user_id" error: This means you're trying to run sample data SQL without authentication. Use the main database.sql script instead - sample data will be created automatically when you first log in.

Need Help?

• Visit Supabase Documentation.
• Ensure you're using the correct project URL and anon key.