User login flow in Express - Step-by-Step Execution

Concept Flow - User login flow

User sends login request

↓

Server receives request

↓

Extract username & password

↓

Check user in database

↓

Compare password

↓

Password match?

↓

Create session

↓

Send success response

This flow shows how a server handles a user login request step-by-step, checking credentials and responding accordingly.

Execution Sample

Express

app.post('/login', async (req, res) => {
  const { username, password } = req.body;
  const user = await db.findUser(username);
  if (!user) return res.status(401).send('User not found');
  if (user.password !== password) return res.status(401).send('Wrong password');
  req.session.userId = user.id;
  res.send('Login successful');
});

This code handles a login POST request, checks user credentials, and sends success or error responses.

Execution Table

Step	Action	Input/Condition	Result/Output
1	Receive POST /login	Request body: {username: 'alice', password: '1234'}	Proceed to extract credentials
2	Extract username & password	username='alice', password='1234'	Variables set
3	Find user in database	username='alice'	User found: {id:1, username:'alice', password:'1234'}
4	Check if user exists	user found	Continue to password check
5	Compare passwords	input='1234' vs stored='1234'	Passwords match
6	Create session	Set req.session.userId=1	Session created
7	Send response	Login successful	Response sent to client
8	End	All steps done	Login flow complete

💡 Login flow ends after sending success response or error if user not found or password mismatch

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 5	After Step 6	Final
username	undefined	'alice'	'alice'	'alice'	'alice'	'alice'
password	undefined	'1234'	'1234'	'1234'	'1234'	'1234'
user	undefined	undefined	{id:1, username:'alice', password:'1234'}	{id:1, username:'alice', password:'1234'}	{id:1, username:'alice', password:'1234'}	{id:1, username:'alice', password:'1234'}
req.session.userId	undefined	undefined	undefined	undefined	1	1

Key Moments - 3 Insights

Why do we check if the user exists before comparing passwords?

Because if the user is not found (see step 4 in execution_table), we must stop and send an error. Comparing passwords without a user would cause errors.

What happens if the password does not match?

At step 5, if passwords don't match, the server sends a 'Wrong password' error and stops the login flow without creating a session.

Why do we store user ID in the session?

Storing user ID in req.session.userId (step 6) keeps the user logged in across requests, so the server knows who is logged in.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of 'user' after step 3?

A {id:1, username:'alice', password:'1234'}

B undefined

C null

D 'alice'

💡 Hint

Check the 'user' variable value in variable_tracker after Step 3

At which step does the server send the 'Login successful' response?

A Step 4

B Step 6

C Step 7

D Step 5

💡 Hint

Look at the 'Send response' action in execution_table

If the password was wrong, which step would the flow stop at?

A Step 3

B Step 5

C Step 6

D Step 7

💡 Hint

Refer to key_moments about password mismatch and execution_table step 5

Concept Snapshot

User login flow in Express:
- Receive POST /login with username & password
- Find user in database
- If user not found, send error
- Compare passwords
- If mismatch, send error
- If match, create session
- Send success response
Always check user exists before password

Full Transcript

This visual execution trace shows how an Express server handles a user login request. First, the server receives a POST request with username and password. It extracts these values and looks up the user in the database. If the user is not found, it immediately sends an error response. If the user exists, it compares the provided password with the stored password. If they do not match, it sends a wrong password error. If they match, the server creates a session by storing the user ID and sends a success response. Variables like username, password, user, and session data change step-by-step as shown. Key moments include checking user existence before password comparison and storing user ID in session to keep the user logged in. The quiz questions help reinforce understanding of variable states and flow steps.

Practice

1. What is the main purpose of a user login flow in an Express app?

easy

A. To verify the user's identity before granting access

B. To display the homepage content

C. To log server errors

D. To serve static files like images

Solution

1. Step 1: Understand the login flow goal

   The login flow is designed to check who the user is by verifying credentials.

2. Step 2: Identify the correct purpose

   Granting access only after verification matches the login flow's main purpose.

