Skip to content

Amrwaheed72/auth-flow

Repository files navigation

Frontend Task: Next.js Authentication Flow This project is a solution to a frontend assessment task, demonstrating a complete user authentication flow using Next.js and Tailwind CSS.

Live Demo [https://auth-flow-three-beta.vercel.app/]

Task Overview

Authentication Flow:

A Register page to create a new user account.

An Account Verification page to confirm the user's email with a specific code.

A Login page for returning users.

API Integration with the provided Postman collection for all auth endpoints.

Client-side route protection, storing the authentication token in localStorage and redirecting users based on their auth status.

A simple, protected Dashboard page that greets the logged-in user.

When the user logout, the token is deleted from localStorage

Deployment: Vercel

Features Implemented Full Authentication Cycle: Register -> Verify -> Login -> Dashboard -> Logout.

Client-Side Protected Routes: Unauthenticated users are redirected from protected pages (like /dashboard or the homepage) to the login page.

Auth Route Protection: Authenticated users are redirected away from pages like /login and /register.

API Error Handling: User-friendly error messages are displayed on forms when API calls fail.

NOTES:

1-All the api call functions are inside services folder in api.ts file

2-The dashboard is a simple page that displays a welcome message with the name of the logged in user, it also contains a navbar that contains a logout button for testing purposes

About

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

No releases published

Packages

 
 
 

Contributors