Firebase APIs outside of an Injection context

Open
  • Is something wrong?
#3,607 22 comments 18 reactions 0 assignees View on GitHub

Maintainers usually reply within 3 days

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
25/100
Issue type
Bug
Clarity
Needs clarification
Activity status
Quiet
Tech stack
angular, firebase, typescript
Domain
authentication, database

Research direction

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.

Description

comp: zones type: bug version: current (v17+)

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

}

Dominant language
TypeScript
Stars
7.8k
Forks
2.1k
Avg merge
2d 22h
Merged PRs (30d)
25

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from angular/angularfire

All issues in angular/angularfire

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.