Home

Awesome

Vuepabase

This is a project I created to show how Supabase auth (email and 3rd party GitHub) can be set up concretely with a new Vue 3 app. This integrates Supabase with Vue 3, Pinia, Vue-router 4, TailwindCSS, Vitest, Cypress and more. Please see package.json for more info.

If you want to a quick start to your next Vue 3 + Supabase app, please feel free to use this template. Below I will guide you through how to set the app up locally, and the configuration you need to do in Supabase.

Supabase Setup

Head on over to https://supabase.com/ and create your app. Choose your Project name, password, region and pricing plan as appropriate. This app will work just fine on free tier.

Once the app setup is finished, head over to Authentication - Settings. You'll want to add both your Production URL and localhost URLs to the Site URL / Additional Redirect URLs columns. Along with the base URL, we need to add redirect URLs for our password reset flow, and 3rd party auth flow. These are /resetpassword and /callback respectively.

All in all your 'Site URL' and 'Additional Redirect URLs' should look something like this (replacing the prod URL as appropriate)

FieldValue
Site URLhttps://vuepabase.netlify.app/
Additional Redirect URLshttp://localhost:3000/resetpassword, https://vuepabase.netlify.app/resetpassword, http://localhost:3000, http://localhost:3000/callback, https://vuepabase.netlify.app/callback

Once you save this, the email-password authentication flow should work properly after you've set the Vue app up locally.

GitHub Auth

You can additionally add GitHub auth to the app. First you'll need to go to GitHub and set up some app credentials.

Supabase have a great guide on how to do this already so you can follow that here: https://supabase.com/docs/guides/auth/auth-github

After you've got them, on Supabase - Settings - Auth, just enable GitHub as a 3rd party provider and enter the details you generated.

Your Supabase set up should now be complete and you can run the app locally.

Setup Vue app

npm install

Compile and Hot-Reload for Development

npm run dev

Your app should now be running at localhost:3000

Type-Check, Compile and Minify for Production

npm run build

Preview Built App

npm run preview

Recommended IDE Setup

VSCode + Volar (and disable Vetur).