DEV Community

Cover image for React Firebase Auth Template (With Protected Routes)
mmvergara
mmvergara

Posted on

React Firebase Auth Template (With Protected Routes)

TLDR: got tired of setting up this lightweight stack over and over again for some clients so i made a template, and i'm just here to share to ya'll.

πŸ”­ Github Repository

🌐 App Demo

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.

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 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

GitHub logo mmvergara / react-firebase-auth-template

React Firebase Auth template with Protected Routes πŸ”₯

React Firebase Auth with Protected Routes

🌐 App Demo

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.

We also have a similar template for SUPABASEπŸ’šπŸ€

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






Top comments (1)

Collapse
 
mmvergara profile image
mmvergara

dev.to/mmvergara/react-supabase-au...

Made a similar template for supabase too πŸš€