Create User with Email and Password in Firebase and Angular

By Digamber Rawat Last updated on

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 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 for Creating Users with Firebase

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 also check out my detailed article on Full Firebase Authentication System with Angular 7.

GitHub Project Files

GitHub Resources

I hope you must be able to sign up or sign in using Firebase APIs with Angular so far.

Thanks a lot for taking the time to read this tutorial, I hope this tutorial has been helpful to you. If you think this tutorial has helped you then share this tutorial with others.

You can also follow me on Twitter @ImDigamberSingh

Digamber Rawat
Digamber Rawat

Full stack developer with a passion for UI/UX design. I create beautiful and useful digital products to solve people’s problem and make their life easy.

Hire Me