CODEWITHSUNDEEP
ionic2ionic3
Sanchit Mahajan
Sanchit Mahajan

Reputation: 315

How to navigate to another page after logging in with Facebook in Ionic 3

I want to navigate to another page after logging in with facebook. Right now I am able to log in using Facebook and stay on the same page, but i want to navigate to another page.

My .html file is 

<button ion-button full (click)="loginWithFB()">Login!</button> 
<ion-card *ngIf="userData; else facebookLogin">
  <ion-card-header>{{ userData.username }}</ion-card-header>
  <img [src]="userData.picture" />
  <ion-card-content>
    <p>Email: {{ userData.email }}</p>
    <p>First Name: {{ userData.first_name }}</p>
  </ion-card-content>
</ion-card>

My .ts file is 

loginWithFB() {
  this.facebook.login(['email', 'public_profile']).then((response: FacebookLoginResponse) => {
    this.facebook.api('me?fields=id,name,email,first_name,picture.width(720).height(720).as(picture_large)', []).then(profile => {
      this.userData = {email: profile['email'], first_name: profile['first_name'], picture: profile['picture_large']['data']['url'], username: profile['name']}
    });
  }); 
}

Upvotes: 1

Views: 49

Answers (1)

Gabriel Barreto
Gabriel Barreto

Reputation: 6421

You just need to push the page using navController in the promise returned after your facebook login call:

this.facebook.api('me?fields=id,name,email,first_name,picture.width(720).height(720).as(picture_large)', []).then(profile => {
  this.userData = {email: profile['email'], first_name: profile['first_name'], picture: profile['picture_large']['data']['url'], username: profile['name']};
  this.navCtrl.push(PageName, PageParametersIfAny);
});

There's two ways of pushing a page:

  • Importing the page directly from it's file if you haven't lazy loaded your application.
  • Just passing the string containing the page name if it's lazy loaded.

Like this if not lazy loaded:

import { MyPage } from 'path/to/my/page/folder'; 

...
this.navCtrl.push(MyPage);

or this if lazy loaded:

this.navCtrl.push('MyPage'); // There's no import

Hope this helps.

Upvotes: 1

Related Questions