Problem

The new Firebase SDK only makes credentials, such as accessToken, from third-party oauth providers available after successful login (included in the object emitted from the signInWithPopup() promise, or from getRedirectResult() after a successful redirect login). This differs from the previous version of the SDK which would persist the credentials and always attach the credentials to the auth object returned from getAuth(). AFAIK this is intentional design to prevent accidental usage of expired tokens. In AngularFire2 as of beta.1, we cache the credentials in memory, but don't persist them to disk to survive a page refresh.

So previously, where applications could safely assume that if a user is authenticated, their credentials are available, applications must now check that a user is authenticated AND has credentials available before trying to access credentials. While on the surface this seems like a degraded user experience, it at least helps the application know sooner if credentials are no longer valid (i.e. the application doesn't have to make a request to third party API with the credentials and check the response error to find out the credentials have expired).

Proposal

We could provide an opt-in mechanism to automatically store credentials on disk, and automatically expire the credentials if the user is unauthenticated.

We'll create a token, CredentialStore, and by default bind it to an in-memory store that we are currently using.

Within the AngularFire2 npm package we'll provide a separate module, persistent-credential-store which will export a Provider that will override the CredentialStore with an implementation that will persist to disk. A user could just add this provider to their providers in order to automatically persist the credentials to disk (leaving it up to the application to determine when the credentials have expired).

import { bootstrap } from '@angular/core';
import { FIREBASE_PROVIDERS, defaultFirebase } from 'angularfire2';
import { PersistentCredentialStore } from 'angularfire2/persistent-credential-store';

import { MyApp } from './my-app';

bootstrap(MyApp, [
  FIREBASE_PROVIDERS,
  defaultFirebase({
    apiKey: "<your-key>",
    authDomain: "<your-project-authdomain>",
    databaseURL: "<your-database-URL>",
    storageBucket: "<your-storage-bucket>",
  }),
  PersistentCredentialStore
]);