supabase - How to prevent to not logged users to see vue app pages

Question

I'm starting use supabase as an alternative to firebase. I'm implementing a siple authentication system for my vue webapp, I have a doubt about redirection. I've used the magic link solution to let the user login https://supabase.com/docs/guides/auth/auth-magic-link but I'm not sure how to correctly setup the redirect after login in my localhost during the dev process and hov I can prevent users to see a view if they are not logged in.

I have pinia implemented and vue router, at the moment this is the code I have in my homepage to let users login

import { supabase } from '../supabase/supabase'

export default {
    name: 'HomeView',
    data() {
        return {
            userEmail: null
        }
    },
    created() {
        
    },
    mounted() {
        //this.initGoogleAuth()     
    },
    methods: {
        initMagicLinkAuth() {
            supabase.auth.signInWithOtp({
                email: this.userEmail,
                options: {
                    emailRedirectTo: '/about'
                }
            })
        }
    }
}

in the template I have a simple email input field

                <input type="email" class="form-control" placeholder="Email" v-model="userEmail">
                <div class="d-grid gap-2">
                    <button class="btn btn-primary" @click.prevent="initMagicLinkAuth()">Login</button>
                </div>

and in my router I have this code

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('../views/AboutView.vue')
    }
  ]
})

export default router

How I can correctly setup the vue router to prevent navigation if users are not logged in and how I can setup correctly supabase for redirect?

Answer 1

Taken from: https://blog.logrocket.com/ultimate-guide-authentication-vue-js-supabase/

// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
function loadPage(view) {
  return () =>
    import(
      /* webpackChunkName: "view-[request]" */ `@/views/${view}.vue`
    );
}
const routes = [
  {
    path: '/',
    name: 'Dashboard',
    component: loadPage("Dashboard"),
    meta: {
      requiresAuth: true,
    }
  },
  {
    path: '/sign-up',
    name: 'SignUp',
    component: loadPage("SignUp")
  },
  {
    path: '/sign-in',
    name: 'SignIn',
    component: loadPage("SignIn")
  },
]
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

router.beforeEach((to, from, next) => {
  // get current user info
  const currentUser = supabase.auth.user();
  const requiresAuth = to.matched.some
  (record => record.meta.requiresAuth);

  if(requiresAuth && !currentUser) next('sign-in');
  else if(!requiresAuth && currentUser) next("/");
  else next();
})

export default router