Skip to content

Latest commit

 

History

History
374 lines (307 loc) · 8.26 KB

README.MD

File metadata and controls

374 lines (307 loc) · 8.26 KB

Build Status npm version

FirebaseUi-Angular

Screenshot of Login screen

Installation

To install this library, run:

$ npm install firebaseui-angular --save

To run this library you need to have AngularFire, Firebase, FirebaseUI-Web installed. Fast install:

$ npm install firebase firebaseui angularfire2 firebaseui-angular --save

How to use

Add the FirebaseUIModule with the config to your imports. Make sure you have initialized AngularFire correctly.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import {
  AuthMethods,
  AuthProvider,
  AuthProviderWithCustomConfig,
  CredentialHelper,
  FirebaseUIAuthConfig,
  FirebaseUIModule
} from 'firebaseui-angular';
import { AngularFireModule } from 'angularfire2';
import { environment } from '../environments/environment';
import { AngularFireAuthModule } from 'angularfire2/auth';
import { AppRoutingModule } from './app-routing.module';

const facebookCustomConfig: AuthProviderWithCustomConfig = {
  provider: AuthProvider.Facebook,
  customConfig: {
    scopes: [
      'public_profile',
      'email',
      'user_likes',
      'user_friends'
    ],
    customParameters: {
      // Forces password re-entry.
      auth_type: 'reauthenticate'
    }
  }
};

const firebaseUiAuthConfig: FirebaseUIAuthConfig = {
  providers: [
    AuthProvider.Google,
    facebookCustomConfig,
    AuthProvider.Twitter,
    AuthProvider.Github,
    AuthProvider.Password,
    AuthProvider.Phone
  ],
  method: AuthMethods.Popup,
  tos: '<your-tos-link>',
  credentialHelper: CredentialHelper.AccountChooser,
  autoUpgradeAnonymousUsers: true,
  disableSignInSuccessCallback: true
};

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    AppRoutingModule,
    AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularFireAuthModule,
    FirebaseUIModule.forRoot(firebaseUiAuthConfig)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}

Add the firebaseui css to your imports:

Option 1: CSS Import

May be incompatible with older browsers.

Import the firebaseui css to your src/styles.css file:

@import '~firebaseui/dist/firebaseui.css';

Option 2: Angular-CLI

File: angular.json

Path: "node_modules/firebaseui/dist/firebaseui.css"

{
  "projects": {
    [your-project-name]: {
      ...
      "architect": {
        "build": {
          "options": {
            ...
            "styles": [
              "src/styles.css",
              "node_modules/firebaseui/dist/firebaseui.css"
            ]
          }
        },
        ...
        "test": {
          "options": {
            ...
            "styles": [
              "src/styles.css",
              "node_modules/firebaseui/dist/firebaseui.css"
            ]
          }
        }
      }
    }
  }
}

Option 3: HTML Link

Put this in the <head> tag of your index.html file:

<link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/3.0.0/firebaseui.css" />

Make sure the version number matches the version of firebaseui you have installed with npm.

Once everything is set up, you can use the component in your Angular application:

<firebase-ui></firebase-ui>

Config

FirebaseUIAuthConfig

Property Required Description
providers Yes
  • AuthProvider.Google
  • AuthProvider.Facebook
  • AuthProvider.Twitter,
  • AuthProvider.Github
  • AuthProvider.Password
  • AuthProvider.Phone

or AuthProviderWithCustomConfig
method No
  • AuthMethods.Popup
  • AuthMethods.Redirect

Default: Popup
tos No The link to your terms of services

Default: '''
privacyPolicyUrl No The link to your privacy policy

Default: ''' - But it will show a warning if you don't provide one.
signInSuccessUrl No The url whre the user should be redirected.

It is a hard redirect, so it isn't the angular way. Better do it with authState listener.

Default: No redirect
CredentialHelper No
  • AccountChooser
  • OneTap
  • None

Default: AccountChooser
autoUpgradeAnonymousUsers No
  • Boolean

Default: false
disableSignInSuccessCallback No FirebaseUi has currently two different callbacks for the same thing. signInSuccess which now is deprecated and signInSuccessWithAuthResult. To not break any already running stuff, this functionality was added to be able to disable it entirely.

So, if you set disableSignInSuccessCallback to true, the signInSuccess Callback is skipped and the warning disappears.

--> Migrate from signInSuccess to signInSuccessWithAuthResult

This is for backwards compatibility reasons and will be removed in the future.

  • Boolean

Default: false but the advised value is true

AuthProviderWithCustomConfig

To see the custom configs, check the firebaseUI doc: Provider configuration

 provider: AuthProvider.Facebook,
 customConfig: {
    ...
  }

Listen to auth state changes

this.angularFireAuth.authState.subscribe(this.firebaseAuthChangeListener);

private firebaseAuthChangeListener(response) {
    // if needed, do a redirect in here
    if (response) {
      console.log('Logged in :)');
    } else {
      console.log('Logged out :(');
    }
  }

Don't forget to unsubscribe at the end.

Sign-in success / failure callbacks

<firebase-ui
    (signInSuccessWithAuthResult)="successCallback($event)"
    (signInFailure)="errorCallback($event)"></firebase-ui>
successCallback(signInSuccessData: FirebaseUISignInSuccessWithAuthResult) {
    ...
}

errorCallback(errorData: FirebaseUISignInFailure) {
    ...
}

Sample

There is a sample project in the root folder.

  • Just replace the firebase config in src\environments\environment.ts.
  • Run npm install
  • Run npm run build-lib
  • Run ng serve

Development

The library sources are in projects/firebaseui/angular/library.

To generate all *.js, *.d.ts and *.metadata.json files:

$ npm run build-lib

To lint all *.ts files:

$ npm run lint

There are test files, but they are empty at the moment.

Troubleshoot

CSS not loaded

If you have added the css to the angular.json but nothing happened. Try to restart the server (Ctrl-C and ng serve)

ERROR in ./~/firebase/app/shared_promise.js

This is a know issue in the firebase project. To fix that (for now), do that:

npm install promise-polyfill --save-exact

http://localhost:4200/images/buffer.svg?embed 404 (Not Found)

Put this into your styles.scss file:

@supports (-webkit-appearance:none) {
  .mdl-progress:not(.mdl-progress--indeterminate):not(.mdl-progress--indeterminate) > .auxbar,
  .mdl-progress:not(.mdl-progress__indeterminate):not(.mdl-progress__indeterminate) > .auxbar {
    mask: url(/assets/images/buffer.svg?embed) !important;
  }
}

and put a buffer.svg file into assets/images. This will stop this error message.

License

MIT © Raphael Jenni