Firebase Authentication in Angular (code example)

Firebase provides a very simple way to set up authentication. This article will introduce how to use AngularFire2 to set up a simple email/password registration and authentication workflow for Angular 2 applications.

Start by creating a new Firebase project and enable the email/password login method in the Authentication section of the Firebase console.

Let’s start by installing the necessary packages using npm and 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 Add it 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 Our app module will be configured using AngularFireModule and AngularFireAuthModule. Also note that we are importing and providing an AuthService, which we will create 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 will be a central location that allows us to login, register or logout our users, so we will These three operations define methods. All authentication logic will be in the service, which will allow us to create components that don't need to implement any auth logic and help keep components simple.

Use Angular CLI to create a skeleton for the service, the following command:

$ ng g s auth

The following is the implementation of the service, using 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 use createUserWithEmailAndPassword and signInWithEmailAndPassword here.

Component classes and templates

Now that our auth service is ready, creating a component that allows login, registration, or logout is simple:

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 into the component's constructor and then define local methods that call equivalent methods on the auth service. We inject the service using the public keyword instead of private so that we can also access the service properties directly from the template.

The template is very simple, using the async pipe on the authService's user object to determine whether there is a logged in user:

app.component.html

<h1 *ngIf="authService.user | async">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">
    注册
  </button>

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

<button (click)="logout()" *ngIf="authService.user | async">
  注销
</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.

Related recommendations: "angularjs tutorial"

This article is a relevant introduction to Firebase authentication. I hope it will be helpful to friends in need!

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