DEV Community

Cover image for Vue, guard routes with Firebase Authentication

Vue, guard routes with Firebase Authentication

Gaute Meek Olsen on November 17, 2019

With Vue Router you might want to guard some paths and redirect users to a signup page if they are not authenticated. I will show you how this is d...
Read full post
Collapse
 
franyerhiguerey profile image
Franyer Higuerey •

Hello! it's pretty well, if you are in firebase 9 is the same, but only you have to create a new function without call "firebase.getCurrentUser" and importing like this:

import { onAuthStateChanged } from 'firebase/auth'
import { auth } from 'src/firebase'

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

})
}

and later when you going to call it in a function has to be async obviusly like:

const data = await user()

thanks bro!

Collapse
 
frederickirchhoff profile image
Frederic Kirchhoff •

This is awesome! This is a major issue (I ended up thinking I will have to write my entire app in a single file to avoid that auth problem) and I am surprised I haven't found an elegant solution like that anywhere else on the web!

Collapse
 
tarkhil profile image
tarkhil •

The next problem, I'm trying to fight it on github.com/tarkhil/authts is that RouterGuard does nothing on the first request to the router.
I have no idea what I could make wrong. But now it's 100% repeatable for me

Collapse
 
tarkhil profile image
tarkhil •

Seems to be the most complete and elaborated example on the subject

Collapse
 
kaguya3222 profile image
Maxim Anisimov •

Thank you! You've made my day!

Collapse
 
tarkhil profile image
tarkhil •

Unfortunately, firebase.getCurrentUser = () requires something additional in TypeScript and I did not get answer yet

Collapse
 
gautemeekolsen profile image
Gaute Meek Olsen •

Usually, TS won't let you add a method to another object without something additional.

But maybe you can just assign the method to a new variable instead:

const getCurrentUser = () => {
    return new Promise((resolve, reject) => {
        const unsubscribe = firebase.auth().onAuthStateChanged(user => {
            unsubscribe();
            resolve(user);
        }, reject);
    })
};
Enter fullscreen mode Exit fullscreen mode
Collapse
 
chromaticranger profile image
Martin Stickley •

I can confirm that this approach worked for me in TS. :-) Many thanks @gautemeekolsen for sharing this knowledge.

Collapse
 
arafel profile image
Paul Walker •

That just saved me from probably several hours of trying to figure out how to solve it, and I still wouldn't have done it as elegantly as that. :-) Thanks!

Collapse
 
matheusmacedoap profile image
Matheus Macedo •

Me ajudou muito... algo simples e direto!!!

Parabéns!!!