Ionic 2 App Using Ionic.io Auth And Mobx To Manage Authentication State - Clearly Innovative | Web and Mobile DevelopmentClearly Innovative | Web and Mobile Development

IMPORTANT NOTE ON THIS POST

Setup your application to use the Ionic.io Auth Service for Authentication; I am only touching on the key changes in the application to support the use of ng2-mobx to managing authentication state


Getting The Project Setup

Lets add mobx to your project, More Information on Mobx in Angular2 can be found here https://github.com/500tech/ng2-mobx

Import the Ng2MobxModule in app.module.ts

Working with Authentication Provider

Lets get into the code changes to get the app working for us; starting with our authentication service in auth.ts  The first thing is to set a variable to hold the activeUser when we get it

That user is critical to determining the login state so we want to observe it using the mobx observable  decorator

 
We us the Ionic.io Service to login a user and when the user is logged in we set the value of the activeUser using the values from the Ionic User object.
See the ionic documentation for additional information https://docs.ionic.io/services/auth/

We mainly use this function at startup to see if there was a user from the previous session that should be activated.

It is important to notice the use of the mobx action decorator this is used for any function that we believe will modify action state.

We have this helper computed function which will get updated anytime the user changes. It is a mobx computed decorated function they are derived from the existing state of the application and get updated when the state changed

Next we have the actual login function, which is maked as an action which will make the magic of updating state work. Notice one again the use of the mobx action decorator this is used for any function that will modify action state. If the user is logged in successfully then the state will be modified.

Handling Login When App Starts Up

Inside of the app.component.ts is where the real work is happening, we call this.auth.doCheckAuth() from the Authentication Service to see if we have a user at start up, otherwise go to LoginPage

Handling Login On The Login Page

On the LoginPage, we need to check to see when the state of the activeUser changes so we use the mobx.when functionality.
This function will be called if any of the observable properties in the function are changed

So lets take a look at the use of the mobx.when function, if this.auth.activeUser is updated in the Authentication Service, then the function is called and if we have a user, we go to the HomePage

Handling Logout On The Home Page

On the HomePage much like on the LoginPage, we need to check to see when the state of the activeUser changes so we use the mobx.when() functonality again.

The function in home.ts is very similar to the login.ts except we want to logout; So lets take a look at the code. If this.auth.activeUser is updated in the Authentication Service, then the function is called and if we do not have a user, we go to the LoginPage

Weird Error Handling with Ionic Cloud Auth when Logging In A User

So the Ionic Cloud service resolves the promise successfully when there are bad credentials passed to the login function. So we need to check the response code to see how to handle the response

More Information