Description
I keep getting error about,
Calling Firebase APIs outside of an Injection context may destabilize your application leading to subtle change-detection and hydration bugs.
I did properly set up the angular firebase integration although signIn, logIn working properly, but this error won't resolve and it makes the authentication delay at each reload.
Appconfig.ts -
const firebaseConfig = {
apiKey: "",
authDomain: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: ""
}
export const appConfig: ApplicationConfig = {
providers:
[
provideZoneChangeDetection({ eventCoalescing: true }),
provideRouter(routes),
provideHttpClient(),
provideFirebaseApp(() => initializeApp(firebaseConfig)),
provideAuth(() => getAuth()),
provideFirestore(() => getFirestore())
]
};
Service:
auth: Auth = inject(Auth)
fireStore: Firestore = inject(Firestore)
ngZone = inject(NgZone)
userSubject: BehaviorSubject = new BehaviorSubject(null)
private authSubscription;
constructor() {
this.authSubscription = this.auth.onAuthStateChanged(user => {
this.userSubject.next(user)
})
}
signUp(fullName: string, email: string, password: string, username: string, phone: string = '', address: string = '', pincode: string): Observable {
return this.ngZone.run(() => {
const promise = createUserWithEmailAndPassword(this.auth, email, password)
.then(response => {
const userCredentials = response.user;
if (userCredentials) {
return sendEmailVerification(userCredentials)
.then(() => {
// Update profile with username
return updateProfile(userCredentials, { displayName: username })
.then(() => {
// Save user details in Firestore
return this.saveUserDetails(response.user.uid, fullName, address, phone, pincode);
})
.catch(error => {
console.error("Error updating profile:", error);
throw new Error('Profile update failed');
});
})
.catch(error => {
console.error("Error sending email verification:", error);
throw new Error('Email verification failed');
});
} else {
throw new Error('User credentials not found');
}
})
.catch(error => {
console.error("Error during signup:", error);
throw error; // Propagate the error
});
return from(promise).pipe(
map(() => { }),
catchError(error => {
console.error("Error in signup:", error);
return throwError(() => new Error(error.message)); // Return an error observable
})
);
})
}
saveUserDetails(uid: string, fullName: string, address: string, phone: string, pincode: string): Promise {
const userRef = doc(this.fireStore, 'users', uid)
return setDoc(userRef, {
fullName: fullName,
address: address,
phone: phone,
pincode: pincode
}).then(() => {
console.log("User details saved in Firestore.");
}).catch((error) => {
console.error("Error saving user details in Firestore:", error);
throw error; // rethrow to propagate error in the stream
});
}
Component:
onSubmit() {
const rawForm = this.signUpForm.getRawValue();
this.loader.showLoader()
this.authService.signUp(rawForm.name,rawForm.email, rawForm.password, rawForm.username, rawForm.phone, rawForm.address, rawForm.pincode).subscribe((next) => {
this.router.navigateByUrl('/email-ver')
this.loader.hideLoader()
}, err => {
console.log('Some error occurred during signup', err);
this.loader.hideLoader()
})
}