-
Notifications
You must be signed in to change notification settings - Fork 2.2k
What is the Angular/Fire best practice for using Auth? #3224
Unanswered
ronaldohoch
asked this question in
Q&A
-
Hi guys!
I'm developing a website and i decided to use firebase to learn. But the documentation of @angular/fire/auth seems not complete or out of date. So, i have 2 implementations of the same code.
Version 1
signupService.ts
import { Injectable } from '@angular/core'; //firebase import { Auth, createUserWithEmailAndPassword, signInWithEmailAndPassword, UserCredential } from '@angular/fire/auth'; import { AngularFireAuth } from '@angular/fire/compat/auth'; //rxjs import { Observable, from } from 'rxjs'; import { tap } from 'rxjs/operators'; //environment import { environment } from '../../../environments/environment'; @Injectable({ providedIn: 'root' }) export class SignupService { user = {} as any; // private $user: Observable<UserCredential>; constructor( private auth: Auth, private afAuth: AngularFireAuth, ) { this.afAuth.onAuthStateChanged(user=>{ this.user = user; if(user){ if(!user.emailVerified && environment.production){ user.sendEmailVerification(); } } }) } emailLogin(email: string, password: string): Observable<UserCredential> { return from(signInWithEmailAndPassword(this.auth, email, password)) } createUserWithEmail(email: string, password: string, name: string): Observable<UserCredential> { return from(createUserWithEmailAndPassword(this.auth, email, password)) .pipe(tap(login => { this.user.updateProfile({ displayName: name }); })); } signOut(){ this.auth.signOut(); } }
Version 2
import { Injectable } from '@angular/core'; //firebase import { AngularFireAuth } from '@angular/fire/compat/auth'; //rxjs import { Observable, from } from 'rxjs'; import { tap } from 'rxjs/operators'; //environment import { environment } from '../../../environments/environment'; @Injectable({ providedIn: 'root' }) export class SignupService { user = {} as any; constructor( private afAuth: AngularFireAuth, ) { this.afAuth.onAuthStateChanged(user=>{ this.user = user; if(user){ if(!user.emailVerified && environment.production){ user.sendEmailVerification(); } } }) } emailLogin(email: string, password: string): Observable<any> { return from(this.afAuth.signInWithEmailAndPassword(email, password)) } createUserWithEmail(email: string, password: string, name: string) { return from(this.afAuth.createUserWithEmailAndPassword(email, password)) .pipe(tap(login => { this.user.updateProfile({ displayName: name }); })); } signOut(){ this.afAuth.signOut().then(data=>console.log(data)); } }
Both versions are using AngularFireAuth because i couldn't send email using only Auth. 🤔
The Auth code to send email:
this.auth.onAuthStateChanged(user=>{ this.user = user; if(user){ user.sendEmailVerification(); } })
Brings this error.
I can use both versions, but i can't unsubscribe when transforming Promise into Observable:
image
So, what should i use and how to unsubscribe it?
Beta Was this translation helpful? Give feedback.
All reactions
Replies: 1 comment
-
I cant even login using this implementation I got TypeError: n.auth is not a function
Beta Was this translation helpful? Give feedback.
All reactions
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment