"I'm going a little fast here". Yeah, about time! Frankly I'm tired of RUclips 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.
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.
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
@@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.
@@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!
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?
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
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
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()
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
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
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"
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
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
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 ?
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?
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.
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!
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"
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.
"I'm going a little fast here". Yeah, about time!
Frankly I'm tired of RUclips 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.
Thanks!
Erick, you don't even know how it was helpful for me! Thank you very much for yur work!
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.
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
@@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.
@@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!
What a timing! I just started to implement my serverless auth with Firebase alongside with Hasura :)
Cool!
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?
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
Before 8.0.0
import * as firebase from 'firebase/app'
After 8.0.0
import firebase from 'firebase/app'
thanks, this really helped me out
I spent over an hour looking at Firebase docs and couldn't figure this out. Thank you!!!!!!
@@danielvenn243 I too spend lot of time
But happy it helped u✌️🎊
Thanks alot for this, solved my problem with auth is not an function
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
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()
plus , try use this as importing:
import { firebase } from '@firebase/app'
import '@firebase/auth'
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)
}
}
This is a great walkthrough, clearly explained and found it very helpful, thanks!
Awesome!
You forgot to put on 18:10 the await keyword!
const user = await .... @line 25
Thanks Erik, great tutorial
Thank you! You saved my butt. Keep rocking!
Thanks you so much!!!
Thanks a lot for this course. It is great.
You are welcome!
this video is perfect erik thank you
You are welcome!
The console text is to small sir, I can't see it..
31:00 Cheers Bro 🥂
Tip of the day! You can move a row (or a selected block) of code by pressing alt + up/down. You're welcome!
Nice tip!
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
I have not, but that could help
32:28 how can i find router nuxtjs?
Thanks for covering this Erik. Question: any security concerns with exposing firebase config in front-end code?
It's fine, that's the way you need to do it.
Thanks, do you know how do I add signup with google to that? Im having hard times with that ...
Awesome but can you please tell when I am authenticated how not to get login route
is it possible t use Vue Fire here?
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
yeah but everybody can see your firebaseConfig is that okay or secure?
awesome, thanks!!!!!!!!!
You're welcome!
thank you so much for that trick of gettin user state thank you so very much was stuck in this thanks for helping
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"
Thanks, Erik. "firebase.auth().currentUser" being null inside the route guard was a problem for me. A simple but effective solution.
thank you for this video! how can I fix the refresh issue in nuxtjs since there is no main.js file?
Could you list some good extensions for Vue, like the vBase, etc
thank you errik
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
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
Thanks for this video btw!
you've got my sub !
All good except on auth state change then create app;
if network is slow app will create lately.
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 ?
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?
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.
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!
Great video! does anybody know what VS CODE THEME he's using?
yh i really wanna know as well :D
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"
Hmm.. not sure...
Nice
nice!
Thank u
You are welcome!
great vid! (Y)
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.
it's helpful but this video makes me sleepy ...
Ha! Well at least I helped you get to sleep :)
What do you think of Firebase? Also check out my new sponsor algoexperts! algoexpert.io/erik
Not working :(
Harish m what’s not working?
@@ProgramWithErik The first link is broken. The home page is algoexperts.io/product
@@nero1375 Thanks fixed!
Listening to you breathe is horrible. Decent tutorial though.
Thank you so much sir. Very thorough and well done!