https://github.com/mmvergara/react-supabase-auth-template

React Supabase Auth template with Protected Routes
https://github.com/mmvergara/react-supabase-auth-template

authentication boilerplate boilerplate-template react react-router-dom supabase template

Last synced: about 2 months ago
JSON representation

React Supabase Auth template with Protected Routes

• Host: GitHub
• URL: https://github.com/mmvergara/react-supabase-auth-template
• Owner: mmvergara
• License: mit
• Created: 2024-06-18T09:02:20.000Z (8 months ago)
• Default Branch: main
• Last Pushed: 2024-12-02T12:35:27.000Z (about 2 months ago)
• Last Synced: 2024-12-02T13:38:25.269Z (about 2 months ago)
• Topics: authentication, boilerplate, boilerplate-template, react, react-router-dom, supabase, template
• Language: TypeScript
• Homepage: https://react-supabase-auth-template.vercel.app
• Size: 176 KB
• Stars: 19
• Watchers: 1
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.MD

Awesome Lists containing this project

README

        


React Supabase Auth with Protected Routes








[**`🌐 App Demo`**](https://react-supabase-auth-template.vercel.app/)

## 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.](https://react-supabase-auth-template.vercel.app/)

[We also have a similar template for FIREBASE 🔥](https://github.com/mmvergara/react-firebase-auth-template)

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