Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

What is the Angular/Fire best practice for using Auth? #3224

Unanswered
ronaldohoch asked this question in Q&A
Discussion options

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.

image

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?

You must be logged in to vote

Replies: 1 comment

Comment options

I cant even login using this implementation I got TypeError: n.auth is not a function

You must be logged in to vote
0 replies
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Category
Q&A
Labels
None yet

AltStyle によって変換されたページ (->オリジナル) /