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.

@Injectable({
  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!';
        signupSubj.next(response);
      })
      .catch(function (err){
        response.errorcode = err.code;
        response.errormsg = err.message;
        signupSubj.next(response);
      });
    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.

@Component({
  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
 //
        this.router.navigate(['/home']);
      }
    });
  }
}

References

• Angular
• AngularFire – Official library of Angular and Firebase

Summary

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.