Angular 12 with Firebase 9

Angular 12 with Firebase 9

6 min read

## Quick Reference Angular's Docs have not been updated fully yet, so I made a quick reference. **app.module.ts** - Imports ```typescript import { provideFirebaseApp, initializeApp } from '@angular/fire/app'; import { getAuth, provideAuth } from '@angular/fire/auth'; import { getFirestore, provideFirestore } from '@angular/fire/firestore'; import { getStorage, provideStorage } from '@angular/fire/storage'; import { getAnalytics, provideAnalytics } from '@angular/fire/analytics'; provideFirebaseApp(() => initializeApp(environment.firebase)), provideFirestore(() => getFirestore()), provideAuth(() => getAuth()), provideStorage(() => getStorage()), provideAnalytics(() => getAnalytics()), ``` **import** ```typescript import { collection, doc, docData, DocumentReference, CollectionReference, Firestore, onSnapshot, query, where, Unsubscribe, Query, DocumentData, collectionData, collectionChanges, docSnapshots, ... } from '@angular/fire/firestore'; ``` **constructor** ```typescript constructor( private afs: Firestore ) { } ``` ## Documents **valueChanges()** ```typescript docData( doc(this.afs, 'posts', id) ); ``` **snapShotChanges()** ```typescript docSnapshots( doc(this.afs, `posts/${id}`) ); ``` ## Collections **valueChanges()** ```typescript collectionData( query( collection(this.afs, 'posts') as CollectionReference, where('published', '==', true) ), { idField: 'id' } ); ``` **snapShotChanges()** ```typescript collectionChanges( query( collection(this.afs, 'posts') as CollectionReference, where('published', '==', true) ) ); ``` **createId()** ```typescript doc(collection(this.afs, 'id')).id; ``` ## Auth **imports** ```typescript import { Auth, signOut, signInWithPopup, user, signInWithEmailAndPassword, createUserWithEmailAndPassword, updateProfile, sendEmailVerification, sendPasswordResetEmail, getAdditionalUserInfo, OAuthProvider, linkWithPopup, unlink, updateEmail, updatePassword, User, reauthenticateWithPopup, authState, onAuthStateChanged ... } from '@angular/fire/auth'; ``` ### Code ```typescript user$: Observable; constructor(private auth: Auth) { // user observable, not user doc this.user$ = user(auth); // or use this version... this.user$ = authState(auth); // or use this version... this.user$ = new Observable((observer: any) => onAuthStateChanged(auth, observer) ); // or pipe user doc, Profile interface // returns user doc, not User type // here this.user$: Observable; this.user$ = user(auth).pipe( switchMap((user: User | null) => user ? docData(doc(this.afs, 'users', user.uid)) as Observable : of(null) ) ); } async getUser(): Promise { return await this.user$.pipe(take(1)).toPromise(); } ... async emailLogin(email: string, password: string) : Promise { return await signInWithEmailAndPassword(this.auth, email, password); } async emailSignUp(email: string, password: string) : Promise { const credential = await createUserWithEmailAndPassword( this.auth, email, password ); await updateProfile( credential.user, { displayName: credential.user.displayName } ); await sendEmailVerification(credential.user); // create user in db ... } async resetPassword(email: string): Promise { // sends reset password email await sendPasswordResetEmail(this.auth, email); ... } async oAuthLogin(p: string): Promise { // get provider, sign in const provider = new OAuthProvider(p); const credential = await signInWithPopup(this.auth, provider); const additionalInfo = getAdditionalUserInfo(credential); // create user in db if (additionalInfo?.isNewUser) { ... } } ``` ## Storage **Import** ```typescript import { Storage, ref, deleteObject, uploadBytes, uploadString, uploadBytesResumable, percentage, getDownloadURL, ... } from '@angular/fire/storage'; ``` ### Code ```typescript uploadPercent: Observable; constructor(private storage: Storage) { } async upload( folder: string, name: string, file: File | null ): Promise { const ext = file!.name.split('.').pop(); const path = `${folder}/${name}.${ext}`; { if (file) { try { const storageRef = ref(this.storage, path); const task = uploadBytesResumable(storageRef, file); this.uploadPercent = percentage(task); await task; const url = await getDownloadURL(storageRef); } catch(e: any) { console.error(e); } } else { // handle invalid file } return url; } ``` I may update this with more items, but I wanted to be particular to Angular and not get into the general Firebase 9 updates. I didn't want to show every possible example, but you start to see the patterns. - For that see [Fireblog.io](https://fireship.io/lessons/firebase-v9-migration/). - Or Firebase 9 [Official Docs](https://firebase.google.com/docs/firestore/quickstart) - Here is also an official [angularfire sample project](https://github.com/angular/angularfire/tree/master/samples/modular) J
rxjs
faq
angular