feat(auth): Add github auth

package.json

@@ -13,7 +13,7 @@
   "dependencies": {
     "angular2": "2.0.0-beta.7",
     "angular2-universal-preview": "0.55.4",
-    "angularfire2": "2.0.0-alpha.9",
+    "angularfire2": "2.0.0-alpha.13",
     "css": "2.2.1",
     "es6-promise": "3.1.2",
     "es6-shim": "0.33.13",
@@ -47,6 +47,6 @@
     "ts-node": "0.5.4",
     "typescript": "1.7.5",
     "typescript-node": "0.1.3",
-    "typings": "^0.6.8"
+    "typings": "^0.6.9"
   }
 }

src/css/core/_header.scss

@@ -58,4 +58,8 @@
   margin: 0;
   color: #FFF;
   text-decoration: none;
+  padding-right: 20px;
+  &:last-child {
+    padding-right: 0;
+  }
 }

src/main-server.ts

@@ -7,6 +7,7 @@ import {
   ng2engine,
   REQUEST_URL
 } from 'angular2-universal-preview/dist/server';
+import {FIREBASE_PROVIDERS} from 'angularfire2';
 
 import {provide} from 'angular2/core';
 import {APP_BASE_HREF, ROUTER_PROVIDERS} from 'angular2/router';
@@ -32,6 +33,7 @@ app.use('/', (req, res) => {
   res.render('index', { App, providers: [
     ROUTER_PROVIDERS,
     SERVER_LOCATION_PROVIDERS,
+    FIREBASE_PROVIDERS,
     provide(REQUEST_URL, {useValue: req.originalUrl}),
     provide(APP_BASE_HREF, {useValue: `http://localhost:3000${req.baseUrl}`}),
     provide(REQUEST_URL, {useValue: 'http://localhost:3000'}),

src/shared-providers.ts

@@ -1,14 +1,22 @@
 import {provide} from 'angular2/core';
-import {FIREBASE_PROVIDERS, defaultFirebase} from 'angularfire2';
+import {
+  defaultFirebase,
+  firebaseAuthConfig,
+  AuthMethods,
+  AuthProviders
+} from 'angularfire2';
 
 import {AuthService} from './worker/services/Auth';
 import {Backend, BackendConfig} from './worker/services/Backend';
 import {QuestionService} from './worker/services/QuestionService';
 
-
 export const SHARED_PROVIDERS = [
   AuthService,
   QuestionService,
-  FIREBASE_PROVIDERS,
-  defaultFirebase('answers-mobile.firebaseio.com')
+  defaultFirebase('answers-mobile.firebaseio.com'),
+  firebaseAuthConfig({
+    method: AuthMethods.Redirect,
+    provider: AuthProviders.Github
+  })
 ];
+

src/ui/main_ui.ts

@@ -7,9 +7,18 @@ import {
 } from 'angular2/platform/worker_render';
 import {platform, provide} from 'angular2/core';
 import {BOOTSTRAP_CHANNEL} from '../shared/channels';
+import {
+  defaultFirebase,
+} from 'angularfire2';
+import {WORKER_RENDER_FIREBASE_PROVIDERS} from 'angularfire2/angularfire2_worker_render';
+// Need to import from providers directly 
+// until https://github.com/angular/angularfire2/pull/111 is merged
+import {MessageBasedFirebaseAuth} from 'angularfire2/providers/web_workers/ui/auth';
 
 let appRef = platform([WORKER_RENDER_PLATFORM])
 .application([
+  WORKER_RENDER_FIREBASE_PROVIDERS,
+  defaultFirebase('answers-mobile.firebaseio.com'),
   WORKER_RENDER_APPLICATION,
   WORKER_RENDER_ROUTER,
   provide(WORKER_SCRIPT, {useValue: '/loader.js'})
@@ -22,3 +31,6 @@ bus.from(BOOTSTRAP_CHANNEL).subscribe((message: string) => {
     (<any> window).preboot.complete();
   }
 });
+
+// Need to manually call start until https://github.com/angular/angular/issues/7420 is implemented
+appRef.injector.get(MessageBasedFirebaseAuth).start();

src/worker/components/header.ts

@@ -1,22 +1,37 @@
 import {Component} from 'angular2/core';
 import {Nav} from '../services/Nav';
 import {ROUTER_DIRECTIVES} from 'angular2/router';
+import {FirebaseAuth} from 'angularfire2';
 
 @Component({
 	selector: 'app-header',
 	template: `
 		<img role="tab" class="header__menu js-toggle-menu" src="/images/ic_menu_24px.svg" alt="toggle_nav" (click)="openSideNav()"/>
 
 		<a class="header__title" [routerLink]="['Questions']">Angular Answers</a>
+    <a class="header__item" *ngIf="!(auth | async)" (click)="login()">Login</a>
+    <a class="header__item" *ngIf="auth | async" (click)="logout()">Logout</a>
     <a class="header__item" [routerLink]="['CreateQuestion']">New Question</a>
 	`,
   directives: [ROUTER_DIRECTIVES]
 })
 export class AppHeader {
-	constructor(private nav: Nav){
-
+	constructor(private nav: Nav, public auth: FirebaseAuth){
+    this.auth.subscribe((data) => {
+      console.log('auth data', data);
+    });
 	}
 	openSideNav(){
 		this.nav.open()
 	}
+
+  login() {
+    this.auth.login()
+    .then(() => console.log("Success!"),
+          (err) => console.error(err));
+  }
+
+  logout() {
+    this.auth.logout();
+  }
 }

src/worker/containers/createQuestion.ts

@@ -1,21 +1,26 @@
 import {Component} from 'angular2/core';
 import {QuestionService} from '../services/QuestionService';
 import {Router, RouteConfig} from 'angular2/router'
+import {FirebaseAuth} from 'angularfire2';
 
 @Component({
   selector: 'create-question-container',
   template: `
-    <div class="card">
-      <h3>Ask a new question</h3>
-      <div class="new-question-container">
+    <div [ngSwitch]="(auth | async)" class="card">
+      <span *ngSwitchWhen="null">
+        <h3>Please <a (click)="auth.login()">login</a> to continue.</h3>
+      </span>
+      <span *ngSwitchDefault>
+        <h3>Ask a new question</h3>
+        <div class="new-question-container">
+
+          <input type="text" placeholder="Question Title" [(ngModel)]="newQuestion.title"/>
+          <textarea placeholder="Ask your Question Here" [(ngModel)]="newQuestion.text"></textarea>
 
-        <input type="text" placeholder="Question Title" [(ngModel)]="newQuestion.title"/>
-        <textarea placeholder="Ask your Question Here" [(ngModel)]="newQuestion.text"></textarea>
-
-      </div>
-      <button (click)="addQuestion()">Save</button>
+        </div>
+        <button (click)="addQuestion()">Save</button>
+      </span>
     </div>
-
   `,
   styles: [
     `.new-question-container {
@@ -26,7 +31,8 @@ import {Router, RouteConfig} from 'angular2/router'
 })
 export class CreateQuestionContainer {
   newQuestion = {};
-  constructor(private questionService:QuestionService, private router:Router){}
+  constructor(private questionService:QuestionService, private router:Router,
+              public auth: FirebaseAuth){}
   addQuestion(){
    this.questionService.addQuestion(this.newQuestion);
    this.router.navigate(['../Questions']);

src/worker/containers/questions.ts

@@ -1,19 +1,21 @@
 import {Component, ChangeDetectionStrategy} from 'angular2/core';
 import {Nav} from '../services/Nav';
 import {QuestionService} from '../services/QuestionService';
-import {QuestionList} from '../components/QuestionList'
+import {QuestionList} from '../components/QuestionList';
+import {FirebaseAuth} from 'angularfire2';
 
 @Component({
   selector: 'home-container',
   template: `
     <div class="card">
-      <h3>Recent Questions</h3>
+      <h3 *ngIf='!(auth | async)'>Recent Questions</h3>
+      <h3 *ngIf='(auth | async)'>Hi {{(auth | async).github.displayName}}, here are some recent questions</h3>
     </div>
     <question-list [questions]="questionService.questions | async"></question-list>
   `,
   directives: [QuestionList],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class QuestionsContainer {
-  constructor(private questionService:QuestionService){}
+  constructor(private questionService:QuestionService, public auth: FirebaseAuth){}
 }

src/worker/main_worker.ts

@@ -8,13 +8,15 @@ import {platform, provide, ComponentRef, Injector} from 'angular2/core';
 import {APP_BASE_HREF} from 'angular2/router';
 import {BOOTSTRAP_CHANNEL} from '../shared/channels';
 import {SHARED_PROVIDERS} from '../shared-providers';
+import {WORKER_APP_FIREBASE_PROVIDERS} from 'angularfire2/angularfire2_worker_app';
 
 import {App} from './app/app';
 
 platform([WORKER_APP_PLATFORM])
 .asyncApplication(null, [
   WORKER_APP_ROUTER,
   WORKER_APP_APPLICATION,
+  WORKER_APP_FIREBASE_PROVIDERS,
   provide(APP_BASE_HREF, {useValue: '/'}),
   SHARED_PROVIDERS
 ]).then((appRef) => appRef.bootstrap(App).then((compRef: ComponentRef) => {