React Supabase Auth Template (With Protected Routes)

mmvergara - Jun 23 - - Dev Community

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 πŸ”₯

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .