Firebase Google SignIn + Firestore w/ Angular
Вставка
- Опубліковано 10 січ 2019
- Learn how to build a solid user authentication system in Angular with Firebase Google SignIn, then create custom data in Firestore. Source code and article 👉 fireship.io/lessons/angularfi...
Original Lesson: angularfirebase.com/lessons/g...
Firebase: firebase.google.com/
Angular: angular.io/
ngx-firebase-ui: www.npmjs.com/package/ngx-aut... - Наука та технологія
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 :) ...)
I really loved the part about firestore rules, I needed that kind of tip. Awesome video.
Thanks for this. Incredibly timely as I am implementing this exact thing over the weekend.
Excellent video. So clear and concise - thanks Jeff!
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.
Looking forward to more Angular and Firebase videos!
You got a great implementation Mate !!🔥🔥🔥
Great! Thank a lot for so useful and short tutorial. It has closed some my critical question about this topic
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.
Gracias,nde verdad. Recién estoy comenzando en web con angular y firestore, y este vídeo me ayudo bastante.
Would this be difference if you were using a state library like ngrx? Or would authentication be outside of its scope
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
Great structure. Thank you! Saved me a lot of time.
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.
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.
at the end of the video there was a reference to request.auth.uid, im just wondering how did that pass?
that was really helpful jeff, but how could I do it with roles like admin for example?
Very nice summary, even 3 years later!
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?
Whether we can do firebase Google authentication in angular electron build (specifically when it run in local host)
Great content, thanks, Jeff!
why are we making the user$ observable equal to afAuth.authState instead of afAuth.user , what is the difference? thanks in advance
Is this tutorial in complete or from where that login with google button came from under BASE
Amazing tutorial!
Thank you, this will be for all platforms ? like : android and iOS....
I would love to see more about SEO and Angular
Awesome! A good chapter to revisit might be the file upload and add some tips how to deal with EXIF orientation
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
Amazing explanation, thanks a lot.
Love it! Angular
Great tutorial with your web site! Thanks.
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;
Nice video, seeing the same with flutter would be great
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
What if I'd like to save users to the realtime database instead?
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.
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.
Really excited for any flutter videos!
Unfortunately does not work with Safari browsers -they block popups and firebase returns: firebase: Error (auth/popup-blocked)
THANK YOU, you saved my day with this tutorial
hi is this tutorial still relevant today?
Great Lesson!
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.
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?
Really need the Vue and Flutter tutorials.
Great as always, updates on SendGrid and Stripe, will be very much appreciated..:-)
Flutter would be really good to start with!!
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?
What font is that on your vscode?
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 :)
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);
}
a similar video for Kotlin Jetpack Compose would be a great help
Awesome video... thanks a lot.
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?
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
Damn, Firebase looks so slick. Would love to see how to do this with React. Great video! 👍
Love your work! 1 vote for Flutter
Best video about Firebase + Angular.Like
Maybe some unit testing in Angular for services using @angular/firebase? This seems to get tricky with some observables and Firebase specific things.
Please make more videos on basics
.
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)
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 :(
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
I'll like too see the Flutter implementation
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 😎🤘
would love to see this same tutorial with flutter
A Flutter version would be awesome!
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.
can you do it whit js please?
Stripes connect, real-time maps ionic, flutter and also native script :D
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.
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.
Please make the flutter version of firebase auth stream listening. Very expecting. Thank you.
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.
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
How come you import auth from firebase/app - and it's working ?? .. It should be `import { auth } from 'firebase'` only ... :D
How would you approach unique usernames? Maybe a video on this next?
Added that to the revisions list +1
Thank You.. !
Looking forward to a React version! These videos are amazing, thanks 👍
Create one with vue please
Thanks JEff. I would like to see how you would do this in reactjs
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).
I think these rules aren't correct. I did the same thing and I get an error!
thanks
Thank you
Thanks for watching
Do this with Vue! FireVue all the things!
We will have an Angular Universal + Firebase Cloud Functions video?
Yes, that is a topic on the list.
@@Fireship 😍😍😍😍
Thanks for the awesome know about of how auths work, would be glad if you could re do it with React.js in the future ^_^
Has anyone got this to work using ionic ?
This will only work in Ionic for the web. Native platforms will need to use the google sign in cordova plugin.
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
hey man, we want to learn Flutter from you 😀
use case of web application and its architect on firebase, complexity level - Medium
broken with new angular :(
Do one with Vue.
Pleaaase make a react version of the video .. thank you
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
Flutter would be helpful.
React video would be awesome
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?