Formik Auth System

A modern authentication UI built with React, Formik, Yup, TailwindCSS and React Router.
This project simulates a SaaS-style auth flow with register, login and a simple dashboard.

Tech Stack

• React (functional components)
• Formik
• Yup
• TailwindCSS
• React Router

Features

• Register form with validation
• Login form with validation
• Username and email validation
• Password confirmation
• Dashboard page showing user info
• Logout functionality
• LocalStorage-based authentication simulation
• Modern SaaS-style UI

Pages

• Register – Create a local account with validation on all fields.
• Login – Sign in using the account you created.
• Dashboard – Shows a fake “logged in” state with username and email.

Installation

npm install
npm run dev

Then open the URL printed in the terminal (typically http://localhost:5173).

Usage

1. Start the dev server with npm run dev.
2. Open the app in your browser.
3. Go to the Register page and create a new account.
4. Go to the Login page and sign in with the same email and password.
5. After login you will be redirected to the Dashboard.
6. Click Log out on the dashboard to clear the fake session and return to login.

Notes

• All authentication is simulated using localStorage.
• The dashboard exists only to demonstrate the UI and navigation flow.
• Do not use this project for production authentication without adding a real backend.