Vue.js Firebase Authentication - New Project Tutorial

🚨 Enroll in my Vue Course and get free bonsues! bit.ly/2Tt30az
Vue.js + Firebase + Authentication is a great way of getting authentication in your Vue.js, quickly and easily. In this video we'll add Firebase with Authentication into our Vue.js app! With email and password signup! #vuejs #firebase #authentication
👉 Check out my last videos on Quasar!
• Quasar Vue.js Tutorial...
📚 Sign up and get notified about my new Vue 3 course! - www.vuecourse....
👉 Source code
github.com/Eri...
♡ ♡ ♡
Make Sure To Check These Courses Out On Udemy! 💻
→ JAVASCRIPT ALGORITHMS COLT STEELE'S COURSE - bit.ly/2L8HSPV
→ THE WEB DEVELOPER BOOTCAMP (GREAT FOR BEGINNERS) - bit.ly/2zP4alw
→ THE ADVANCED WEB DEVELOPER BOOTCAMP - bit.ly/2h53MYg
→ THE ULTIMATE VUE JS 2 COURSE - bit.ly/2CTvsvx
→ CHECK OUT THIS COURSE - Angular 8 - The Complete Guide - bit.ly/2sCMxWm
→ Check out the 100 Front End Interview Question Challenge here - bit.ly/2NM9GAm
→ The Complete 2019 Web Development Bootcamp - Angela Yu - bit.ly/2ADKEKD
♡ ♡ ♡
📚 GET MY LAST BOOK EMBER.JS COOKBOOK! - goo.gl/LEIdSc
MY COURSES -
→ VUE.JS + NUXT.JS (Two Courses In One) - bit.ly/2LalQka
___
Links
MY WEBSITE - www.programwith...
MY TWITTER - / erikch
MY FACEBOOK - / programwitherik

[@boots3372]

"I'm going a little fast here". Yeah, about time!
Frankly I'm tired of TH-cam tutorials treating me like this is my first day with Vue. There is (way) more than enough of those videos, I just want the meat of it and you did a great job providing that. Keep up that pace.

[@ProgramWithErik]

Thanks!

[@darshgupta6276]

Why do you not have the millions of subscribers you should?? You are the best man!!
Edit: Also, use Prettier, a VSCode extension. It sort of 'beautifies' your code and makes it look much better.
Edit 2: That VSCode theme you use looks cool. What is it?

[@КлимСомов-х6с]

Erick, you don't even know how it was helpful for me! Thank you very much for yur work!

[@MrShiibbyy]

This is perfect Erik! I think my only issue now (which you may have already or plan to cover) is how to make "Secret" available to only one user (or, a different secret to each user) Kind of how maybe a "my account" would function

[@tiptail]

Thanks for this video! I'm just starting with Firebase and am writing a little app where users can log in and do some things. Logging in is the first step. I'm on Firebase v9 but I was able to adapt your code to what I need and it's working great.

[@germanrapchartshd4345]

Hey i just saw that you did it on v9. me was trying to refactor some code and since i updated firebase to v9 im getting an error from the console "Uncaught TypeError: Cannot read properties of undefined (reading 'getProvider')". thank you, if you can help me

[@tiptail]

@@germanrapchartshd4345 UGH yeah updgrading to v9 looks like a pain. I started with it and have modified all the code I've been learning from to work with 9, so far so good, but you may have to redo your whole interface if you updated to 9.

[@germanrapchartshd4345]

​@@tiptail hey, i just saw your message now. i chose the way to downgrate to version 8 on this weekend and prolly gonna read the docu carefully while migration to version 9, also with the interface! thank you for your advice!

[@nero1375]

What a timing! I just started to implement my serverless auth with Firebase alongside with Hasura :)

[@ProgramWithErik]

Cool!

[@hariharan-wt6qk]

Before 8.0.0
import * as firebase from 'firebase/app'
After 8.0.0
import firebase from 'firebase/app'

[@Toemas]

