Add Extra Details on firebase users table

Are you looking for a way to add extra details to the Firebase users table? Firebase provides some login functions that make implementing login and registration functionality easy. However, if you want to manage multiple fields for a user, such as First Name, Last Name, and Address, you may need to manage the Firebase users table differently. This blog post will discuss how to add extra details to the Firebase users table.

To implement multiple fields in the Firebase users table, you need to import the AngularFireAuth module. If this module is not available, install it with npm. Then, create an object in the constructor to use all functions of AngularFireAuth in the entire class.

Next, create the registration function in the service.ts file. This service file will be used in the Angular component to get information from the form submit and pass the value in the function. Before implementing this code, you need to add the users’ table in the Firebase database and then make changes in the code.

By default, Firebase provides a user table in Authentication, which includes some fields like Name, Email, and Password. However, you can create a users’ table in Firebase Cloud and add extra fields.

Finally, create the component.ts for the Angular code, where you can use the registration function to register a user. Use the formBuilder to build the form, and the validator to validate the form fields.

Below is the code for the component.ts and the HTML code for UI.

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);

   }
}

Firebase is a popular backend service that provides a wide range of functionalities for building modern applications, including authentication and real-time database storage. Firebase makes it easy to implement login and registration functionality using its built-in authentication service.

However, sometimes you may need to add extra details to the user table in Firebase to manage multiple fields for the user, such as Firstname, Lastname, Address, etc. In this case, you’ll need to create a new users’ table in Firebase Cloud and add the extra fields to it.

To implement this, you can use the AngularFireAuth package, which provides all the necessary functions to work with the Firebase authentication service in an Angular app. You can use the createUserWithEmailAndPassword() function to sign up users with email and password, and then add the extra details to the user object before saving it to the Firebase database.

Once you have created the service to manage the registration, you can then create an Angular component that uses this service to handle the registration form and submit an event. The component should have a registration form with all the necessary fields, such as first name, lastname, email, password, etc.

By following these steps, you can easily implement registration functionality with multiple fields in your Angular app using Firebase authentication and database services.