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=

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

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=

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

View on GitHub

We also have a similar template for FIREBASE 🔥