thanks, this really helped me out

[@danielvenn243]

I spent over an hour looking at Firebase docs and couldn't figure this out. Thank you!!!!!!

[@hariharan-wt6qk]

@@danielvenn243 I too spend lot of time
But happy it helped u✌️🎊

[@astaxsson]

Thanks alot for this, solved my problem with auth is not an function

[@LesCarbonaro]

Thanks for covering this Erik. Question: any security concerns with exposing firebase config in front-end code?

[@ProgramWithErik]

It's fine, that's the way you need to do it.

[@gavinh1819]

This is a great walkthrough, clearly explained and found it very helpful, thanks!

[@ProgramWithErik]

Awesome!

[@jospuli]

Tip of the day! You can move a row (or a selected block) of code by pressing alt + up/down. You're welcome!

[@ProgramWithErik]

Nice tip!

[@selcuk2321]

Thank you for superb video. At the end just it is taken this error "uncaught (in promise) Error: Redirected when going from "/login" to "/secret" via a navigation guard"

[@MIXT4PEmessiah]

Thanks, Erik. "firebase.auth().currentUser" being null inside the route guard was a problem for me. A simple but effective solution.

[@dariuszewski7557]

Thanks, do you know how do I add signup with google to that? Im having hard times with that ...

[@SagiMor23]

You forgot to put on 18:10 the await keyword!
const user = await .... @line 25

[@imposhka]

thank you for this video! how can I fix the refresh issue in nuxtjs since there is no main.js file?

[@balajisv4052]

Could you list some good extensions for Vue, like the vBase, etc

[@ethanliu4012]

Hi Erik, I am trying to implement link phone number to an already logged-in account in vue.js. But I find it hard to add recaptcha provided by firebase.auth to vue as component. I think it might related to virtual dom of vue v.s. firebase.auth.Recaptcha requires a container in a real dom. So how can we mount a firebase.auth.recaptcha to our vue.js as a vue component ?

[@kaagman49]

When i go to the url by using the searchbar i get the error "The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside , or missing . Bailing hydration and performing full client-side render." and it first shows the page where it is supposed to go but a second later it redirects me to the logged in page if i do not fill the Logged in page with content it does redirect me to the page it is supposed to be. Can anyone help me with this issue? Edit: Fixed it by removing cookies i didn't have a log out button so i was logged in everytime

[@Ronaldineo777]

Thank you so much sir. Very thorough and well done!

[@javierlizarazu1297]

18:30 you will get an error with Auth... i found this explanation
import * as firebase from 'firebase'
console.log(firebase.auth) // Undefined
console.log(firebase.default.auth) // Function

[@SagiMor23]

