Authentication User Flow

React + TypeScript + Vite

Installation

1. Install dependencies

npm install

2. Start the development server

npm run dev

Key Features

• Secure User Management: Leverages Firebase Authentication for backend security.
• Email and Password Authentication: Supports sign-up, login, and password reset using email and password credentials.
• Intuitive User Flow: Guides users through sign-up, login, and password reset processes.
• Dashboard Access: Directs authenticated users to the dashboard page.
• 404 Page: Catches all undefined routes and redirects users to a "page-not-found" page.

User Flow

(Sign up --> Login --> (Reset Password) --> Dashboard)

1. Sign-up

• Users can create a new account using an email address and password
• Firebase Authentication method used createUserWithEmailAndPassword

2. Login

• Users can log in using the newly created account credentials
• Firebase Authentication method used: signInWithEmailAndPassword

3. Reset Password

• Users can reset their password via a unique password reset link which gets emailed to them
• Firebase Authentication method used: sendPasswordResetEmail

4. Dashboard

• After a successful login users are directed to the dashboard page

Firebase Methods Used:

createUserWithEmailAndPassword signInWithEmailAndPassword sendPasswordResetEmail

Packages Used

• Firebase Authentication: Secure backend user management and authentication.
• Formik: Form handling and validation.
• Yup: Schema-based form validation.
• React-router-dom: Client-side routing for navigation.
• Bootstrap: Responsive UI framework.
• Popperjs: For Bootstrap tooltips and popovers.
• Bootstrap Icons: Icons for improved UX.

Find me on LinkedIn and say hi 👋.