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 O…


This content originally appeared on DEV Community and was authored by mmvergara

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

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




View on GitHub


We also have a similar template for FIREBASE 🔥


This content originally appeared on DEV Community and was authored by mmvergara


Print Share Comment Cite Upload Translate Updates
APA

mmvergara | Sciencx (2024-06-23T03:41:34+00:00) React Supabase Auth Template (With Protected Routes). Retrieved from https://www.scien.cx/2024/06/23/react-supabase-auth-template-with-protected-routes/

MLA
" » React Supabase Auth Template (With Protected Routes)." mmvergara | Sciencx - Sunday June 23, 2024, https://www.scien.cx/2024/06/23/react-supabase-auth-template-with-protected-routes/
HARVARD
mmvergara | Sciencx Sunday June 23, 2024 » React Supabase Auth Template (With Protected Routes)., viewed ,<https://www.scien.cx/2024/06/23/react-supabase-auth-template-with-protected-routes/>
VANCOUVER
mmvergara | Sciencx - » React Supabase Auth Template (With Protected Routes). [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/06/23/react-supabase-auth-template-with-protected-routes/
CHICAGO
" » React Supabase Auth Template (With Protected Routes)." mmvergara | Sciencx - Accessed . https://www.scien.cx/2024/06/23/react-supabase-auth-template-with-protected-routes/
IEEE
" » React Supabase Auth Template (With Protected Routes)." mmvergara | Sciencx [Online]. Available: https://www.scien.cx/2024/06/23/react-supabase-auth-template-with-protected-routes/. [Accessed: ]
rf:citation
» React Supabase Auth Template (With Protected Routes) | mmvergara | Sciencx | https://www.scien.cx/2024/06/23/react-supabase-auth-template-with-protected-routes/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts