Angular – Firebase Authentication using Email Password

In this post, you will learn about angular code sample or example related to firebase authentication using email and password in an Angular app. The code has been tested with Angular 7.* and latest version of AngularFire. You will learn some of the following in this post:

  • Login code example using Firebase Method, signInWithEmailAndPassword
  • LoginComponent code for invoking Firebase Authentication using AuthService

Login Code Example using Firebase Method, signInWithEmailAndPassword

The code could be put inside a file such as auth.service.ts. Pay attention to the fact that an instance of Observable is returned from the login api.

  providedIn: 'root'
export class AuthService {

 login(user: User): Observable<GenericResponse> {
    const response = new GenericResponse();
    const signupSubj = new Subject<GenericResponse>();
    const result = signupSubj.asObservable();
    this.afAuth.auth.signInWithEmailAndPassword(user.username, user.password)
      .then((fbuser) => {
        response.messagecode = 'USER_LOGIN_SUCCESS';
        response.message = 'user login successful!';;
      .catch(function (err){
        response.errorcode = err.code;
        response.errormsg = err.message;;
    return result;

In the above code, a GenericResponse object is used for capturing the error message details. The following represents the code for GenericResponse object. The code be saved in a seperate file and exported.

export class GenericResponse {
  public errorcode = '';
  public errormsg = '';
  public message = '';
  public messagecode = '';
  constructor() {}

Also, a User object is passed to login API as an input parameter. Here is the code for sample User object. The code be saved in a separated file and imported in the auth.service.ts.

export class User {
  public id = '';
  public username = '';
  public password = '';
  public nickname = '';

LoginComponent code for invoking Firebase Authentication using AuthService

Here is the code for LoginComponent which invokes above shown login API on AuthService instance.

  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
export class LoginComponent implements OnInit {
  user: User;

  constructor(private authService: AuthService, private router: Router) {
    this.user = new User();

  onSubmit() {
    this.authService.login(this.user).subscribe(response => {
      if (response.errormsg !== '') {
	// Display error message for login failure
      } else {
	// Redirect to home page on successful login



In this post, you learned about Angular and AngularFire code examples which would help you quickly create firebase login authentication using email and password. In later posts, you will learn about Route Guards and AngularFireAuth. Hope you liked the post. Do feel free to share your comments or suggestions.

Ajitesh Kumar
Follow me

Ajitesh Kumar

I have been recently working in the area of Data analytics including Data Science and Machine Learning / Deep Learning. I am also passionate about different technologies including programming languages such as Java/JEE, Javascript, Python, R, Julia, etc, and technologies such as Blockchain, mobile computing, cloud-native technologies, application security, cloud computing platforms, big data, etc. For latest updates and blogs, follow us on Twitter. I would love to connect with you on Linkedin. Check out my latest book titled as First Principles Thinking: Building winning products using first principles thinking. Check out my other blog,
Posted in AngularJS, firebase, Javascript, Web. Tagged with , , , .

Leave a Reply

Your email address will not be published. Required fields are marked *