Authentication Pages

The frontend authentication system consists of four pages that handle user onboarding, login, and account recovery.

Route Group: (auth)

The (auth) directory uses Next.js route groups — the parentheses mean (auth) is not part of the URL. Pages inside render at /login, /register, and /forgot-password directly.

Auth Layout

File: frontend/src/app/(auth)/layout.tsx

A shared layout for all auth pages featuring:

• Full-screen centered layout with min-h-screen
• Sticky header with the SL logo and back-to-home link
• Theme toggle button in the header
• Content centered vertically and horizontally

1. Login Page

File: frontend/src/app/(auth)/login/page.tsx Route: /login

Features

• Identifier field: Accepts either email or roll number
• Password field: With "Forgot password?" link
• Error display: Shows API error messages inline
• Loading state: Button shows "Signing In..." while processing
• Role-based redirect: After successful login, redirects based on user role:

API Integration

const res = await api.post('/auth/login', { identifier, password });
login(res.data.token, res.data.user);

The login() function from AuthContext stores the JWT in localStorage and sets the user state.

2. Register Page

File: frontend/src/app/(auth)/register/page.tsx Route: /register

Features

• Form fields: First name, Last name, Roll Number, Password
• Static form: Currently a UI scaffold (no API integration yet)
• Link: "Already have an account?" → Sign In

Form Fields

3. Forgot Password Page

File: frontend/src/app/(auth)/forgot-password/page.tsx Route: /forgot-password

Features

• Single field: Roll Number input
• CTA: "Send Reset Link" button
• Static form: UI scaffold (password reset flow not yet implemented)
• Link: "Remember your password?" → Sign In

4. Setup Wizard

File: frontend/src/app/setup/page.tsx Route: /setup

Purpose

One-time initial system setup to create the Super Admin account. This page is used when SLMS is deployed to a fresh database with no existing admin.

Features

• Form fields: First Name, Last Name, Email, Contact Number, Password, Confirm Password
• Validation: Client-side password match check
• API call: POST /api/v1/auth/setup
• Auto-login: On success, stores the returned JWT and redirects to /admin/overview
• Error handling: Displays API errors (e.g., "Setup already completed" if admin exists)
• Loading state: Button shows "Creating..." during submission

API Integration

const response = await api.post('/auth/setup', {
  firstName, lastName, email, contactNumber, password
});

if (response.data?.token && response.data?.user) {
  login(response.data.token, response.data.user);
  router.push('/admin/overview');
}

Security: The setup endpoint returns 403 if a ROLE_ADMIN user already exists in the database, preventing duplicate admin creation.