The Add Extra Details on the firebase users table So log in and registration functionality is easy to implement in firebase because there is already some login function provide by the firebase package. But let say if you want to manage the multiples fields for the user then how will you manage? like Firstname, Lastname, Address, etc…
The Add Extra Details on the firebase users table.
If you wondering to find the solution to implementing multiple fields in the users’ table with firebase then you are in the right place, and we will discuss all things about that in the current blog.
In the firebase createUserWithEmailAndPassword() this function is used to signup the form where access the email and password field and create a user in firebase.
First, need to import the module as given below.
import { AngularFireAuth } from "@angular/fire/auth";
constructor(private firebaseAuth: AngularFireAuth) {}
In the above code, you can see the private firebase auth so with firebase auth we can use the all function of AngularFireAuth in the current component.
Now let’s create the registration function in service.ts so this service file will use in the angular component where get the information from the form submit and pass the value in the function.
registration(data:any,password: any) { return this.firebaseAuth.auth.createUserWithEmailAndPassword(data.Email, password) .then(res => { data.UserId = res.user.uid; data.PhoneNumbers = [{ NumberType: '', NumberValue: '' }]; data.PhotoUrl = ''; data.Addresses = [{ AddressLine1: '', AddressLine2: '', City: '', State: '', Country: '', PostalCode: '', AddressType: '' }]; data.IsDeleted = false; this.fireStore.doc(`users/${res.user.uid}`).set(data); this.toastr.success('User has been register successfully!', 'Successfull!'); return true; }).catch(err => { switch (err.code) { case 'auth/email-already-in-use': this.toastr.error(`Email address ${data.Email} already in use.`, 'Error!'); break; case 'auth/invalid-email': this.toastr.error(`Email address ${data.Email} is invalid.`, 'Error!'); break; case 'auth/operation-not-allowed': this.toastr.error('Error during sign up.', 'Error!'); break; case 'auth/weak-password': this.toastr.error('Password is not strong enough. Add additional characters including special characters and numbers.', 'Error!'); break; default: this.toastr.error(err.message, 'Error!'); break; } }); }
import { Component, OnInit } from '@angular/core'; import { AuthService } from '../../../Services/auth.service'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { MustMatch } from '../../../helpers/must-match.validator'; import { NgbModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap'; import 'firebase/firestore'; import { AngularFirestore, AngularFirestoreDocument } from '@angular/fire/firestore'; import { AngularFireAuth } from '@angular/fire/auth'; import { ToastrService } from 'ngx-toastr'; @Component({ selector: 'app-registration', templateUrl: './registration.component.html', styleUrls: ['./registration.component.scss'] }) export class RegistrationComponent implements OnInit { registerForm: FormGroup; submitted = false; inputClicked = ''; closeResult = ''; firstname = ''; lastname = ''; DisplayName = ''; constructor(public authService: AuthService, private toastr: ToastrService, private formBuilder: FormBuilder, private modalService: NgbModal, private fireStore: AngularFirestore, private firebaseAuth: AngularFireAuth,) { } Userdata: any; ngOnInit(): void { this.registerForm = this.formBuilder.group({ firstname: ['ez-shopper', Validators.required], lastname: ['shopper', Validators.required], DisplayName: ['ez-shopper shopper', Validators.required], Email: ['ez-shopper@gmail.com', [Validators.required, Validators.email]], password: ['', [Validators.required, Validators.minLength(6)]], confirmPassword: ['', Validators.required] }, { validator: MustMatch('password', 'confirmPassword') }); } // convenience getter for easy access to form fields get f() { return this.registerForm.controls; } //on registration form submit async onSubmit() { this.submitted = true; // stop here if form is invalid if (this.registerForm.invalid) { return; } let response = await this.authService.registration(this.registerForm.value, this.registerForm.value.password); } }
HTML code for UI
<form class="registration_form" [formGroup]="registerForm" (ngSubmit)="onSubmit()"> <!-- firstname --> <span class="form-group input-field ui-float-label"> <input type="text" id="firstname" formControlName="firstname" [(ngModel)]="firstname" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.firstname.errors }" pInputText (keypress)="patchDisplayName()"> <label for="ffirstname">Firstname </label> <div *ngIf="submitted && f.firstname.errors" class="invalid-feedback"> <div *ngIf="f.firstname.errors.required">firstname is required</div> </div> </span> <!-- lastname --> <span class="form-group input-field ui-float-label"> <input type="text" ng-model="input" id="lastname" [(ngModel)]="lastname" formControlName="lastname" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.lastname.errors }" pInputText (keypress)="patchDisplayName()"> <label for="lastname">Lastname</label> <div *ngIf="submitted && f.lastname.errors" class="invalid-feedback"> <div *ngIf="f.lastname.errors.required">lastname is required</div> </div> </span> <!-- DisplayName --> <span class="form-group input-field ui-float-label"> <input type="text" id="DisplayName" formControlName="DisplayName" [(ngModel)]="DisplayName" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.DisplayName.errors }" pInputText> <label for="DisplayName">Display Name</label> <div *ngIf="submitted && f.DisplayName.errors" class="invalid-feedback"> <div *ngIf="f.DisplayName.errors.required">DisplayName is required</div> </div> </span> <!-- Email --> <span class="form-group input-field ui-float-label"> <input type="Email" id="Email" formControlName="Email" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.Email.errors }" pInputText /> <label for="Email">Email</label> <div *ngIf="submitted && f.Email.errors" class="invalid-feedback"> <div *ngIf="f.Email.errors.required">Email is required</div> </div> </span> <!-- password --> <span class="form-group input-field ui-float-label"> <input type="password" id="password" (click)="inputClick($event)" formControlName="password" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.password.errors }" pInputText /> <label for="fpassword">Password</label> <div *ngIf="submitted && f.password.errors" class="invalid-feedback"> <div *ngIf="f.password.errors.required">Password is required</div> <div *ngIf="f.password.errors.minlength">Password must be at least 6 characters</div> </div> </span> <!-- confirmPassword --> <span class="form-group input-field ui-float-label"> <input type="Password" id="confirmPassword" (click)="inputClick($event)" formControlName="confirmPassword" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.confirmPassword.errors }" pInputText /> <label for="confirmPassword">Confirm Password</label> <div *ngIf="submitted && f.confirmPassword.errors" class="invalid-feedback"> <div *ngIf="f.confirmPassword.errors.required">ConfirmPassword is required</div> <div *ngIf="f.confirmPassword.errors.mustMatch">Passwords must match</div> </div> </span> <button type="submit" class="btn btn-primary" >Submit</button> </form>
In the above code, all the HTML and angular UI implemented with the Angular