1

I am trying to create new user when i signup but i get this error

Error adding user to firestore RuntimeError: NG0203: inject() must be called from an injection context such as a constructor, a factory function, a field initializer, or a function used with runInInjectionContext. Find more at https://angular.dev/errors/NG0203\ at signup.component.ts:28:15

when I look to firebase the email is registered but it doesn't create users collection here you can find my code: signup component.ts

import { Component } from '@angular/core'; import { AuthService } from '../services/auth'; import { AngularFireAuthModule } from '@angular/fire/compat/auth'; import { FormsModule } from '@angular/forms'; import { CommonModule } from '@angular/common'; import { RouterModule } from '@angular/router'; import { AngularFirestore } from '@angular/fire/compat/firestore'; @Component({ selector: 'app-signup', standalone: true, imports: [ CommonModule, FormsModule, AngularFireAuthModule, RouterModule, ], templateUrl: './signup.component.html', styleUrls: ['./signup.component.css'] }) export class SignupComponent { constructor(private sa: AuthService, private fs: AngularFirestore) {} signup(f: any) { let data = f.value; this.sa.signUp(data.email, data.password).then((user) => { this.fs.collection("users").doc(user.user?.uid).set({ email: data.email, name: data.name, bio: data.bio, uid: user.user?.uid }).then(() => { console.log("User added to firestore"); }); }).catch((error) => { console.log("Error adding user to firestore", error); }); } }

signup component.html

<div class="uk-section uk-section-muted uk-flex uk-flex-middle uk-animation-fade" uk-height-viewport> <div class="uk-width-1-1"> <div class="uk-container"> <div class="uk-grid-margin uk-grid uk-grid-stack" uk-grid> <div class="uk-width-1-1@m"> <div class="uk-margin uk-width-large uk-margin-auto uk-card uk-card-default uk-card-body uk-box-shadow-large"> <h3 class="uk-card-title uk-text-center">Create an Account</h3> <form (ngSubmit)="signup(f)" #f="ngForm"> <div class="uk-margin"> <div class="uk-inline uk-width-1-1"> <span class="uk-form-icon" uk-icon="icon: user"></span> <input class="uk-input uk-form-large" type="text" id="name" ngModel #name="ngModel" name="name" placeholder="Name" required> </div> <!-- Error message for Name --> <div *ngIf="name.invalid && name.touched" class="uk-text-danger"> Name is required. </div> <div class="uk-form-icon uk-form-icon-flip" *ngIf="name.invalid && name.touched"> <span uk-icon="icon: warning"></span> </div> </div> <div class="uk-margin"> <div class="uk-inline uk-width-1-1"> <span class="uk-form-icon" uk-icon="icon: mail"></span> <input class="uk-input uk-form-large" type="email" id="email" ngModel #email="ngModel" name="email" placeholder="Email" required email> </div> <div *ngIf="email.errors?.['required'] && email.touched" class="uk-text-danger"> Email is required. </div> <div *ngIf="email.errors?.['email'] && email.touched" class="uk-text-danger"> Insert Valid Email. </div> </div> <div class="uk-margin"> <div class="uk-inline uk-width-1-1"> <span class="uk-form-icon" uk-icon="icon: lock"></span> <input class="uk-input uk-form-large" type="password" id="password" ngModel #password="ngModel" name="password" placeholder="Password" required minlength="6" maxlength="8"> </div> <div *ngIf="password.errors?.['required'] && password.touched" class="uk-text-danger"> Password is required. </div> <div *ngIf="password.errors?.['minlength'] && password.touched" class="uk-text-danger"> Password must be at least 6 characters long. </div> <div *ngIf="password.errors?.['maxlength'] && password.touched" class="uk-text-danger"> Password cannot be more than 8 characters long. </div> </div> <div class="uk-margin"> <div class="uk-inline uk-width-1-1"> <textarea class="uk-textarea uk-form-large" id="bio" ngModel #bio="ngModel" name="bio" placeholder="Bio" rows="3"></textarea> </div> </div> <div class="uk-margin"> <button class="uk-button uk-button-primary uk-button-large uk-width-1-1" type="submit" [disabled]="f.invalid">Sign Up</button> </div> <div class="uk-text-small uk-text-center"> Already have an account? <a [routerLink]="['/signin']">Sign In</a> </div> </form> </div> </div> </div> </div> </div> </div>

auth.ts

import { Injectable } from '@angular/core'; import { AngularFireAuth } from '@angular/fire/compat/auth'; import { Observable } from 'rxjs'; import firebase from 'firebase/compat/app'; @Injectable({ providedIn: 'root' }) export class AuthService { user: Observable<firebase.User | null>; constructor(private fa: AngularFireAuth) { this.user = this.fa.user; } signUp(email: string, password: string) { return this.fa.createUserWithEmailAndPassword(email, password); } signIn(email: string, password: string) { return this.fa.signInWithEmailAndPassword(email, password); } }

i have been trying and changed a lot but it doesn't works. sorry my English not so good and i am new learning angular

Improve this question

1 Answer 1

Reset to default
1

Checkout this example from Angular/fire github page

Readme.md

import { Firestore, collectionData, collection } from '@angular/fire/firestore'; ... ... export class AppComponent { firestore = inject(Firestore); itemCollection = collection(this.firestore, 'items'); item$ = collectionData<Item>(itemCollection); }

You also might need to provide firebase like below, also not the same steps need to be done for authentication:

auth.md

import { provideFirebaseApp, initializeApp } from '@angular/fire/app'; import { getFirestore, provideFirestore } from '@angular/fire/firestore'; import { provideAuth, getAuth } from '@angular/fire/auth'; export const appConfig: ApplicationConfig = { providers: [ provideFirebaseApp(() => initializeApp({ ... })), provideFirestore(() => getFirestore()), provideAuth(() => getAuth()), ... ], ... })

So you code can be modified to:

... export class SignupComponent { firestore = inject(Firestore); constructor(private sa: AuthService) {} signup(f: any) { let data = f.value; this.sa.signUp(data.email, data.password).then((user) => { collection(this.firestore, "users").doc(user.user?.uid).set({ email: data.email, name: data.name, bio: data.bio, uid: user.user?.uid }).then(() => { console.log("User added to firestore"); }); }).catch((error) => { console.log("Error adding user to firestore", error); }); } }

You have to update your auth function to use the below logic:

import { Injectable } from '@angular/core'; import { AngularFireAuth } from '@angular/fire/compat/auth'; import { Observable } from 'rxjs'; import firebase from 'firebase/compat/app'; @Injectable({ providedIn: 'root' }) export class AuthService { user$: Observable<firebase.User | null> = user(auth); fa = inject(Auth); signUp(email: string, password: string) { return this.fa.createUserWithEmailAndPassword(email, password); } signIn(email: string, password: string) { return this.fa.signInWithEmailAndPassword(email, password); } }
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

thank you so much for your answer but do you mean i need to modify the app,config.ts
@isabille If it is necessary, you might need to if you use latest version of angular fire
yes i use the latest version and i updated the code but still not working and i can see the email registered but no collection created.
@isabille updated my answer with an estimate of the changes try this

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.