Login & Signup

Overview

This documentation covers the functionality, flow, and key components of the Login and Signup pages for the Audemy.

Login

What it does: Allows users to sign into their existing accounts using email/password or Google OAuth.

Key Features:

• Email/Password Login with validation
• Google OAuth Login
• JWT Token Decoding & Expiry Check for secure session handling
• Error Alerts shown on common HTTP failures (400, 401, 403, etc.)
• Session Stored in Cookies (audemyUserSession)
• School Prompt shown only if Google login returns a user not present in DB

File: Login.vue

• Components used:
• User flow:

1. User submits credentials or authenticates with Google
2. If valid, JWT token is stored
3. Redirects to /game-zone
4. If school data is missing (Google login), user is prompted to enter it

Error Handling: All HTTP status codes like 401, 403, 500, etc., are interpreted and shown as user-friendly alerts.

Signup

What it does: Registers a new user with basic details, performs form validation, then auto-logs them in.

Key Features:

• Form validation for required fields and matching passwords
• Visual Feedback on password match
• POST request to /api/auth/signup
• Auto-login after successful registration
• Fallback alerts for server and network issues

Files: Signup.vue, Signup.js

• Data collected: First name, last name, school, email, password
• User flow:

1. User enters form details and submits
2. Passwords are validated in real-time
3. After success, automatic login is triggered
4. Session stored in cookie, user redirected to /game-zone

Error Handling: Custom error messages based on status codes. Network issues handled in .catch() block with fallback alerts.

Best Practices Followed

• Session handling via cookies (7-day expiration)
• JWT token expiration check with jwt-decode
• Passwords checked and feedback given before form submission
• Separate error display logic using handleApiError()
• Clean and readable component structure for maintainability