Skip to main content
Mock API Builder
Learning Center/Real-World Examples/User Authentication System
Real-World Examples

User Authentication System

Build a complete authentication flow with registration, login, logout, token refresh, and password reset.

What You'll Build

Authentication Features

  • • User registration with validation
  • • Email/password login
  • • JWT token-based authentication
  • • Access & refresh token flow
  • • Logout functionality
  • • Password reset via email
  • • Email verification
  • • Session management

What You'll Learn

  • • JWT token generation & validation
  • • Secure password storage (hashing)
  • • Token refresh patterns
  • • Authentication middleware
  • • Password reset flows
  • • Email verification patterns
  • • Security best practices
  • • Error handling for auth

Time Required

⏱️ Approximately 60-90 minutes

Step 1: Create Auth API Project

Set Up Authentication Project
1

Create New Project

Project Name: Auth API
2

Note Project Slug

Copy your project slug (e.g., proj_auth_xyz123)

Step 2: Define User Schema

User Data Structure

Create a /users endpoint with this schema:

json

⚠️ Note: In production, you'd never expose the password hash. This is a mock API for frontend development.

Step 3: User Registration

POSTRegister New User

Endpoint:

POST /api/proj_auth_xyz/auth/register

Request Body

json

Validation Rules

  • • Email must be valid and unique
  • • Password minimum 8 characters, include uppercase, lowercase, number, special char
  • • Username 3-20 characters, alphanumeric and underscore only
  • • First name and last name required

Success Response (201 Created)

json

Error Response (422 Validation Error)

json

Step 4: User Login

POSTLogin Endpoint

Endpoint:

POST /api/proj_auth_xyz/auth/login

Request Body

json

Success Response (200 OK)

json

Error Response (401 Unauthorized)

json

Token Types

  • Access Token: Short-lived (15-60 min), used for API requests
  • Refresh Token: Long-lived (7-30 days), used to get new access tokens

Step 5: Token Refresh

Refresh Access Token

Endpoint:

POST /api/proj_auth_xyz/auth/refresh

Request Body

json

Success Response (200 OK)

json

Error Response (401 Unauthorized)

json

When to Refresh

Automatically refresh the access token before it expires, or when you receive a 401 response. This keeps the user logged in seamlessly.

Step 6: Get Current User

GETGet Authenticated User Profile

Endpoint:

GET /api/proj_auth_xyz/auth/me

Request Headers

plaintext

Success Response (200 OK)

json

Error Response (401 Unauthorized)

json

Step 7: User Logout

POSTLogout User

Endpoint:

POST /api/proj_auth_xyz/auth/logout

Request Headers

plaintext

Request Body (Optional)

json

Success Response (200 OK)

json

Client-side: Also clear tokens from local storage/cookies and redirect to login page.

Step 8: Password Reset Flow

Request Password Reset

Endpoint:

POST /api/proj_auth_xyz/auth/forgot-password

Request Body

json

Success Response (200 OK)

json

Security: Always return success even if email doesn't exist (prevents email enumeration attacks).

Reset Password with Token

Endpoint:

POST /api/proj_auth_xyz/auth/reset-password

Request Body

json

Success Response (200 OK)

json

Error Response (400 Bad Request)

json

Step 9: Email Verification

Send Verification Email

Endpoint:

POST /api/proj_auth_xyz/auth/send-verification

Request Headers

plaintext

Success Response (200 OK)

json
Verify Email with Token

Endpoint:

POST /api/proj_auth_xyz/auth/verify-email

Request Body

json

Success Response (200 OK)

json

Step 10: Frontend Integration

React Authentication Hook
javascript
This example uses localStoragefor tokens to keep the snippet simple to follow. It is intentionally insecure demo code — do not replicate this pattern in production. This app's own auth routes store tokens in httpOnly cookies instead (see the Security Best Practices section below).

Usage Examples

Login Component
javascript
Registration Component
javascript

Security Best Practices

Important Security Considerations
Store tokens securely: Use httpOnly cookies in production, not localStorage
Always use HTTPS: Never send tokens over unencrypted connections
Implement rate limiting: Prevent brute force attacks on login/register
Hash passwords: Use bcrypt/argon2, never store plain text
Validate input: Sanitize and validate all user input
Use short token expiry: 15-60 min for access tokens
Implement CSRF protection: For cookie-based authentication
Log security events: Monitor failed login attempts
Add 2FA: Multi-factor authentication for enhanced security
Environment variables: Never hardcode secrets or API keys
Congratulations! 🎉

You've built a complete authentication system with:

User registration with validation
Email/password login
JWT token authentication
Access & refresh token flow
Password reset functionality
Email verification
Logout capability
React integration with hooks

This forms the foundation for secure user management in your applications!

Previous: Social NetworkNext: Mobile App Backend
Mock API Builder

Built for developers, by developers

DocumentationContactPrivacy PolicyTerms of Service

© 2026 Mock API Builder. All rights reserved.

Double-click for what's new
Learning Center
Learning Center