React + Firebase Authentication Starter (Email/Password)

A minimal, production-ready starter for email/password authentication using React, Vite, Firebase Auth, and Tailwind CSS. This repo demonstrates clean routing, form validation, and email verification flows - ideal for showcasing authentication work to clients or hiring managers.

Highlights

• Email/password sign up with validation, display name update, and verification email (see Resister).
• Login with validation and password reset (see Login).
• Central layout and routing using React Router (see Main and src/main.tsx).
• TypeScript typings for core shapes (see User, AuthState, FormData).
• Tailwind CSS + optional Bootstrap utilities for fast UI.
• ESLint configured for React | TypeScript | React Refresh.

Quick demo

• Sign up flow sends email verification: see sendVerificationEmail.
• Update user's display name after registration: see updateUserData.
• Reset password flow from login: see handleResetPassword.

Tech stack

• Vite - build and dev tooling (vite.config.ts)
• React 18 - UI
• TypeScript - types and safety
• Firebase Auth - authentication (firebase.config.ts)
• Tailwind CSS - utility-first styling (tailwind.config.js, postcss.config.js)
• ESLint - linting (.eslintrc.cjs)

Project Structure

• Entry and routing: src/main.tsx
• Layout: src/Layout/Main.tsx + src/Layout/Main.css
• Components:
  • Header (styles: Header.css)
  • Home
  • Login
  • Resister (Register)
• Firebase config: src/firebase/firebase.config.ts
• Types: src/index.ts
• Styles: src/index.css

Full File Listing:

• index.html
• package.json
• vite.config.ts
• postcss.config.js
• tailwind.config.js
• tsconfig.json
• .eslintrc.cjs
• .gitignore
• public/vite.svg
• src/main.tsx
• src/index.ts
• src/index.css
• src/App.jsx
• src/assets/react.svg
• src/firebase/firebase.config.ts
• src/Layout/Main.tsx
• src/Layout/Main.css
• src/component/Header/Header.tsx
• src/component/Header/Header.css
• src/component/Home/Home.tsx
• src/component/Login/Login.tsx
• src/component/Resister/Resister.tsx

Installation

1. Clone the repo and install dependencies:

git clone https://github.com/md-abu-kayser/react-firebase-auth-starter.git

npm install

2. Run dev server:

   npm run dev

Available Scripts

• npm run dev - start dev server
• npm run build - production build
• npm run preview - preview build
• npm run lint - run ESLint
• npm run type-check - TypeScript type-check only

Firebase Configuration

The Firebase app is created in src/firebase/firebase.config.ts. Replace the config object with your own Firebase project values to avoid exposing credentials in public projects.

Primary exported API used in the app:

default export app from src/firebase/firebase.config.ts

Project Register - Sign In

• create user: createUserWithEmailAndPassword used in Resister
• sign in: signInWithEmailAndPassword used in Login
• send verification: sendEmailVerification
• reset password: sendPasswordResetEmail
• update profile: updateProfile

Forms and validation

1. Validation logic is embedded in the components:

• SignUp validation: Resister
• Login validation: Login "These are intentionally simple and client-side only. For production, pair them with backend checks and stronger password policies."

2. Styling

• Tailwind entry: src/index.css
• Tailwind config: tailwind.config.js
• Bootstrap included from CDN via package: see import in src/main.tsx

3. Notes and Best Practices

• Do not commit real Firebase credentials in public repos. Use environment variables or a server-side proxy for production.
• Expand auth flows to use secure token handling and server-side rules for sensitive operations.
• Add unit and integration tests for auth flows and components.

License

• This project is licensed under the terms of the MIT License.
• You may replace or update the license as needed for client or proprietary projects.

---

Contact and Maintainer

• Name: Md Abu Kayser - Full-Stack Engineer
• Project: react-firebase-auth-starter
• Maintainer: md-abu-kayser
• Email: abu.kayser.official@gmail.com
• GitHub: github.com/abu.kayser-official

If you’d like this README tailored for a specific purpose - such as hiring managers, open-source contributors, or client deliverables - feel free to request a custom tone or format.

---

Thank you for reviewing this project!

---