Create User with Email and Password in Angular 11 Firebase

Last updated on by Digamber

Hello folks, In this tutorial, I am going to show you How you can create a user with Email and Password in Firebase with Angular 11 framework?

You can use Firebase Authentication to let your users authenticate with Firebase using their email addresses and passwords and to manage your app’s password-based accounts.

Firebase allows you to create a fast and secure authentication system with its vast API collection.

Creating a user with Firebase is very easy and straightforward. You can connect Firebase’s AngularFire2 library with your Angular application and use its powerful features throughout the app.

I will be using AngularFire2 library from the node package manager (NPM) and the latest Angular release for this tutorial.

Step: 1 – Setup Angular App

ng new angularfirebaseproject

Your basic project will be set up after that don’t forget to get into the project directory by using the following command.

cd angularfirebaseproject

You can follow this detailed article to set up the Angular project with external dependencies like Bootstrap4, FontAwesome, SASS, and NgBootstrap.

Step: 2 – Setup AngularFire2 Library in Angular

Now setup Firebase (AngularFire2 library) in your Angular project.

npm install firebase @angular/fire --save

Once you are done setting up this library, make the connection between your Firebase account and your Angular app.

Go to src/environments/enviorment.ts and enviorment.prod.ts files in your project’s enviornments folder. Then add your firebase configuration details in both the environment files as given below.

Firebase Credentials Setting

Step: 3 – Create Auth Service authentication.service.ts

ng generate service authentication

Step: 4 – authentication.service.ts

// Auth service
import { AuthenticationService } from "./shared/services/auth.service";

 providers: [
    AuthenticationService
  ]

Step: 5 – Generate Authentication Service Core File

import { Injectable } from '@angular/core';
import { AngularFireAuth } from "@angular/fire/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.auth.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.auth.signInWithEmailAndPassword(email, password)
      .then((result) => {
         this.router.navigate(['<!-- enter your route name here -->']);
      }).catch((error) => {
        window.alert(error.message)
      })
  }

}

We’ve successfully created authentication.service.ts file. I’ve created 2 methods using FirebasecreateUserWithEmailAndPassword(email, password) and signInWithEmailAndPassword(email, password) APIs.

  • SignUp(email, password): This method creates a new user with email and password using Firebase API with Angular.
  • SignIn(email, password): This method allows a user to sign in with email and password.

Step: 6 – Consume authentication.service.ts

We are going to sign up using our custom API. Go to your signup.component.ts file and add the following code.

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>
        <!-- Calling SignIn Api from AuthenticationService -->
        <div class="formGroup">
          <input type="button" class="btn btnPrimary" value="Sign Up" (click)="authenticationService.SignUp(userEmail.value, userPassword.value)">
        </div>
     </div>`
})

export class SignInComponent implements OnInit {

  constructor(public authenticationService: AuthenticationService) { }

}

We are going to sign in using our custom API. Go to your signin.component.ts file and add the following code.

import { Component } from '@angular/core';
import { AuthenticationService } from "../../shared/services/authentication.service";

@Component({
  selector: 'app-sign-in',
  template: `
      <div class="authBlock">
        <h3>Sign In</h3>
        <div class="formGroup">
          <input type="text" class="formControl" placeholder="Username" #email required>
        </div>
        <div class="formGroup">
          <input type="password" class="formControl" placeholder="Password" #password required>
        </div>
        <!-- Calling SignIn Api from AuthenticationService -->
        <div class="formGroup">
          <input type="button" class="btn btnPrimary" value="Log in" (click)="authenticationService.SignIn(email.value, password.value)">
        </div>
     </div>`
})

export class SignInComponent implements OnInit {

  constructor(public AuthenticationService: AuthenticationService) { }

}

You can download the full code of this tutorial from GitHub.