Firebase APIs outside of an Injection context

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()
})
}

Start with the Firebase providers in Appconfig.ts, then inspect the Auth subscription and Firebase calls in the Service and the signup flow in the Component. Reproduce the reload and signup behavior while checking when the injection-context warning appears. Done means the warning and authentication delay are resolved without breaking signup or Firestore writes.

Written by the indexing model from the issue text.