Adding Firebase Authentication | Vue.js + Vuetify + Firebase FULL PROJECT

----------

----------

See you in the videos!

[HCanalesS]

Thank you for these series! Vue.js + Firebase is an awesome stack. I'm making a demo project based on your setup and I really like it. Thanks a lot!

[nelsoncheung]

Thanks Max, although I knew firebase auth already but still appreciate your efforts. It is good tutorial. Your tutorials help me to start my new project with vue+vuetify+firebase now! So far it is 40% done! I'm looking forward to see your next tutorial.

[roulzhq]

Nice Video! One question:
Why do we need to import firebase twice? Aren't we using an other firebase instance than we created than?

[ymdqbif]

You get this error, what to do with it?
Failed to load resource: the server responded with a status of 400 ()

[Quynn-Oneal]

great work!

thanks for making these awesome videos!

[oleg_agapov]

Hey Max. I have a question I couldn't find answer in internet so maybe you have some clues.
We easily can assign html classes based on JS (either it's simple true/false variable or the name of class itself).
But how about vise versa? In my example, I want that on medium screens I have fixed on right side navigation drawer, but on small and xs it should appears over my main content (so clipped = true). How can I change JS variable based on vuetify display breakpoints?

Thank you for videos, btw!

[LajonDJ]

These series are awesome! Do you plan on making series with firebase and social logins (facebook & google+ etc.) in the future? :D

[alexnezhynsky]

Hi, seems like there's still one problem remaining. If you sign in and then refresh the page, you will lose the user reference in the Vuex store. However, technically, you'd still be signed in (because Firebase keeps its own reference in either local storage or a cookie, not sure which one). So, it seems like in main.js, when the app bootstraps, we need to check with Firebase whether the user is signed in, and if so, update our store. Otherwise, users would have to log in again every time they refresh the page.

Another thing is, we'd need to add guards to our routes through the "meta" fields. This presents yet another challenge because we need to be able to access the Firebase user from within the router, but also make sure that it's properly synced with the user in our Vuex store.

Hope you could comment on these! Thanks

[adamyoungers]

Did something change in the promise returned by since this was published? I'm getting back an object with user nested within it so that instead of using user.uid, I have to do something like data.user.uid.

[johnsonhuang]

I have a question. How to use firebase in nuxt.js. Thanks for sharing.

[toomass]

Hello. Great work with the video. However i have general question regarding API keys and JS projects(vue in particular)

In the video, we store API key and all relevant information regarding to firebase.initializeApp in main.js. but if we would to push this project to github then obviously this file with all our secret credentials would be pushed as well meaning other people could use my database(is this correct?)
If that is the case then what would be the best way to store api keys. What i mean is, where? Create config.js and add it to .gitignore or is there other good options?

[andrewkiminhwan]

is there a video on persisting logged in state even on page refresh?

[GexoRNG]

I am having an issue with the autoSignIn. If I log out, my user gets logged out correctly, but if I refresh the page, it automatically logs back in the last user, without me actually loggin in. Anyone else has the same problem?

[_the_one_]

Max, you set the user to null.It's ok but my question is:
Is that the correct way to make authentication?I mean if i have to create an application with users i have to do it in that way?

[sliver]

Anyone have any good resources to add Role-Based authentication with Vue and Firebase?

[reallygrid]

4:25 I think it should be user.user.uid rather than user.uid. user.uid is undefined, this field doesn't exist. Please check before creating newUser object console.dir(user) and make sure.
Otherwise your tutorial is great!

[rootdefault]

when a new user is signing up and you want to pass in more information how do you do it

[matthiku]

Here is how to persist a logged on user in this App after a page refresh etc.:

in _main.js:_ (inserted right after firebase.initializeApp)
(user) {
if (user) {
// User is signed in.
const userData = {
id: user.uid,
registeredMeetups: []
}
store.dispatch('setUser', userData)
} else {
console.log('No user is signed in.')
}
})
You also have to add an action 'setUser' in your store:
setUser ({commit}, payload) {
commit('setUser', payload)
},
Hope this helps anybody.

[raymondmichael]

Hi fellow coders; I have tried and reviewed several my codes comparing with max's codes; but I can't redirect the user after signup neither on signin; I don't know what I do miss here

[milosstojanovic]

Why when I sign in user and reload page, user is nit signed in anymore?