DEV Community

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

Posted on

7 2 2 3 2

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






Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site

Top comments (1)

Collapse
 
mmvergara profile image
mmvergara

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

Made a similar template for supabase too 🚀

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay