Reworking the auth guide

Author: jamesdaniels

.gitignore

@@ -6,3 +6,4 @@ typings/
 npm-debug.log
 .idea/
 .vscode/settings.json
+angularfire2-*.tgz

docs/5-user-authentication.md

@@ -1,163 +1,42 @@
 # 5. User authentication
 
-> AngularFire2 allows you configure your authentication methods in the bootstrap
-phase of your application. This means that if your app only uses one form
-of authentication, you can specify that ahead of time so you only need to call
-`af.auth.login()` later, and with no parameters.
+> AngularFire2 provides you an Observable for your Firebase Authentication
+State via the `AngularFireAuth` module.
 
-## Configure application in bootstrap
-
-To specify your authentication ahead of time, you provide the `AngularFireModule.initializeApp` function
-with an `AuthProvider` and an `AuthMethod`.
-
-```ts
-import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
-import { AppComponent } from './app.component';
-import { AngularFireModule, AuthProviders, AuthMethods } from 'angularfire2';
-
-const myFirebaseConfig = {
-  apiKey: '<your-key>',
-  authDomain: '<your-project-authdomain>',
-  databaseURL: '<your-database-URL>',
-  storageBucket: '<your-storage-bucket>',
-  messagingSenderId: '<your-messaging-sender-id>'
-};
-
-const myFirebaseAuthConfig = {
-  provider: AuthProviders.Google,
-  method: AuthMethods.Redirect
-};
-
-@NgModule({
-  imports: [
-    BrowserModule,
-    AngularFireModule.initializeApp(myFirebaseConfig, myFirebaseAuthConfig)
-  ],
-  declarations: [ AppComponent ],
-  bootstrap: [ AppComponent ]
-})
-export class AppModule {}
-```
-
-
-## Login users
-
-If you have setup authentication in bootstrap like above, then all you need to do
-is call login on `af.auth.login()`
-
-The lone exception is if you're using username and password, then you'll have
-to call `af.auth.login()` with the user's credentials.
-
-```ts
-af.auth.login({ email: 'email', password: 'pass' });
-```
+AngularFireAuth's `.auth` object will return an initialized
+`firebase.auth.Auth` instance, allowing you to log users in and out. [See
+the Firebase docs for more information on what methods are availabile.](https://firebase.google.com/docs/reference/js/firebase.auth.Auth)
 
 **Example app:**
 
 ```ts
 import { Component } from '@angular/core';
-import { AngularFire } from 'angularfire2';
+import { Observable } from 'rxjs/Observable';
+import { AngularFireAuth } from 'angularfire2/auth';
+import { GoogleAuthProvider, User as FirebaseUser } from 'firebase/auth';
 
 @Component({
   selector: 'app-root',
   template: `
-  <div> {{ (af.auth | async)?.uid }} </div>
+  <div> {{ (user | async)?.uid }} </div>
   <button (click)="login()">Login</button>
   <button (click)="logout()">Logout</button>
   `,
 })
 export class AppComponent {
-  constructor(public af: AngularFire) {}
 
-  login() {
-    this.af.auth.login();
-  }
+  user: Observable<FirebaseUser>;
 
-  logout() {
-     this.af.auth.logout();
+  constructor(public afAuth: AngularFireAuth) {
+    this.user = afAuth.authState;
   }
-}
-```
-
-## Logout users
-
-Deletes the authentication token issued by Firebase and signs user out. See [Auth.signOut()](https://firebase.google.com/docs/reference/js/firebase.auth.Auth#signOut) in the Firebase API reference.
-
-Sample Usage:
-
-```ts
-	signOut(): {
-		this.af.auth.logout();
-	}
-```
 
-## Override configuration / No config
-
-Authentication works without configuration, and even if you have setup
-authentication in the bootstrap phase, you can still override the configuration.
-
-```ts
-// Anonymous
-af.auth.login({
-  provider: AuthProviders.Anonymous,
-  method: AuthMethods.Anonymous,
-});
-
-// Email and password
-af.auth.login({
-  email: '[email protected]',
-  password: 'password',
-},
-{
-  provider: AuthProviders.Password,
-  method: AuthMethods.Password,
-});
-
-// Social provider redirect
-af.auth.login({
-  provider: AuthProviders.Twitter,
-  method: AuthMethods.Redirect,
-});
-
-// Social provider popup
-af.auth.login({
-  provider: AuthProviders.Github,
-  method: AuthMethods.Popup,
-});
-```
-
-**Example app:**
-
-*Before running the below example, make sure you've correctly enabled the appropriate sign-in providers in your Firebase console under Auth tab to avoid any exceptions.*
-
-```ts
-import { Component } from '@angular/core';
-import { AngularFire, AuthProviders, AuthMethods } from 'angularfire2';
-
-@Component({
-  selector: 'app-root',
-  template: `
-  <div> {{ (af.auth | async)?.uid }} </div>
-  <button (click)="login()">Login With Twitter</button>
-  <button (click)="overrideLogin()">Login Anonymously</button>
-  `,
-})
-export class AppComponent {
-  constructor(public af: AngularFire) {
-    this.af.auth.subscribe(auth => console.log(auth));
-  }
   login() {
-    this.af.auth.login({
-      provider: AuthProviders.Twitter,
-      method: AuthMethods.Popup,
-    });
+    this.afAuth.auth.signInWithPopup(new GoogleAuthProvider());
   }
-  overrideLogin() {
-    this.af.auth.login({
-      provider: AuthProviders.Anonymous,
-      method: AuthMethods.Anonymous,
-    });
+
+  logout() {
+    this.afAuth.auth.signOut();
   }
 }
 ```