Vue-guard-routes-with-Firebase-Authentication

Demonstration on how to guard paths in a Vue project with Vue Router and Firebase Authentication

Article

I have written a blog with explenation

gaute.dev

Medium

dev.to

Demo

Hosted at vue-routes-authentication.web.app

Summary

export function getCurrentUser() {
  return new Promise((resolve, reject) => {
    const unsubscribe = onAuthStateChanged(auth, (user) => {
      unsubscribe()
      resolve(user)
    }, reject)
  })
}

const routes = [
  {
    path: '/',
    redirect: '/signin'
  },
  {
    path: '/signin',
    component: SignIn
  },
  {
    path: '/profile',
    component: Profile,
    meta: {
      requiresAuth: true
    }
  }
]

router.beforeEach(async (to) => {
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth);
  if (requiresAuth && !await getCurrentUser()) {
    return '/signin';
  } 
})

Dev

Serve

npm run dev

Deploy to Firebase hosting

npm run deploy