Learning Objectives

• Implement JWT-based authentication
• Create login/register components
• Protect routes with auth middleware
• Flask backend running
• User model created
• JWT libraries installed

Step 1: Auth Backend

python
Run Inline
# backend/auth.py
from flask import Blueprint, request, jsonify
from flask_jwt_extended import create_access_token, jwt_required, get_jwt_identity
from werkzeug.security import generate_password_hash, check_password_hash
from models import db, User
auth = Blueprint('auth', __name__)
@auth.route('/register', methods=['POST'])
def register():
    data = request.get_json()
    if User.query.filter_by(username=data['username']).first():
        return {'msg': 'Username exists'}, 400
    user = User(
        username=data['username'],
        email=data['email'],
        password_hash=generate_password_hash(data['password'])
    )
    db.session.add(user)
    db.session.commit()
    token = create_access_token(identity=user.id)
    return {'token': token, 'user': user.to_dict()}, 201
@auth.route('/login', methods=['POST'])
def login():
    data = request.get_json()
    user = User.query.filter_by(username=data['username']).first()
    if user and check_password_hash(user.password_hash, data['password']):
        token = create_access_token(identity=user.id)
        return {'token': token, 'user': user.to_dict()}
    return {'msg': 'Invalid credentials'}, 401

Step 2: Auth Frontend Components

jsx
// frontend/src/components/Login.js
import React, { useState } from 'react';
import axios from 'axios';
function Login() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      const res = await axios.post('/api/login', { username, password });
      localStorage.setItem('token', res.data.token);
      localStorage.setItem('user', JSON.stringify(res.data.user));
      window.location.href = '/dashboard';
    } catch (err) {
      alert('Login failed');
    }
  };
  return (
    <form onSubmit={handleSubmit}>
      <input value={username} onChange={e => setUsername(e.target.value)} />
      <input type="password" value={password} onChange={e => setPassword(e.target.value)} />
      <button type="submit">Login</button>
    </form>
  );
}

• Register a user -> verify token returned
• Login -> verify token matches
• Access protected route with JWT
• JWT expired: Increase expires_delta in create_access_token
• Auth header missing: Check axios interceptor adds header
• User not found: Check database migration
• Registration endpoint working
• Login endpoint returning JWT
• Protected routes with @jwt_required()
• Frontend auth components
• Persistent sessions Join Discord PreviousMilestone 2: Database Models & API DesignNextMilestone 4: Frontend UI & State Management