Skip to content

Commit d4c2d8e

Browse files
jamesdanielsdavideast
authored andcommitted
Did my best to update the Ionic2 doc
I haven't run this code FYI, just taking my best stab at updating
1 parent dd53a68 commit d4c2d8e

File tree

1 file changed

+42
-44
lines changed

1 file changed

+42
-44
lines changed

docs/Auth-with-Ionic2.md

Lines changed: 42 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -178,15 +178,15 @@ export const firebaseConfig = {
178178
export class AppModule { }
179179

180180
```
181-
### Inject AngularFire and Bind it to List
181+
### Inject AngularFireDatabase and Bind it to List
182182
183-
Now inject AngularFire in your component. Open your `home.ts` by going into `src/pages/home/home.ts` and make the following changes:
183+
Now inject AngularFireDatabase in your component. Open your `home.ts` by going into `src/pages/home/home.ts` and make the following changes:
184184
185-
>1) Import "AngularFire, FirebaseListObservable" at the top of your component.
185+
>1) Import "AngularFireDatabase, FirebaseListObservable" at the top of your component.
186186
187-
>2) Inject your AngularFire dependency in the constructor.
187+
>2) Inject your AngularFireDatabase dependency in the constructor.
188188
189-
>3) Call the list method on angularFire's database object.
189+
>3) Call the list method on the AngularFireDatabase module.
190190
191191
Your `home.ts` file should look like this.
192192
@@ -195,7 +195,7 @@ Your `home.ts` file should look like this.
195195
import { Component } from '@angular/core';
196196
import { NavController } from 'ionic-angular';
197197

198-
import { AngularFire, FirebaseListObservable } from 'angularfire2';
198+
import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database';
199199

200200
@Component({
201201
selector: 'page-home',
@@ -205,8 +205,8 @@ export class HomePage {
205205

206206
items: FirebaseListObservable<any[]>;
207207

208-
constructor(public navCtrl: NavController,af: AngularFire) {
209-
this.items = af.database.list('/items');
208+
constructor(public navCtrl: NavController, db: AngularFireDatabase) {
209+
this.items = db.list('/items');
210210
}
211211

212212
}
@@ -260,39 +260,39 @@ This should create the AuthService under `src/providers/auth-service.ts`.
260260
Update the service with the following code.
261261
262262
```bash
263-
263+
import { Observable } from 'rxjs/Observable';
264264
import { Injectable } from '@angular/core';
265-
import { AuthProviders, AngularFireAuth, FirebaseAuthState, AuthMethods } from 'angularfire2';
265+
import { AngularFireAuth } from 'angularfire2/auth';
266+
import { User } from 'firebase';
267+
import { FacebookAuthProvider } from 'firebase/auth';
266268

267269
@Injectable()
268270
export class AuthService {
269-
private authState: FirebaseAuthState;
271+
private authState: Observable<User>;
272+
private currentUser: User;
270273

271-
constructor(public auth$: AngularFireAuth) {
272-
this.authState = auth$.getAuth();
273-
auth$.subscribe((state: FirebaseAuthState) => {
274-
this.authState = state;
274+
constructor(public afAuth$: AngularFireAuth) {
275+
this.authState = afAuth$.authState;
276+
afAuth$.subscribe((user: User) => {
277+
this.currentUser = user;
275278
});
276279
}
277280
278281
get authenticated(): boolean {
279-
return this.authState !== null;
282+
return this.currentUser !== null;
280283
}
281284
282285
signInWithFacebook(): firebase.Promise<FirebaseAuthState> {
283-
return this.auth$.login({
284-
provider: AuthProviders.Facebook,
285-
method: AuthMethods.Popup
286-
});
286+
return this.afAuth$.auth.signInWithPopup(new FacebookAuthProvider());
287287
}
288288

289289
signOut(): void {
290-
this.auth$.logout();
290+
this.afAuth$.signOut();
291291
}
292292

293293
displayName(): string {
294-
if (this.authState != null) {
295-
return this.authState.facebook.displayName;
294+
if (this.currentUser !== null) {
295+
return this.currentUser.facebook.displayName;
296296
} else {
297297
return '';
298298
}
@@ -375,7 +375,7 @@ import { Component } from '@angular/core';
375375
import { NavController } from 'ionic-angular';
376376

377377
import { AuthService } from '../../providers/auth-service';
378-
import { AngularFire, FirebaseListObservable } from 'angularfire2';
378+
import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database';
379379

380380
@Component({
381381
selector: 'page-home',
@@ -385,8 +385,8 @@ export class HomePage {
385385

386386
items: FirebaseListObservable<any[]>;
387387

388-
constructor(public navCtrl: NavController,af: AngularFire,private _auth: AuthService) {
389-
this.items = af.database.list('/items');
388+
constructor(public navCtrl: NavController, db: AngularFireDatabase, private _auth: AuthService) {
389+
this.items = db.list('/items');
390390
}
391391

392392
signInWithFacebook(): void {
@@ -467,51 +467,49 @@ and update the signInWithFacebook() method.
467467
your ```auth-service.ts``` code should look like this.
468468
469469
```ts
470-
471-
470+
import { Observable } from 'rxjs/Observable';
472471
import { Injectable } from '@angular/core';
473-
import { AuthProviders, AngularFireAuth, FirebaseAuthState, AuthMethods } from 'angularfire2';
474-
472+
import { AngularFireAuth } from 'angularfire2/auth';
473+
import { User } from 'firebase';
474+
import { FacebookAuthProvider } from 'firebase/auth';
475475
import { Platform } from 'ionic-angular';
476476
import { Facebook } from 'ionic-native';
477477
478478
@Injectable()
479479
export class AuthService {
480-
private authState: FirebaseAuthState;
480+
private authState: Observable<User>;
481+
private currentUser: User;
481482
482-
constructor(public auth$: AngularFireAuth, private platform: Platform) {
483-
this.authState = auth$.getAuth();
484-
auth$.subscribe((state: FirebaseAuthState) => {
485-
this.authState = state;
483+
constructor(public afAuth$: AngularFireAuth) {
484+
this.authState = afAuth$.authState;
485+
afAuth$.subscribe((user: User) => {
486+
this.currentUser = user;
486487
});
487488
}
488489
489490
get authenticated(): boolean {
490-
return this.authState !== null;
491+
return this.currentUser !== null;
491492
}
492493
493494
signInWithFacebook(): firebase.Promise<FirebaseAuthState> {
494495
if (this.platform.is('cordova')) {
495496
return Facebook.login(['email', 'public_profile']).then(res => {
496497
const facebookCredential = firebase.auth.FacebookAuthProvider.credential(res.authResponse.accessToken);
497-
return firebase.auth().signInWithCredential(facebookCredential);
498+
return this.afAuth$.aut.signInWithCredential(facebookCredential);
498499
});
499500
} else {
500-
return this.auth$.login({
501-
provider: AuthProviders.Facebook,
502-
method: AuthMethods.Popup
503-
});
501+
return this.afAuth$.auth.signInWithPopup(new FacebookAuthProvider());
504502
}
505503
506504
}
507505
508506
signOut(): void {
509-
this.auth$.logout();
507+
this.afAuth$.signOut();
510508
}
511509
512510
displayName(): string {
513-
if (this.authState != null) {
514-
return this.authState.facebook.displayName;
511+
if (this.currentUser !== null) {
512+
return this.currentUser.facebook.displayName;
515513
} else {
516514
return '';
517515
}

0 commit comments

Comments
 (0)