DEV Community

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

Posted on

8 2 2 2 2

React Supabase Auth Template (With Protected Routes)

I've done all of the underlying stuff so you can just focus on creating the app and not having to go through the hassle of authentication

πŸ”­ Github Repository

🌐 App Demo

Features

  • πŸš€ Protected Routes
  • πŸš€ Supabase Session Object in Global Context via useSession
  • πŸš€ User Authentication
  • πŸš€ Routing and Route Guards

It's also blazingly fast πŸ”₯ No really, try it out for yourself.

Getting Started

  1. Clone the repository
  2. Install dependencies: npm install
  3. Create .env using the .env.example as a template
VITE_SUPABASE_URL=
VITE_SUPABASE_ANON_KEY=
Enter fullscreen mode Exit fullscreen mode

Run the app: npm run dev

What you need to know

  • /router/index.tsx is where you declare your routes
  • /context/SessionContext.tsx is where you can find the useSession hook
    • This hook gives you access to the session object from Supabase globally
  • /Providers.tsx is where you can add more providers or wrappers

GitHub logo mmvergara / react-supabase-auth-template

React Supabase Auth template with Protected Routes

React Supabase Auth with Protected Routes

🌐 App Demo

Features

  • πŸš€ Protected Routes
  • πŸš€ Supabase Session Object in Global Context via useSession
  • πŸš€ User Authentication
  • πŸš€ Routing and Route Guards

It's also blazingly fast πŸ”₯ No really, try it out for yourself.

We also have a similar template for FIREBASE πŸ”₯

Getting Started

  1. Clone the repository
  2. Install dependencies: npm install
  3. Create .env using the .env.example as a template
VITE_SUPABASE_URL=
VITE_SUPABASE_ANON_KEY=
  1. Run the app: npm run dev

What you need to know

  • /router/index.tsx is where you declare your routes
  • /context/SessionContext.tsx is where you can find the useSession hook
    • This hook gives you access to the session object from Supabase globally
  • /Providers.tsx is where you can add more providers or wrappers






We also have a similar template for FIREBASE πŸ”₯

Image of AssemblyAI tool

Challenge Submission: SpeechCraft - AI-Powered Speech Analysis for Better Communication

SpeechCraft is an advanced real-time speech analytics platform that transforms spoken words into actionable insights. Using cutting-edge AI technology from AssemblyAI, it provides instant transcription while analyzing multiple dimensions of speech performance.

Read full post

Top comments (0)

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

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Communityβ€”every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple β€œthank you” goes a long wayβ€”express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay