Email/password authentication in Supabase - Mini Project: Build & Apply

Email/password authentication

📖 Scenario: You are building a simple web app that lets users sign up and log in using their email and password. You will use Supabase, a cloud service that manages user accounts securely for you.

🎯 Goal: Create a Supabase project setup that enables email/password authentication. You will write code to initialize the Supabase client, and implement sign-up and sign-in functions.

📋 What You'll Learn

Initialize Supabase client with URL and anon key

Write a function to sign up users with email and password

Write a function to sign in users with email and password

💡 Why This Matters

🌍 Real World

Email/password authentication is a common way to let users securely create accounts and log in to web apps without managing passwords yourself.

💼 Career

Understanding how to set up authentication with cloud services like Supabase is essential for backend and full-stack developers building user-facing applications.

1

Initialize Supabase client

Create a constant called supabaseUrl with the value "https://xyzcompany.supabase.co" and a constant called supabaseAnonKey with the value "public-anonymous-key". Then create a constant called supabase by calling createClient(supabaseUrl, supabaseAnonKey).

Supabase

# Create constants supabaseUrl and supabaseAnonKey with the given values
# Then create supabase client using createClient
# Your code here

Need a hint?

Use const to declare variables. The createClient function takes the URL and anon key as arguments.

2

Write sign-up function

Write an async function called signUpUser that takes email and password as parameters. Inside, call supabase.auth.signUp({ email, password }) and return the result.

Supabase

import { createClient } from '@supabase/supabase-js';

const supabaseUrl = "https://xyzcompany.supabase.co";
const supabaseAnonKey = "public-anonymous-key";
const supabase = createClient(supabaseUrl, supabaseAnonKey);

// Write async function signUpUser(email, password) to sign up users
# Your code here

Need a hint?

Use async function and await the signUp call with the email and password parameters.

3

Write sign-in function

Write an async function called signInUser that takes email and password as parameters. Inside, call supabase.auth.signInWithPassword({ email, password }) and return the result.

Supabase

import { createClient } from '@supabase/supabase-js';

const supabaseUrl = "https://xyzcompany.supabase.co";
const supabaseAnonKey = "public-anonymous-key";
const supabase = createClient(supabaseUrl, supabaseAnonKey);

async function signUpUser(email, password) {
    return await supabase.auth.signUp({ email, password });
}

// Write async function signInUser(email, password) to sign in users
# Your code here

Need a hint?

Use async function and await the signInWithPassword call with the email and password parameters.