D: Supabase is an open-source Firebase alternative that provides a PostgreSQL database, authentication, real-time subscriptions, and storage. π In this guide, we’ll walk through setting up a basic login system using Supabase in just 5 minutes!
π§ Prerequisites
Before we begin, make sure you have:
- A Supabase account (sign up here)
- Basic knowledge of JavaScript (or any frontend framework)
- A simple HTML file (or a React/Vue/Svelte project)
π Step 1: Create a Supabase Project
- Go to Supabase Dashboard and click New Project.
- Enter a Project Name and set a Database Password.
- Choose a Region closest to your users for better performance.
- Click Create Project (it may take a minute to initialize).
β Done! Your Supabase project is ready.
π Step 2: Enable Authentication
Supabase provides built-in auth providers (Email, Google, GitHub, etc.).
- In your project dashboard, go to Authentication β Providers.
- Enable Email/Password (for a simple login system).
- (Optional) Enable Google/GitHub for OAuth login.
π Pro Tip: Under Authentication β Settings, customize your Site URL (e.g., http://localhost:3000 for local testing).
π» Step 3: Set Up Frontend (HTML + JavaScript Example)
Letβs create a simple login form.
HTML (index.html)
<!DOCTYPE html>
<html>
<head>
<title>Supabase Login</title>
<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
</head>
<body>
<div>
<h2>Login</h2>
<input type="email" id="email" placeholder="Email" />
<input type="password" id="password" placeholder="Password" />
<button onclick="signIn()">Sign In</button>
<button onclick="signUp()">Sign Up</button>
<button onclick="signOut()">Sign Out</button>
</div>
<script src="app.js"></script>
</body>
</html>JavaScript (app.js)
const SUPABASE_URL = 'YOUR_SUPABASE_URL';
const SUPABASE_KEY = 'YOUR_SUPABASE_ANON_KEY';
const supabase = supabase.createClient(SUPABASE_URL, SUPABASE_KEY);
async function signUp() {
const email = document.getElementById('email').value;
const password = document.getElementById('password').value;
const { data, error } = await supabase.auth.signUp({
email,
password,
});
if (error) alert(error.message);
else alert('Check your email for confirmation!');
}
async function signIn() {
const email = document.getElementById('email').value;
const password = document.getElementById('password').value;
const { data, error } = await supabase.auth.signInWithPassword({
email,
password,
});
if (error) alert(error.message);
else alert('Logged in successfully!');
}
async function signOut() {
const { error } = await supabase.auth.signOut();
if (error) alert(error.message);
else alert('Logged out!');
}π Where to find SUPABASE_URL and SUPABASE_KEY?
- Go to Project Settings β API in your Supabase dashboard.
π Step 4: Test Your Login System
- Open
index.htmlin a browser. - Sign Up with an email & password.
- Sign In with the same credentials.
- Sign Out to test logout.
π Congratulations! Youβve built a working auth system in 5 minutes!
π Bonus Tips
β Secure Your App: Use Row-Level Security (RLS) in Supabase to restrict database access.
β Add Social Logins: Enable Google/GitHub in Authentication β Providers.
β Go Beyond: Try Supabaseβs Realtime and Storage features!
π Next Steps
Happy coding! π¨βπ»π©βπ»