Form what I found is that the imports from '@angular/fire/firestore' presented in this demo are now in '@angular/fire/compat/firestore'. I am using @angular/cli 15.0.2 and @angular/fire 7.5.0
@@ransfordarthur4418 His tutorials/content will be whatever the hip new thing is so he can attract more customers. Unfortunately Angular doesn't do that, even if it is still a widely used language. It's crazy how much React content there is relative to Angular.
I've watched a lot of videos from this channel, and while they are well produced, there is something about the presentation that I find hard to follow. I'm not sure if it's just too fast, or if I want more background information, or something else (or all of the above).
For what it's worth, I loved this video and felt it was done very well. That said, I've spent several years getting up to speed on the underlying topics, and I've still got a long ways to go.
I was very frustrated too, especially at the beginning ... but with more time passing by I realized that these videos are not tutorials actually ... they are mixture between showing off and providing just a glimpse of what you can do with Angular. ... So now I watch them a lot, but with different mindset: if now I like a topic - I know I can use the video, but I'll need to research a lot of stuff aside from this ... :) ... and these videos are just a piece of the puzzle, not the whole one. (Which probably is the actual goal of @fireship :) ...)
A video on Angular libraries would be cool. Explain why/when to create a library and then how to create it and how to use it in a main project. Also, maybe a video on general guidelines for the structure of an angular project. Where to put services and models, when to make something a module, etc.
EXCELLENT! And great context! Fast but that's why there's pause (an hour to walk/code through the 11 minute vid). One problem I had is I cannot add additional user parameters. I get a FirebaseError "DocumentReference.set" "invalid data" Unsupported field for anything additional I try to add. Ex. isAdmin?: Boolean. How do I need to put this in? Thanks! UPDATE: Figured it out - Needed to check for the presence of the property on the user object in updateUserData and if null, assign it before creating the data object. Ex. if (isAdmin == null) isAdmin = false;
Good refresh, thanks! Authentication and permissioning are really complex parts of any app. Firebase ecosystem facilitates a little the first approach but is really far from doing an enterprise-grade auth system. It would be really cool to have a video about more advanced features like how to handle user administration, how to set up roles and permissions securely, etc..
Would appreciate if you show the same process with react! Excellent work with angular though.. very clear and concise. Would be better if you could link through the documentation of various packages and libraries you have used. Thanks!
Another useful solution to use with Firebase Auth is a BehaviorSubject. That way you can access to your current user info by dot notation and not subscribing.
Awesome, I like how Jeff has to wrap things up because baba aka "Boss Baby" in the background is hungry..Lol. I think baba is calling out Daddy to console.log(' pls put my crying emoji in the first video') for fireship.io. Great first video for fireship.io and 2019. Awesome job.
@@Fireship Another interesting topic is Persistent authentication for ssr websites via service worker instead of cookies, you can find it in the docs of firebase
So that's how our fireship.io works .. already signed in to stay up to date and I'm going to do the same with my own website Exactly what I wanted for my blog ! This video is lit 🔥👌❤️
Awesome Video. I see that Jeff created entries for the user's display name and photo URL although this is something that can be handled by the authentication service, does anyone have experience in seeing that having that information in the Firestore being more useful than letting the auth service handle it? Edit: After 10 seconds of playing around with it, I saw that the benefit is that you can query this information from other users as well. If you were to only use Firebase auth, only the signed in user could view their display name, you need it in firestore to let other users query that information also. Awesome stuff as always :)
There's a method called signInWithEmailAndPassword which you can use if you just pass the email and password in as parameters. You'll need to get the email and password from a form or some other means naturally, but other than that it's straightforward enough.
I like this video as it covers an important Firebase and Angular concept in authentication. But if I have a node server as my backend, how can this come along in the equation? Shall I set the same authentication in node and direct the traffic from Angular to node? How can the session maintained and passed between frontend Angular and backend Node?
Thanks for the great tutorial. It through a permission error after applying the database rules, it were fixed after adding, read permission to allow users rule, but I'm not sure if this is secure or not.
everytime a user logs in it calls the 'set' method to Firestone. doesn't that end up charging us even though nothing is being changed for returning users?
Good question. One way to stop this is to check if the user is new or not which is .additionalUserInfo.isNewUser. If isNewUser is true only then call updateUser().
Can I use the email login with ionic instead of only angular with the google signin? Also, I dont get how to utilize the http requests to set up backend, it would be awesome to have an crud/auth with cloud functions.
match /{document=**} { allow read, write : if false; } match /users/{userId} { allow read, write : if request.auth.uid == userId; } Add read also if the userId matches
How do I allow only few specific people? Please help. Thanks! I was troubled by the tilde key but now this is my only problem left. I want to authorize few more people
@@hiteshchoudhary3412 It depends on what you mean by full course... On Fireship, a full course is ~20 videos, but I also create standalone episodes like this one here.
Does anyone have the code for this project with the latest version of Angular on their GH? My program will compile with no errors, however when I open up local host, nothing is generated.
Thanks for the tutorials,i would like to ask you a question.Lets say a user register in my app when he is offline ,how can i store the data locally and when he is offline sync them to firebase.The logicis quite simple but making it work is what concerns me.Thanks in advanced.
I don't understand the rules. How do they know I am referring to the User ID from my app? I don't understand how it checks if I am on the right account.
That would be cool. I contribute to RxFire and know the library very well. Vue has VueFire, but RxFire would probably be the best bet for react if starting today.
ObjectUnsubscribedErrorImpl {message: "object unsubscribed", name: "ObjectUnsubscribedError"} -- When I log in and logout, then log in again, this error pops up in the console, how to fix that? Is it dangerous?
I had a typo in the template html saying this.users$ instead of this.user$ and it took me so long to figure out why nothing was happening when i logged in :(
this way of checking the user$ will trigger the observable every time anybody subscribes to it. Lets assume I have a route with some data fetching to do after checking the route guard. At this time, problem is each time guard run, the whole observable is running again. it might cause a slight delay for the routed components to kick start. (checks auth guard then switchmap etc) What I have is a behavior subject which holds the current state (default 'null'). Each component or router guard checks that value. So there is no reinitialize or re running of the observable. Emit a new value only if auth state changed. This way there will not many subscription to the user$ observable.
it IS up to you, but that's not the convention. The Interface is your model type, as you could just as easily use a Class to define your model, but they would both still be models (ie, the shape of your data object).
Has anyone figured out how to make this work for the Facebook provider. I tried following the same model as the google provider setup but it's not working. Ideas? Also anyone got good resources for understanding the angularfire library? The docs aren't very clear... async facebookSignin() { const provider = new auth.FacebookAuthProvider(); const credential = await this.afAuth.auth.signInWithPopup(provider); return this.updateUserData(credential.user); }
Would be great to have an update, as it seems like AngularFire has completely changed names of objects since this video was published.
Form what I found is that the imports from '@angular/fire/firestore' presented in this demo are now in '@angular/fire/compat/firestore'. I am using @angular/cli 15.0.2 and @angular/fire 7.5.0
Unfortunately, Jeff/Fireship doesn't seem too keen on Angular lately,
so I highly doubt a follow-up video will come
fingers crossed though
@@ransfordarthur4418 na he’s still in love with it. He’s just playing with new tools of late, as that’s what people want to see.
@@ransfordarthur4418 His tutorials/content will be whatever the hip new thing is so he can attract more customers. Unfortunately Angular doesn't do that, even if it is still a widely used language. It's crazy how much React content there is relative to Angular.
I've watched a lot of videos from this channel, and while they are well produced, there is something about the presentation that I find hard to follow. I'm not sure if it's just too fast, or if I want more background information, or something else (or all of the above).
Me too :(
YES!! I would pretty much love more background information. I need to know how we came up with this code and why does there lines work.
For what it's worth, I loved this video and felt it was done very well. That said, I've spent several years getting up to speed on the underlying topics, and I've still got a long ways to go.
@Useful Code Recipes You need to register and watch the whole course and pay for it. Money making ..........
I was very frustrated too, especially at the beginning ... but with more time passing by I realized that these videos are not tutorials actually ... they are mixture between showing off and providing just a glimpse of what you can do with Angular. ... So now I watch them a lot, but with different mindset: if now I like a topic - I know I can use the video, but I'll need to research a lot of stuff aside from this ... :) ... and these videos are just a piece of the puzzle, not the whole one.
(Which probably is the actual goal of @fireship :) ...)
Very nice summary, even 3 years later!
A video on Angular libraries would be cool. Explain why/when to create a library and then how to create it and how to use it in a main project. Also, maybe a video on general guidelines for the structure of an angular project. Where to put services and models, when to make something a module, etc.
Amazing tutorial!
Nice tutorial! I personally find Angular + Firebase as one of the most efficient stack for prototyping!
hi is this tutorial still relevant today?
as always fireship has the best tutorials
Looking forward to more Angular and Firebase videos!
I really loved the part about firestore rules, I needed that kind of tip. Awesome video.
Great! Thank a lot for so useful and short tutorial. It has closed some my critical question about this topic
Looking forward to Flutter related content on this channel.
The plan is to release the first flutter vid this month.
Yesssssss!!!
Please Flutter more...
@@Fireship yassss
You got a great implementation Mate !!🔥🔥🔥
I would love to see more about SEO and Angular
EXCELLENT! And great context! Fast but that's why there's pause (an hour to walk/code through the 11 minute vid).
One problem I had is I cannot add additional user parameters. I get a FirebaseError "DocumentReference.set" "invalid data" Unsupported field for anything additional I try to add. Ex. isAdmin?: Boolean. How do I need to put this in?
Thanks!
UPDATE: Figured it out - Needed to check for the presence of the property on the user object in updateUserData and if null, assign it before creating the data object. Ex. if (isAdmin == null) isAdmin = false;
Excellent video. So clear and concise - thanks Jeff!
Gracias,nde verdad. Recién estoy comenzando en web con angular y firestore, y este vídeo me ayudo bastante.
Really need the Vue and Flutter tutorials.
Thanks for this. Incredibly timely as I am implementing this exact thing over the weekend.
A Flutter version would be awesome!
Really excited for any flutter videos!
Love it! Angular
THANK YOU, you saved my day with this tutorial
hi is this tutorial still relevant today?
a similar video for Kotlin Jetpack Compose would be a great help
Good refresh, thanks!
Authentication and permissioning are really complex parts of any app. Firebase ecosystem facilitates a little the first approach but is really far from doing an enterprise-grade auth system. It would be really cool to have a video about more advanced features like how to handle user administration, how to set up roles and permissions securely, etc..
Yes, that is a topic I will revisit soon. I tackled role based auth awhile ago, so maybe next time I will setup an access control list
Would appreciate if you show the same process with react! Excellent work with angular though.. very clear and concise. Would be better if you could link through the documentation of various packages and libraries you have used. Thanks!
Thanks for the feedback. They are linked in the main lesson page, it's time consuming to duplicate everything on YT.
Another useful solution to use with Firebase Auth is a BehaviorSubject. That way you can access to your current user info by dot notation and not subscribing.
Great structure. Thank you! Saved me a lot of time.
Flutter would be really good to start with!!
How would you approach unique usernames? Maybe a video on this next?
Added that to the revisions list +1
Nice video, seeing the same with flutter would be great
Awesome, I like how Jeff has to wrap things up because baba aka "Boss Baby" in the background is hungry..Lol. I think baba is calling out Daddy to console.log(' pls put my crying emoji in the first video') for fireship.io. Great first video for fireship.io and 2019. Awesome job.
Haha! You have no idea how many clips I have to re-record due to crying babies. If you listen closely you should hear one in every video.
please re do the video of PWA
That could be cool, I use workbox to make Fireship.io a PWA. It's actually very easy.
@@Fireship Another interesting topic is Persistent authentication for ssr websites via service worker instead of cookies, you can find it in the docs of firebase
@@Fireship is workbox better than angular/pwa?
So that's how our fireship.io works .. already signed in to stay up to date and I'm going to do the same with my own website
Exactly what I wanted for my blog ! This video is lit 🔥👌❤️
Thanks! That's why I updated the original - it's a super important topic.
Thank you so much waiting for more super cool videos 😎🤘
Awesome Video. I see that Jeff created entries for the user's display name and photo URL although this is something that can be handled by the authentication service, does anyone have experience in seeing that having that information in the Firestore being more useful than letting the auth service handle it?
Edit:
After 10 seconds of playing around with it, I saw that the benefit is that you can query this information from other users as well. If you were to only use Firebase auth, only the signed in user could view their display name, you need it in firestore to let other users query that information also. Awesome stuff as always :)
Best video about Firebase + Angular.Like
thanks Jeff, what about sign in with email/password..
There's a method called signInWithEmailAndPassword which you can use if you just pass the email and password in as parameters. You'll need to get the email and password from a form or some other means naturally, but other than that it's straightforward enough.
Great content, thanks, Jeff!
Create one with vue please
My authState change triggers like 6 times everytime i navigate to a new route. Anyone else having this problem? Havn't found any solutions online yet.
Love your work! 1 vote for Flutter
Great tutorial with your web site! Thanks.
Please make more videos on basics
.
I'll like too see the Flutter implementation
Awesome! A good chapter to revisit might be the file upload and add some tips how to deal with EXIF orientation
Great Lesson!
How can this be done with react. Please make video. I cant figure out how to send user to firestore in react. I only can do login and that is it
Amazing explanation, thanks a lot.
Whether we can do firebase Google authentication in angular electron build (specifically when it run in local host)
I like this video as it covers an important Firebase and Angular concept in authentication. But if I have a node server as my backend, how can this come along in the equation? Shall I set the same authentication in node and direct the traffic from Angular to node? How can the session maintained and passed between frontend Angular and backend Node?
Thanks for the great tutorial.
It through a permission error after applying the database rules, it were fixed after adding, read permission to allow users rule, but I'm not sure if this is secure or not.
would love to see this same tutorial with flutter
that was really helpful jeff, but how could I do it with roles like admin for example?
Great as always, updates on SendGrid and Stripe, will be very much appreciated..:-)
everytime a user logs in it calls the 'set' method to Firestone. doesn't that end up charging us even though nothing is being changed for returning users?
Good question. One way to stop this is to check if the user is new or not which is .additionalUserInfo.isNewUser. If isNewUser is true only then call updateUser().
Would this be difference if you were using a state library like ngrx? Or would authentication be outside of its scope
Pleaaase make a react version of the video .. thank you
Can I use the email login with ionic instead of only angular with the google signin? Also, I dont get how to utilize the http requests to set up backend, it would be awesome to have an crud/auth with cloud functions.
match /{document=**} {
allow read, write : if false;
}
match /users/{userId} {
allow read, write : if request.auth.uid == userId;
}
Add read also if the userId matches
Awesome video... thanks a lot.
How do I allow only few specific people? Please help. Thanks! I was troubled by the tilde key but now this is my only problem left. I want to authorize few more people
When flutter course is coming to fireship????? Please
I don't have a timeline for a full course, but you can expect the first flutter video sometime this month :)
This is not going to be full course???
@@hiteshchoudhary3412 It depends on what you mean by full course... On Fireship, a full course is ~20 videos, but I also create standalone episodes like this one here.
@@Fireship ok
Thank you, this will be for all platforms ? like : android and iOS....
We will have an Angular Universal + Firebase Cloud Functions video?
Yes, that is a topic on the list.
@@Fireship 😍😍😍😍
why are we making the user$ observable equal to afAuth.authState instead of afAuth.user , what is the difference? thanks in advance
Does anyone have the code for this project with the latest version of Angular on their GH? My program will compile with no errors, however when I open up local host, nothing is generated.
Thanks for the tutorials,i would like to ask you a question.Lets say a user register in my app when he is offline ,how can i store the data locally and when he is offline sync them to firebase.The logicis quite simple but making it work is what concerns me.Thanks in advanced.
Is this tutorial in complete or from where that login with google button came from under BASE
Thanks I hoping you would make this video! Can you make a similar video that explains how to do this in a NativeScript/Angular app?
Stripes connect, real-time maps ionic, flutter and also native script :D
Maybe some unit testing in Angular for services using @angular/firebase? This seems to get tricky with some observables and Firebase specific things.
Unfortunately does not work with Safari browsers -they block popups and firebase returns: firebase: Error (auth/popup-blocked)
Please make the flutter version of firebase auth stream listening. Very expecting. Thank you.
at the end of the video there was a reference to request.auth.uid, im just wondering how did that pass?
I don't understand the rules. How do they know I am referring to the User ID from my app? I don't understand how it checks if I am on the right account.
What font is that on your vscode?
Chatgpt did it for me in 60 seconds
Damn, Firebase looks so slick. Would love to see how to do this with React. Great video! 👍
What if I'd like to save users to the realtime database instead?
I'd love to see more use of RxFire in react and others
That would be cool. I contribute to RxFire and know the library very well. Vue has VueFire, but RxFire would probably be the best bet for react if starting today.
Do this with Vue! FireVue all the things!
broken with new angular :(
ObjectUnsubscribedErrorImpl {message: "object unsubscribed", name: "ObjectUnsubscribedError"} -- When I log in and logout, then log in again, this error pops up in the console, how to fix that? Is it dangerous?
How do I use async variables in typescript?
constructor(public auth: AuthService) {
console.log(auth.user)
}
returns something else
You need to subscribe to the observable, then provide a callback, like this: auth.user.subscribe(console.log)
Please upload Flutter related videos :)
That bird will be landing soon.
@@Fireship yes.
I had a typo in the template html saying this.users$ instead of this.user$ and it took me so long to figure out why nothing was happening when i logged in :(
Having problems with auth?
use this:
import app from 'firebase'
import 'firebase/auth' and
new app.auth.GoogleAuthProvider()
Lol yeah I had this problem. The solution was to add a "/compat" to my import statements. E.g.
import firebase from 'firebase/compat/app';
Do one with Vue.
this way of checking the user$ will trigger the observable every time anybody subscribes to it. Lets assume I have a route with some data fetching to do after checking the route guard. At this time, problem is each time guard run, the whole observable is running again. it might cause a slight delay for the routed components to kick start. (checks auth guard then switchmap etc)
What I have is a behavior subject which holds the current state (default 'null'). Each component or router guard checks that value. So there is no reinitialize or re running of the observable. Emit a new value only if auth state changed. This way there will not many subscription to the user$ observable.
This implementation executes constant requests to firebase. is there any wait to avoid this?
You could also add NgRx for state management and it would handle this for you by storing up the info you're requesting from Firebase
can you do it whit js please?
should the user.model.ts be user.interface.ts?
It's up to you. I prefer model, but it doesn't matter.
it IS up to you, but that's not the convention. The Interface is your model type, as you could just as easily use a Class to define your model, but they would both still be models (ie, the shape of your data object).
Thank you
Thanks for watching
React video would be awesome
Flutter would be helpful.
Other than me who hears screaming in the backgound @ 2:14 ?🤔
Has anyone figured out how to make this work for the Facebook provider. I tried following the same model as the google provider setup but it's not working. Ideas? Also anyone got good resources for understanding the angularfire library? The docs aren't very clear...
async facebookSignin() {
const provider = new auth.FacebookAuthProvider();
const credential = await this.afAuth.auth.signInWithPopup(provider);
return this.updateUserData(credential.user);
}
Just Jeff..... 🎩
Thank You.. !
use case of web application and its architect on firebase, complexity level - Medium
I think these rules aren't correct. I did the same thing and I get an error!