Firebase Google SignIn + Firestore w/ Angular
Why Stack Overflow recommends it
Stack Overflow users link it when answering Angular and AngularFire questions about Google login, saving user profile data to Firestore and the AngularFire import syntax.
Recommended by 4 people across 4 different months, 2020 to 2021.
What it is
A Fireship tutorial on building user authentication in Angular with Firebase Google SignIn through AngularFire, then storing custom user data in Firestore. It walks through an auth service, an observable user stream and a template that reacts to login state, with source code in a linked lesson.
What people said
Recommends Thierry Falvo · 2020-02 · Stack Overflow · on “AngularFire auth, template not updated when Observable<User> changes”
You're right! but you can see in video [this video] at 6:58 that code is not the same than code snippet in his tutorial below the video. One `div` with only one `ng-template` only for login. (without a new `async` nested). In this case, you can avoid using `shareReplay` operator. And yes, your code was working but with dependencies mentioned by Jeff just below the video (healthy dependencies). Maybe a good question to be posted on his tutorial ?
Recommends brijmcq · 2020-05 · Stack Overflow · on “UpdateProfile() during singup Firebase”
My answer is way too late but just in case someone is interested, you could do it like this constructor( private afAuth: AngularFireAuth, private router: Router ) { // } async signupUser(email: string, password: string): Promise<any> { const data = await this.afAuth.createUserWithEmailAndPassword( email, password ); return this.updateUserData(data.user).then(() => { this.router.navigate(["/"]); }); } private updateUserData({ uid, email, photoURL, displayName }: User) { const userRef: AngularFirestoreDocument<User> = this.afs.doc( `users/${uid}` ); return userRef.set({ uid, email, photoURL, displayName }, { merge: true }); } You can learn more here [this video]
Recommends nclarx · 2021-01 · Stack Overflow · on “How do you query and display the authenticated user's order from the Firebase Realtime Database using AngularFire in an Angular app?”
For context, the complete files for this answer can be found here: [LINK] To Query the User's Orders To query the user's data you need to use a function similar to the following: getCurrentOrder(): Observable<Order[] | never> { return this.afAuth.authState // authState is an observable .pipe( // use pipe switchMap((user) => { // switchMap gets authState and then lets you return a different observable // The following returns an observable call to the real-time database: return user ? this.afDatabase.list<Order>(`delivery-orders/${user.uid}`).valueChanges() // if the user is authenticated an observable with the Orders is returned : EMPTY; // if the user is not authenticated an empty observabl
Recommends eko · 2021-05 · Stack Overflow · on “Property 'auth' does not exist on type 'typeof import("/home/kartik/Desktop/Ecommerce/ecommerce/node_modules/firebase/index")'. ts(2339)”
Your dependencies are the old ones. I suggest you to update them and use the new syntax: import { AngularFireAuth } from '@angular/fire/auth'; import { AngularFirestore } from '@angular/fire/firestore'; import { AngularFireDatabaseModule } from '@angular/fire/database'; import * as firebase from 'firebase/app'; with firebase@7.24.0 There complete tutorial about firebase authentication which I find really useful; here's the link [this video] The old imports are import { AngularFireAuthModule } from 'angularfire2/auth';
Recommends eko · 2021-05 · Stack Overflow · on “Property 'auth' does not exist on type 'typeof import("/home/kartik/Desktop/Ecommerce/ecommerce/node_modules/firebase/index")'. ts(2339)”
The new syntax is `import { AngularFireAuth } from '@angular/fire/auth';`, `import { AngularFirestore } from '@angular/fire/firestore';`, `import * as firebase from 'firebase/app';`. I found this video helpful, check it out: [this video]
Cites Sukhpreet · 2021-07 · Stack Overflow · on “Firestore rules work in simulator but failed when reading documents from angular app”
All rules are working fine in simulator but not through app. I have been following youtube channel Fireship's video on google signin with custom data angluar here [this video] . rules_version = '2'; service cloud.firestore { match /databases/{database}/documents { match /users/{userId} { allow read, write: if request.auth.uid == userId; } } } My authservice @Injectable({ providedIn: 'root' }) export class AuthService { user$: Observable<User>; constructor( private ngAuth: AngularFireAuth, private firestore: AngularFirestore, ) { this.user$ = this.ngAuth.authState.pipe( switchMap(user => user ? this.userRef(user).valueChanges() : of(null)), ); } private userRef({ uid }): AngularFirestoreDocument {