Help / Authentication / Login & Register

Login & Register Workflow

This diagram illustrates the complete authentication flow for TubeRaker, covering both the login and registration paths. Users enter through the landing page and are directed to either the login or registration form. Each path includes validation, API calls, JWT token handling, and error recovery.

LOGIN & REGISTER WORKFLOW User Landing Page Login or Register? Login Email + Password Login Form API /auth/login POST Request Valid? Yes JWT Token Returned by API Store in localStorage Client-side storage Dashboard Retry Error Toast No Register Name + Email + Pwd Register Form Validation 12+ chars, complexity Valid? Yes API /auth/register POST Request Confirmation Account created Proceed to Login No Input API Success Decision Error

Step-by-Step Explanation

Login Flow

  1. User visits Landing Page — The user navigates to TubeRaker and is presented with login and registration options.
  2. Selects Login — The user chooses to log in and is shown the login form with email and password fields.
  3. Submits credentials — The form sends a POST request to /auth/login with the email and password.
  4. Server validates credentials — The API checks the email/password against the database. If invalid, an error toast is shown and the user can retry.
  5. JWT Token returned — On success, the server responds with a signed JWT access token.
  6. Token stored in localStorage — The frontend stores the JWT in localStorage for subsequent authenticated requests.
  7. Redirect to Dashboard — The user is redirected to their personalized dashboard.

Registration Flow

  1. Selects Register — The user chooses to create an account and is shown the registration form.
  2. Enters name, email, and password — All fields are required. The password must meet complexity requirements.
  3. Client-side validation — The password is validated for minimum 12 characters, mixed case, numbers, and special characters. Failures are shown inline.
  4. Submits to API — A POST request is sent to /auth/register with the validated data.
  5. Account confirmation — The server creates the account and returns a confirmation response.
  6. Proceed to Login — The user is automatically directed to the login flow to sign in with their new credentials.

Error Handling

  1. Invalid credentials — A toast notification appears with a descriptive error message (e.g., "Invalid email or password").
  2. Validation failure — Registration form shows inline errors for each failing field, allowing the user to correct and resubmit.
  3. Network errors — A generic error toast is shown with a retry option. The form state is preserved.