https://github.com/mmvergara/react-firebase-auth-template

React Firebase Auth template with Protected Routes 🔥
https://github.com/mmvergara/react-firebase-auth-template

boilerplate boilerplate-template firebase react react-router-dom template

Last synced: 29 days ago
JSON representation

React Firebase Auth template with Protected Routes 🔥

• Host: GitHub
• URL: https://github.com/mmvergara/react-firebase-auth-template
• Owner: mmvergara
• License: mit
• Created: 2024-06-15T09:31:41.000Z (7 months ago)
• Default Branch: main
• Last Pushed: 2024-12-02T12:39:51.000Z (about 1 month ago)
• Last Synced: 2024-12-02T13:41:19.782Z (about 1 month ago)
• Topics: boilerplate, boilerplate-template, firebase, react, react-router-dom, template
• Language: TypeScript
• Homepage: https://react-firebase-auth-templ-mmvergaras-projects.vercel.app/
• Size: 161 KB
• Stars: 11
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.MD

Awesome Lists containing this project

README

        


React Firebase Auth with Protected Routes


[**`🌐 App Demo`**](https://react-firebase-auth-templ-mmvergaras-projects.vercel.app/)







## Features

- 🚀 Protected Routes

- 🚀 Firebase User Object in Global Context via `useUser`

- 🚀 User Authentication

- 🚀 Routing

It's also blazingly fast 🔥 No really, [try it out for yourself.](https://react-firebase-auth-templ-mmvergaras-projects.vercel.app/)

[We also have a similar template for SUPABASE💚🍀](https://github.com/mmvergara/react-supabase-auth-template)

## Getting Started

1. Clone the repository

2. Install dependencies: `npm install`

3. Go to `./config.ts` and add your Firebase configuration

4. Run the app: `npm run dev`

## What you need to know

- `/router/index.tsx` is where you declare and manage your routes 

- `/context/AuthContext.tsx` is where you can find the `useUser` hook

  - This hook gives you access to the `user` object from Firebase Auth globally

- `/Providers.tsx` is where you can add more `providers` or `wrappers`