3. Final Answer:

   To verify the user's identity before granting access -> Option A

4. Quick Check:

   Login flow = Verify user identity [OK]

Hint: Login flow means checking user identity first [OK]

Common Mistakes:

• Confusing login flow with serving static files
• Thinking login flow logs errors
• Assuming login flow shows homepage content

2. Which Express route method is best suited to securely receive login form data?

easy

A. app.put('/login', ...)

B. app.get('/login', ...)

C. app.post('/login', ...)

D. app.delete('/login', ...)

Solution

1. Step 1: Recall HTTP methods for form data

   POST is used to send data securely from forms, unlike GET which appends data in URL.

2. Step 2: Match method to login data handling

   Login forms should use POST to keep credentials hidden and secure.

3. Final Answer:

   app.post('/login', ...) -> Option C

4. Quick Check:

   Use POST for login data [OK]

Hint: Use POST to send login data securely [OK]

Common Mistakes:

• Using GET exposes credentials in URL
• PUT and DELETE are not for login forms
• Confusing route methods for form submission

3. What will be the output if the following Express code is used for login and the user provides correct credentials?

app.post('/login', (req, res) => {
  const { username, password } = req.body;
  if(username === 'user' && password === 'pass') {
    req.session.user = username;
    res.send('Login successful');
  } else {
    res.status(401).send('Invalid credentials');
  }
});

medium

A. "Login successful" message sent and session user set

B. Server crashes due to missing session setup

C. "Invalid credentials" message sent always

D. Redirects to homepage without message

Solution

1. Step 1: Analyze the login condition

   The code checks if username is 'user' and password is 'pass'. If true, it sets session user and sends success message.

2. Step 2: Understand the output for correct credentials

   When correct, it sends 'Login successful' and stores username in session.

3. Final Answer:

   "Login successful" message sent and session user set -> Option A

4. Quick Check:

   Correct credentials = success message + session set [OK]

Hint: Correct login sends success and sets session [OK]

Common Mistakes:

• Assuming server crashes without session middleware
• Thinking invalid message shows on correct login
• Confusing redirect with send response

4. Identify the error in this Express login route code:

app.post('/login', (req, res) => {
  const { username, password } = req.body;
  if(username == 'admin' && password == '1234') {
    res.session.user = username;
    res.send('Welcome admin');
  } else {
    res.send('Access denied');
  }
});

medium

A. Using '==' instead of '===' for comparison

B. No error, code works fine

C. Missing res.status(401) for failed login

D. Assigning session to 'res.session' instead of 'req.session'

Solution

1. Step 1: Check session assignment

   Session data should be stored on req.session, not res.session.

2. Step 2: Confirm correct session usage

   Using res.session will cause undefined error; req.session is correct.

3. Final Answer:

   Assigning session to 'res.session' instead of 'req.session' -> Option D

4. Quick Check:

   Session stored on req, not res [OK]

Hint: Session is on req, not res object [OK]

Common Mistakes:

• Confusing req and res objects
• Ignoring missing status code on failure
• Thinking '==' causes error here

5. You want to keep users logged in across pages after login in Express. Which approach correctly implements this using sessions?

1. Use express-session middleware
2. On successful login, save username in req.session
3. On other routes, check if req.session.user exists
4. If exists, allow access; else redirect to login

hard

A. Sessions should not be used; use cookies only

B. This approach is correct and follows best practices

C. Store user info in res.locals instead of session

D. Use GET method to store session data

Solution

1. Step 1: Understand session usage in Express

   express-session middleware manages sessions; storing user info in req.session keeps login state.

2. Step 2: Verify access control logic

   Checking req.session.user on other routes to allow or redirect is standard practice.

3. Final Answer:

   This approach is correct and follows best practices -> Option B

4. Quick Check:

   Sessions + req.session.user check = persistent login [OK]

Hint: Use express-session and req.session.user for login persistence [OK]

Common Mistakes:

• Thinking cookies alone handle login state securely
• Using res.locals which resets each request
• Trying to store session data via GET method