Firebase Authentication in Angular

Firebase provides an easy way to set up authentication in your app. Here we will explore how to set up a simple email/password registration and authentication workflow for Angular 2 applications using the AngularFire2 library.

The first step is to create a new Firebase project and enable the email/password login method under the Authentication section of the Firebase console.

Let’s start installing the necessary packages using npm. This will add the Firebase SDK, AngularFire2, and promise-polyfill dependencies to your project:

$ npm install firebase angularfire2 --save

$ npm install promise-polyfill --save-exact

Now let’s add the Firebase API and project credentials to the project’s environment variables. If you click Add Firebase to your web app, you can find these values ​​in the Firebase console:

src/environments/environment.ts

export const environment = {
  production: false,
  firebase: {
    apiKey: 'XXXXXXXXXXX',
    authDomain: 'XXXXXXXXXXX',
    databaseURL: 'XXXXXXXXXXX',
    projectId: 'XXXXXXXXXXX',
    storageBucket: 'XXXXXXXXXXX',
    messagingSenderId: 'XXXXXXXXXXX'
  }};

Then we will Configure our app module using AngularFireModule and AngularFireAuthModule. Also note that we are importing and providing the AuthService. We will create the service next:

app.module.ts

// ...

import { AngularFireModule } from 'angularfire2';
import { environment } from '../environments/environment';
import { AngularFireAuthModule } from 'angularfire2/auth';

import { AuthService } from './auth.service';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    // ...
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireAuthModule
  ],
  providers: [AuthService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Create Auth service

Our service There will be a central location that allows us to log in, register or log out a user, so we will define methods for these 3 actions. All authentication logic will be in the service, which will allow us to create components that don't need to implement any authentication logic and help keep our components simple.

You can use this command to create a framework for a service using the Angular CLI:

$ ng g s auth

This is the implementation of the service, leveraging AngularFireAuth:

auth.service.ts

import { Injectable } from '@angular/core';

import { AngularFireAuth } from 'angularfire2/auth';
import * as firebase from 'firebase/app';

import { Observable } from 'rxjs/Observable';

@Injectable()
export class AuthService {
  user: Observable<firebase.User>;

  constructor(private firebaseAuth: AngularFireAuth) {
    this.user = firebaseAuth.authState;
  }

  signup(email: string, password: string) {
    this.firebaseAuth
      .auth
      .createUserWithEmailAndPassword(email, password)
      .then(value => {
        console.log(&#39;Success!&#39;, value);
      })
      .catch(err => {
        console.log(&#39;Something went wrong:&#39;,err.message);
      });    
  }

  login(email: string, password: string) {
    this.firebaseAuth
      .auth
      .signInWithEmailAndPassword(email, password)
      .then(value => {
        console.log(&#39;Nice, it worked!&#39;);
      })
      .catch(err => {
        console.log(&#39;Something went wrong:&#39;,err.message);
      });
  }

  logout() {
    this.firebaseAuth
      .auth
      .signOut();
  }

}

You will notice that the methods available on AngularFireAuth.auth all return promises, so we can use then and catch to handle success and error status respectively.

We are using createUserWithEmailAndPassword and signInWithEmailAndPassword here because we are setting up email/password authentication, but the same method can be used to authenticate via Twitter, Facebook, or Google.

Component Classes and Templates

Now that our auth service is in place, it is very simple to create a component that allows login, registration, or logout:

app.component.ts

import { Component } from '@angular/core';
import { AuthService } from './auth.service';

@Component({ ... })
export class AppComponent {
  email: string;
  password: string;

  constructor(public authService: AuthService) {}

  signup() {
    this.authService.signup(this.email, this.password);
    this.email = this.password = '';
  }

  login() {
    this.authService.login(this.email, this.password);
    this.email = this.password = '';    
  }

  logout() {
    this.authService.logout();
  }
}

We inject the service in the component's constructor and then define a local method that calls the equivalent method on the auth service. We focus on the service using the public keyword instead of private so that we can access the service properties directly from the template as well.

The template is very simple and uses an asynchronous pipe on the authService's user object to determine if there is a logged in user:

app.component.html

<h1 id="Welcome-nbsp-nbsp-authService-user-nbsp-nbsp-async-email-nbsp">Welcome {{ (authService.user | async)?.email }}!</h1>

<div *ngIf="!(authService.user | async)">
  <input type="text" [(ngModel)]="email" placeholder="email">
  <input type="password" [(ngModel)]="password" placeholder="email">

  <button (click)="signup()" [disabled]="!email || !password">
    Signup
  </button>

  <button (click)="login()" [disabled]="!email || !password">
    Login
  </button>
</div>

<button (click)="logout()" *ngIf="authService.user | async">
  Logout
</button>

Our input fields are bidirectionally bound to the email and password values ​​in the component class using ngModel and banana from the framework syntax.

Finish! Adding authentication to your app using Firebase Authentication is that easy!

The above is the detailed content of Firebase Authentication in Angular. For more information, please follow other related articles on the PHP Chinese website!