I had the same problem, try do this instead =>
it will still be an async function but with .then() method ==>
pressed(){
firebase.auth().createUserWithEmailAndPassword(this.email , this.password).then(function() {
console.log('user:', firebase.auth().currentUser);
})
this.$router.push({name : 'secret'})
==> after the then()

[@SagiMor23]

plus , try use this as importing:
import { firebase } from '@firebase/app'
import '@firebase/auth'

[@SagiMor23]

or in the async await way:
async pressed(){
try{
const user = await firebase.auth().createUserWithEmailAndPassword(this.email , this.password)
console.log(user);
this.$router.push({name : 'secret'})
}catch(err){
console.log(err)
}
}

[@them1ku]

Thank you! You saved my butt. Keep rocking!

[@a29stech33]

All good except on auth state change then create app;
if network is slow app will create lately.

[@tobias6361]

hey, thanks for the video. so one exposes the firebase config in the front end, but what about google firestore connection, you can't put the config into the front end, that is definetly a security issue, how can we handle that? google functions? could you explain that topic maybe?

[@ProgramWithErik]

The firebase config is definetly in the front end, and since it's in the front-end code anyone has access to it if they look at the source code or source maps. The firestore connection is done through the firebase config. When you setup firestore you can setup security that only allows authenticated users or I believe you can even whitelist certains users to see things. It's definetly worth a video in the future.

[@tobias6361]

Hey, thank you for your answer!
So what if someone copy’s my firebase config Code? They would be able to connect to my Firestore app but for example I have a database which should be readable by everyone because like I store data that should be displayed in a table but is updated continuously with google functions. Than i wouldn’t need and security rules except for that no one is able to right in that database but to right everything right?
For like User profiles data saved in the database, I get that one needs to only access the authenticated user that belongs so this special data.
Thank you!

[@tanzimibthesam5861]

Awesome but can you please tell when I am authenticated how not to get login route

[@manumaestri]

Thanks Erik, great tutorial

[@NGAJINGODING]

The console text is to small sir, I can't see it..

[@breezycodes]

Is it possible to get this same type of thing for nuxt? I tried using firebase auth with nuxt and Every time I refresh the browser, the store resets and the user information returns to being null

[@ProgramWithErik]

Yes! When I was researching the refresh problem with Vue, I saw a few examples of getting it working Nuxt. It's a lot more complicated though since you have to deal with the server side and the client side. Maybe In the future I'll create a video on that

[@breezycodes]

Thanks for this video btw!

[@gevkrieger7765]

Great video! does anybody know what VS CODE THEME he's using?

[@petrhanzl8399]

yh i really wanna know as well :D

[@ИльдарИсламов-я8ч]

Thanks you so much!!!

[@MrJohAA]

31:00 Cheers Bro 🥂

[@rittenbrake1613]

Erik please help ! :
(node:29344) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
import Vue from 'vue'
^^^^^^
SyntaxError: Cannot use import statement outside a module
_
even after I add "type":"module"in the package.jason ,it just :
Error [ERR_MODULE_NOT_FOUND]: Cannot find module /
TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".vue"

[@ProgramWithErik]

Hmm.. not sure...

[@siddharthdeepakbhaipanjwan722]

thank you so much for that trick of gettin user state thank you so very much was stuck in this thanks for helping

[@quickpodcast5minutecasts]

yeah but everybody can see your firebaseConfig is that okay or secure?

[@Akosiyawin]

The problem about this is that your firebase config is exposed on your frontend. If you would go to the page source and click the compiled JS of Vue, which is the app.js you can totally search the firebase Config details which is very dangerous if you have firestore or database setup.

[@christopher7540]

this video is perfect erik thank you

[@ProgramWithErik]

You are welcome!

[@BodrumDrone]

32:28 how can i find router nuxtjs?

[@duythinho806]

thank you errik

[@andrewkiminhwan]

anyone ever use vuex-persistedstate package? the snippet he uses at 37:42 is not working for me because i save user uid in vuex state which is not persisted on refresh

[@ProgramWithErik]

I have not, but that could help

[@kiocam246]

you've got my sub !

[@MisterCuriousController]

is it possible t use Vue Fire here?

[@other_perfection]

awesome, thanks!!!!!!!!!

[@ProgramWithErik]

You're welcome!

[@ProgramWithErik]

What do you think of Firebase? Also check out my new sponsor algoexperts! algoexpert.io/erik

[@harishm7683]

Not working :(

[@ProgramWithErik]

Harish m what’s not working?

[@nero1375]

@@ProgramWithErik The first link is broken. The home page is algoexperts.io/product

[@ProgramWithErik]

@@nero1375 Thanks fixed!

[@SZOKE19940321]

nice!

[@heyyy4987]

Nice

[@tungominh7743]

Thank u

[@ProgramWithErik]

You are welcome!

[@TheHavvoc123]

great vid! (Y)

[@SweetPeachannel]

it's helpful but this video makes me sleepy ...

[@ProgramWithErik]

Ha! Well at least I helped you get to sleep :)

[@finnalandem]

Listening to you breathe is horrible. Decent tutorial though.

[@rmznovali]

Thanks a lot for this course. It is great.

[@ProgramWithErik]

You are welcome!