How to include extra data in Angular Firebase user creation using the createUserWithEmailAndPassword

Question

How to include extra data in Angular Firebase user creation using the createUserWithEmailAndPassword

Currently, I am working on implementing the Firebase createUserWithEmailAndPassword method. However, I would like to include an additional field named 'name' in Cloud Firestore. Below is a snippet of my code:

auth.service.ts

SignUp(email: string, password: string) {
    return this.afAuth.createUserWithEmailAndPassword(email, password)
        .then((result) => {
            /* Call the SendVerificationMail() function when new user sign
            up and returns promise */
            // this.SendVerificationMail();
            this.SetUserData(result.user);
        }).catch((error) => {
            window.alert(error.message)
        })
}

signup.component.html

<div class="formGroup">
    <input type="email" class="formControl" placeholder="Email Address" id="userEmail" required>
</div>

<div class="formGroup">
    <input type="password" class="formControl" placeholder="Password" id="userPwd" required>
</div>

<div class="formGroup">
    <input type="button" class="btn btnPrimary" value="Sign Up"
        (click)="authService.SignUp(userEmail.value, userPwd.value)">
</div>

Does anyone have suggestions on how I can achieve this?

angular typescript google-cloud-firestore firebase-authentication

Answer 1

Answer №1

In my experience, I created a sample case that demonstrates how to use the Auth service to subscribe with Firebase Auth and create a new User in Rtdb (you can use Firestore in your case):

 // ...
signUp({ email, pass, username }: { email: string; pass: string; username?: string; } = { email: '', pass: '', username: '' }) {
    if (!email.trim().length || !pass.trim().length || !username.trim().length) return throwError(`Email / Password / Username should not be empty..!  `);

    return from(this.fAuth.auth.createUserWithEmailAndPassword(email, pass)).pipe(
      concatMap((fbUserCreds: auth.UserCredential) => {
        let { uid, email, ...rest } = fbUserCreds.user;
        return this.userSvc.upsertDbUser({ id: uid, name: username, email }).pipe(
          concatMap(_user => {
            return this.setDbUserLoggedinStatus({ uid, status: true }).pipe(
              mapTo({ id: uid, email } as Partial<IUser>)
            );
          })
        );
      }),
      tap((user) => this.userSvc.setCurrentId(user.id)),
      catchError((err: auth.AuthError) => {
        console.error(`[FbSvc->signInUser()]::::::::   ${JSON.stringify(err.message)}`);
        return throwError(err);
      })
    );
  }

https://github.com/VovanSuper/IonicChat-firebase-functions-dummy/blob/master/src/app/shared/providers/auth.service.ts#L48

Answer 2

In my experience, I created a sample case that demonstrates how to use the Auth service to subscribe with Firebase Auth and create a new User in Rtdb (you can use Firestore in your case):

 // ...
signUp({ email, pass, username }: { email: string; pass: string; username?: string; } = { email: '', pass: '', username: '' }) {
    if (!email.trim().length || !pass.trim().length || !username.trim().length) return throwError(`Email / Password / Username should not be empty..!  `);

    return from(this.fAuth.auth.createUserWithEmailAndPassword(email, pass)).pipe(
      concatMap((fbUserCreds: auth.UserCredential) => {
        let { uid, email, ...rest } = fbUserCreds.user;
        return this.userSvc.upsertDbUser({ id: uid, name: username, email }).pipe(
          concatMap(_user => {
            return this.setDbUserLoggedinStatus({ uid, status: true }).pipe(
              mapTo({ id: uid, email } as Partial<IUser>)
            );
          })
        );
      }),
      tap((user) => this.userSvc.setCurrentId(user.id)),
      catchError((err: auth.AuthError) => {
        console.error(`[FbSvc->signInUser()]::::::::   ${JSON.stringify(err.message)}`);
        return throwError(err);
      })
    );
  }

https://github.com/VovanSuper/IonicChat-firebase-functions-dummy/blob/master/src/app/shared/providers/auth.service.ts#L48

How to include extra data in Angular Firebase user creation using the createUserWithEmailAndPassword

Answer №1

Similar questions

The proper method for specifying contextType in NexusJS when integrating with NextJS

What is the best method for compressing and decompressing JSON data using PHP?

Converting a string to a number is not functioning as expected

Angular @Input set function not being activated during unit testing

The element class type 'xxx' is lacking several properties compared to the 'ElementClass' type, including context, setState, forceUpdate, props, and others. This issue is flagged with error code TS2605

Leverage Ramda's clone function within a pipeline in a manner that ensures type safety

Adjusting the ng-bootstrap carousel to fit within a div inside an ng-bootstrap modal

The array used within the useEffect hook and the getCoordinates function appears to be distinct when printed with console

The RxJs Observer connected to a websocket only triggers for a single subscriber

Choose all the checkboxes that use Knockout JS

Confusing unit testing leads to errors when using Jest

Automated Import Feature in Visual Studio Code

Steps for logging in using Spring Boot and Angular 2

Are Angular 4 auth guards implemented on the server side or the client side? And if they are on the client side, are they vulnerable to

Exploring the potential of Raygun.io with Angular Universal

Specialized spinning tool not in sight

Guide to Conditionally Importing a Module in Angular

Bird's home - The nest is unable to sort out its dependencies

Is there a user-friendly interface in Typescript for basic dictionaries?

How to store an imported JSON file in a variable using TypeScript