Email/password authentication in Supabase - Step-by-Step Execution

Process Flow - Email/password authentication

User enters email & password

↓

Send credentials to Supabase Auth

↓

Supabase checks credentials

↓

Create session

↓

User logged in

User inputs email and password, Supabase verifies them, then either logs the user in or shows an error.

Execution Sample

Supabase

const { data, error } = await supabase.auth.signInWithPassword({
  email: '[e-mail]',
  password: 'password123'
})

This code sends the email and password to Supabase to authenticate the user.

Process Table

Step	Action	Input	Supabase Response	Result
1	User inputs email and password	email='[e-mail]', password='password123'	N/A	Credentials ready to send
2	Send credentials to Supabase	Credentials sent	Checking credentials	Waiting for response
3	Supabase verifies credentials	Email and password	Valid user found	Session created
4	Return session data	Session token	Session token returned	User logged in
5	If credentials invalid	Wrong email or password	Error returned	Show error message

💡 Execution stops after Supabase returns session or error response.

Status Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4
email	undefined	'[e-mail]'	'[e-mail]'	'[e-mail]'	'[e-mail]'
password	undefined	'password123'	'password123'	'password123'	'password123'
data	undefined	undefined	undefined	{ session: {...} }	{ session: {...} }
error	undefined	undefined	undefined	null	null

Key Moments - 3 Insights

Why do we wait after sending credentials to Supabase?

Because Supabase needs time to check the credentials and respond, as shown in step 2 and 3 of the execution_table.

What happens if the email or password is wrong?

Supabase returns an error instead of a session, as shown in step 5 of the execution_table.

Why do we store the session token after login?

The session token keeps the user logged in for future requests, shown in step 4 where session data is returned.

Visual Quiz - 3 Questions

Look at the execution_table, what is the Supabase response at step 3?

A Credentials sent

B Valid user found

C Error returned

D Session token returned

💡 Hint

Check the 'Supabase Response' column in row for step 3.

At which step does the user get logged in?

A Step 5

B Step 2

C Step 4

D Step 1

💡 Hint

Look at the 'Result' column for when the user is logged in.

If the password is incorrect, which step shows the error?

A Step 5

B Step 3

C Step 4

D Step 2

💡 Hint

See the 'Result' column where error message is shown.

Concept Snapshot

Email/password authentication with Supabase:
- User inputs email and password
- Credentials sent to Supabase Auth
- Supabase verifies credentials
- If valid, session created and user logged in
- If invalid, error returned
Use supabase.auth.signInWithPassword({email, password})

Full Transcript

This visual execution shows how email and password authentication works with Supabase. First, the user enters their email and password. These credentials are sent to Supabase's authentication service. Supabase checks if the credentials match a registered user. If they do, Supabase creates a session and returns a session token, logging the user in. If the credentials are wrong, Supabase returns an error message. Variables like email, password, data, and error change as the process moves forward. Key moments include waiting for Supabase's response, handling errors, and storing the session token. The quiz questions help reinforce understanding by referencing specific steps in the execution table.