Navigate to other page after successfully login

I’ve just finished a tutorial to make a log in and sign up app in Ionic 2. I’m a complete newbie in Ionic 2, so pardon my amateur question. This is the tutorial that i follow https://auth0.com/blog/2016/02/18/ionic-2-authentication-how-to-secure-your-mobile-app-with-jwt/

My question is how can I navigate to other page that I make, instead of just using some html code (in that tutorial, after I successfully login, the app only display something from .html code, not using a ionic page) ?
I’m sorry for making anyone read that article first to answer my question. I appreciate that a lot.

Thank you.

1 Like

You can use NavController

Yes, you should use the navcontroller. Import the navcontroller from Ionic, declare it and call it on the callback of the oauth process like this: this.nav.push(OtherPage);

Yes I know that. But how do I call the function into .html file ? Because I’m using *ngIF, how do i summon that function from component to .html ?

Sorry, maybe I misread your original question. You login, and then you want to do what? You just want to show a piece of template code that’s initially hidden after coming back from succesfully loging in?

After i successfully login, i want to immediately display another page (like a home page or profile page). How do i do that ?

Okay. I don’t actually see the use case in which you directly want to show something different on that page then making clear that you had a successful login and then navigate away, but you can do it using ngIf if you want to. *ngIf binds to an expression. In other words, on the callback of login you want the expression that’s being evaluated to resolve to true.

Let’s say you have a variable bound to the ngIf called loggedIn. Originally before the login proces, initialize and declare the variable, set it to false. On a successful callback, set the loggedIn variable to true. Since the ngIf is watching the expresion, it will now display your loggedin HTML. For brevity: wrap your original login button also with for example a hidden attribute, which evaluates the same variable. Negate loggedIn, so [hidden]=“loggedIn”. This way you can hide your original html, and show the new one.

Have you seen the link i put at the post ? In that tutorial, there is a function called authenticated in service (providers) named auth. That function return a boolean value if the token of JWT is expired or not.

The login page is named profile.ts/ProfilePage class, in profile.html there is ion-content that use *ngIf with the condition if authenticated is true (token not expired yet or basically saying that i did a login), then they will display h1 element saying Welcome, {{ user }} and a logout button.

My question is, how do i called a page (e.g: home page), instead of display some html code ?
How do i call a page in the profile.html after verifying that i did login (*ngIf=“auth.authenticated()”) ?

(*ngIf=“auth.authenticated()”) means i successfully login.

image?
this is last part of code of profile.html

Yes, I perfectly understand your question. But you have to understand something about the workings of ngIf, as I tried to explain to you earlier. ngIf just evaluates an expression, auth.authenticated() in this case. This resolves to true or false and shows some HTML.

You’re question was, how can I navigate to another page after I’ve ensured that the user is logged in. It basically comes down to one of the previous answers, which was: navigate to another page on the callback of the login function. I will narrow it down for you.

In the tutorial they use auth0lock, which is an extra NPM module. You just have to take a look at the API provided over there. This is not related to Ionic. Either way, just check this out over here. This part describes the events that are attached to the lock process. Over there you can see the following event listener: signin success: Triggers when signin has succeeded with no error.

In other words, this event gets fired when the user was successfully signed in. Exactly what you’re looking for right? So, in your component, use this event listener. In the constructor you can add the event listener like so:

lock.on('signin success', function() {
   console.log('successfully signed in!');
   this.nav.push(OtherPage);
});

which off course you still have to use the previously named navController.

Oh, i’m sorry i forgot to mention that i don’t use Auth0 code. I only use the code until quotes part.

Mind explaining again without the Auth0 code ?

But anyway, the moment event gets fired when the user was successfully login is exactly what i’m talking about.

Thanks a lot, sir.

Okay,

one more try then. For your cause, you don’t need to use the auth service provided in the example. It only returns of there’s a valid token or not. Off course you can keep the service for other use cases, but you don’t necessarily need it. You still need to hook in to the login method provided. I see they have this code behind the login/signup button:

login(credentials) { this.http.post(this.LOGIN_URL, JSON.stringify(credentials), { headers: this.contentHeader }) .map(res => res.json()) .subscribe( data => this.authSuccess(data.id_token), err => this.error = err ); }

As you can see, there’s a request being made. It produces a response, which is mapped to json. Then they subscribe to this response, in other words we are listening to te response. The response knows two different outcomes in this code. The first on is, data is coming back from the server. On the callback of getting this data we execute another function named authSuccess and we provide it with the token provided in the data. The second one is to catch the error if an error pops up.

What you want, is to hook into the authSucces method. This method get’s executed when the user is successfully logged in. The authSuccess looks like this:

authSuccess(token) { this.error = null; this.local.set('id_token', token); this.user = this.jwtHelper.decodeToken(token).username; }

So as said, this function executes once we have a response from the http request. We do some stuff over here, like resetting the error, saving the token to our localstorage and setting the user. Now… Here comes the magic. If everything went well, you will only end up in this method if the login was successful. At the last line of the method you simply want to add another line which says something like this.nav.push(OtherPage);

Done beautifully. Thanks Thanks Thanks, Sir :smiley:

Actually i think i’ve done it that way before, but still failed.

I just found out the reason was i don’t use NavController in the page that i want to go…

Now, I got one more problem after solving the previous one lol.

Because of this line this.nav.push(OtherPage), i decide to delete the

<div *ngIf="auth.authenticated">
    <div padding>
        <h1>Welcome, {{ user }}</h1>
        <img src="img/stark.png" />
    </div>
    <div padding>
        <button block (click)="logout()">Log Out</button>
    </div>
</div>

And then when i try to refresh the page, it becomes blank. I think it’s because the tokenNotExpired() is not returning a value.

So, if i want to log out, i have to rewrite the code (back to use *ngIf), try to log out, then rewrite it again (use this.nav.push(OtherPage)) to navigate to other page…

Please help…

I’ve modified the sample code from Auth0 to navigate easier between pages, you can see the code in my blog:
http://vivavivugeek.blogspot.com/2016/05/learn-ionic-2-with-authentication-by-jwt.html

Great! Will sure check it out later.

I’ve posted a comment (a question) in your blog @heros . But just in case, I’ll post it here, too.

Hey, can you tell me how to add another form in the sign up segment (and save it in user data of course) ?

This is because i feel that at least we have to ask for name and email of the user itself. Thanks!

Hi @reshalem reshalem,
Here is the sign up form modified:


Basically you should save user data on the server, for local you just save token.

Wow thanks a lot @heros

While I’m at it,too. I just want to ask whether this server is gonna work if I run my app in smartphone, not in browser ? Thanks again :smile:

Using events worked for me.
this.ev.subscribe(‘hello’, name => {
this.navCtrl.push(ItemsPage);
});
Call PublishEvent from your provider after the authorize is done.