Good day, everyone! In this article, we'll learn how to create a user in Firebase with an email address and a password using the Angular 13 framework.

You may utilise Firebase Authentication to allow your users log in to Firebase using their email addresses and passwords, as well as manage the password-based accounts in your app.

With Firebase's huge API collection, you can develop a fast and secure authentication system.

The process of creating a user in Firebase is simple and straightforward. You can utilise Firebase's AngularFire2 library in your Angular application to take advantage of its amazing capabilities.

For this example, I'll be utilising the AngularFire2 library from the node package manager (NPM) and the most recent Angular version.

Setup Angular App

ng new angularfirebaseproject

After that, remember to enter into the project directory by running the following command.

cd angularfirebaseproject

Let's make some components for our Angular application.

ng g c sign-in
ng g c sign-up

Set "strict": false in the compilerOptions field of the tsconfig.json file to disable strict type warnings or errors.

Setup AngularFire2 Library in Angular

Now, in your Angular project, enable Firebase (AngularFire2 library).

npm install firebase @angular/fire --save

Make the connection between your Firebase account and your Angular app once you've finished setting up this library.

Go to the src/environments/enviorment.ts file in the enviornments folder of your project. Then, in the environment file, enter the firebase configuration details.

export const environment = {
  production: false,
  firebase: {
    apiKey: "xxxxxxxx-xxxxxxxx",
    authDomain: "xxxxxxxxxxxxxxxxxxxxxxxx",
    databaseURL: "xxxxxxxxxxxxxxxxxxxxxxxx",
    projectId: "xxxxxxxx",
    storageBucket: "xxxxxxxx",
    messagingSenderId: "xxxxxx",
    appId: "xxxxx",
    measurementId: "xxxxxxxxxxxxxxxx"
  }
};

Create Auth Service authentication.service.ts

ng generate service shared/services/authentication

Open the file app.module.ts and register the service there.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { AuthenticationService } from './shared/services/authentication.service';
import { SignInComponent } from './sign-in/sign-in.component';
import { SignUpComponent } from './sign-up/sign-up.component';
import { environment } from '../environments/environment';
import { AngularFireModule } from '@angular/fire/compat';
import { AngularFireAuthModule } from '@angular/fire/compat/auth';
@NgModule({
  declarations: [AppComponent, SignInComponent, SignUpComponent],
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularFireAuthModule,
  ],
  providers: [AuthenticationService],
  bootstrap: [AppComponent],
})
export class AppModule {}

Generate Authentication Service Core File

Open the authentication.service.ts file and paste the code below into it.

import { Injectable } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/compat/auth';

@Injectable({
  providedIn: 'root',
})
export class AuthenticationService {
  constructor(
    public afAuth: AngularFireAuth // Inject Firebase auth service
  ) {}
  // Sign up with email/password
  SignUp(email, password) {
    return this.afAuth
      .createUserWithEmailAndPassword(email, password)
      .then((result) => {
        window.alert('You have been successfully registered!');
        console.log(result.user);
      })
      .catch((error) => {
        window.alert(error.message);
      });
  }
  // Sign in with email/password
  SignIn(email, password) {
    return this.afAuth
      .signInWithEmailAndPassword(email, password)
      .then((result) => {
        console.log(result);
      })
      .catch((error) => {
        window.alert(error.message);
      });
  }
}

The authentication.service.ts file was successfully built. I used the FirebasecreateUserWithEmailAndPassword(email, password) and signInWithEmailAndPassword(email, password) APIs to create two methods.

• SignUp(email, password): Using the Firebase API with Angular, this method creates a new user with an email address and a password.
• SignIn(email, password): This technique allows a user to sign in using only his or her email address and password.

Set Up Auth Components

We're going to use our own API to sign up. Add the following code to your signup.component.ts file.

import { Component } from '@angular/core';
import { AuthenticationService } from '../shared/services/authentication.service';
@Component({
  selector: 'app-sign-up',
  template: ` <div class="authBlock">
    <h3>Sign Up</h3>
    <div class="formGroup">
      <input
        type="text"
        class="formControl"
        placeholder="Username"
        #userEmail
        required
      />
    </div>
    <div class="formGroup">
      <input
        type="password"
        class="formControl"
        placeholder="Password"
        #userPassword
        required
      />
    </div>
    <div class="formGroup">
      <input
        type="button"
        class="btn btnPrimary"
        value="Sign Up"
        (click)="
          authenticationService.SignUp(userEmail.value, userPassword.value)
        "
      />
    </div>
  </div>`,
})
export class SignUpComponent {
  constructor(public authenticationService: AuthenticationService) {}
}

We're going to use our own API to log in. Add the following code to your signin.component.ts file.

import { Component } from '@angular/core';
import { AuthenticationService } from '../shared/services/authentication.service';
@Component({
  selector: 'app-sign-in',
  template: ` <div class="authBlock">
    <h3>Sign Up</h3>
    <div class="formGroup">
      <input
        type="text"
        class="formControl"
        placeholder="Username"
        #userEmail
        required
      />
    </div>
    <div class="formGroup">
      <input
        type="password"
        class="formControl"
        placeholder="Password"
        #userPassword
        required
      />
    </div>
    
    <div class="formGroup">
      <input
        type="button"
        class="btn btnPrimary"
        value="Sign Up"
        (click)="
          authenticationService.SignUp(userEmail.value, userPassword.value)
        "
      />
    </div>
  </div>`,
})
export class SignInComponent {
  constructor(public authenticationService: AuthenticationService) {}  
}

Ensure that the auth components are invoked by adding the appropriate tags to the app.component.ts file.

<app-sign-in></app-sign-in>
<app-sign-up></app-sign-up>

I hope you will like the content and it will help you to learn Angular 13 Firebase - Create a user with an Email address and Password
If you like this content, do share.