Authentication in Ionic/Cordova App

Question

First off, I'm no pro.

In my quest to become a better developer I am trying to understand what is needed and how to accomplish creating a sign-up/login for an Ionic-Framework app.

Most of the single-page-applications (SPAs) handle authentication on a node server that is also serving up the HTML for the client. In my case the phone itself will be serving up the HTML so I am guessing I may be going up against some CORs issues.

I understand that the Ionic-Framework uses states and based angular-client-side-auth repo I should be authenticating whenever I am changing states in my app.

I have an initial app setup but now I am kind of confused where to go from here.

The tools I have at my disposal:

• Node.JS Server -Thanks DigitalOcean (Should I be using this as a proxy to my DB?)
• CouchDB server (Full stack here we come)

Questions of mine:

1. What is the standard approach for authenticating when using hybrid apps?
2. Should I be using Node.JS as a proxy to the database?
3. Should I skip node.js and authenticate directly with the CouchDB server? (I've heard of this)
4. Am I going about this all the wrong way?
5. What are my potential road-blocks?
6. How does CORS work with hybrid applications?
7. Anything I'm missing?

Thanks for helping me become a better developer.

Answer 1

OK, there is a lot to answer. But the short answer is to just keep things simple and authenticate like you would a regular web app.

In a regular web app :

• In a regular web app you would send a request to a server and check the credentials with a database to authenticate the user

In a mobile app :

• In a mobile app you will do the same via ajax requests (using $http in the case of angular).
• After authentication is complete on the server send a response back to the app( eg. json/xml) indicating to the front end the result of the authentication.

What is the standard approach ?

• I'm not sure about standard, but this seems to be the easiest approach. Standards always change because there's always a better way to do it. So as long as it gets the job done go for it, improve on it later.

Should i be using Node.JS as a proxy to the databse?

• I haven't used much of nodeJs so i don't know what you really mean. But if it helps to know - i use php on the server that receives the ajax request, handles the authentication with the mysql database and returns the response to the mobile app.

Am I going about this all the wrong way?

• I haven't seen your initial setup. As far as authenticating whenever you're changing states in the app goes, you can use localStorage to store the user info after a successful login. On logout clear the localStorage. So all you need to do is to check if the value exists in the localStorage to confirm if the user is logged in.

What are my potential road-blocks?

• I suggest you start making your app and you'll know soon enough. On the whole ionic+cordova makes things quite simple and removes most of the roadblocks for app development.

How does CORS work with hybrid applications?

• Cordova allows cross domain request by default so you won't have any problems with cross domain requests and thus you can access your server for authentication directly.

Anything I'm missing?

• IonicFramework is just a front end HTML5 framework. It alone cannot make you a mobile app.It will just give you nice UI to work with. IonicFramework provides you with some nice javascript features which it implements using angular. Thus, to get the most out of ionic you should be proficient with angularJs. Learning angular is well worth the effort so go for it.

• The actual app is compiled by Cordova. Cordova takes your regular html/css/javascript files and packages them into the android apk or iphone ipa so that they can be installed on the respective os as native apps.

• Cordova is what will allow you to access native phone features like the camera,gallery,contacts etc.

Updated 3rd June 2015

Token Based Authentication : i believe is an alternative. It is a cleaner and more secure way of handling authentication that is now easily available.

For more information check out the following links:

• Angular jwt (for apps using angular on the front-end)
• Video Talk :Making your apps secure using JWT (by the creators of jwt.io)
• Jwt.io (official website of jwt)
• Jwt-Auth for Laravel ( For those using Laravel on the back end)

What are the benefits of using a token-based approach?

Cross-domain / CORS: cookies + CORS don't play well across different domains. A token-based approach allows you to make AJAX calls to any server, on any domain because you use an HTTP header to transmit the user information. Stateless (a.k.a. Server side scalability): there is no need to keep a session store, the token is a self-contanined entity that conveys all the user information. The rest of the state lives in cookies or local storage on the client side.

CDN: you can serve all the assets of your app from a CDN (e.g. javascript, HTML, images, etc.), and your server side is just the API. Decoupling: you are not tied to a particular authentication scheme. The token might be generated anywhere, hence your API can be called from anywhere with a single way of authenticating those calls.

Mobile ready: when you start working on a native platform (iOS, Android, Windows 8, etc.) cookies are not ideal when consuming a secure API (you have to deal with cookie containers). Adopting a token-based approach simplifies this a lot. CSRF: since you are not relying on cookies, you don't need to protect against cross site requests (e.g. it would not be possible to your site, generate a POST request and re-use the existing authentication cookie because there will be none).

Performance: we are not presenting any hard perf benchmarks here, but a network roundtrip (e.g. finding a session on database) is likely to take more time than calculating an HMACSHA256 to validate a token and parsing its contents.

Login page is not an special case: If you are using Protractor to write your functional tests, you don't need to handle any special case for login. Standard-based: your API could accepts a standard JSON Web Token (JWT). This is a standard and there are multiple backend libraries (.NET, Ruby, Java, Python, PHP) and companies backing their infrastructure (e.g. Firebase, Google, Microsoft). As an example, Firebase allows their customers to use any authentication mechanism, as long as you generate a JWT with certain pre-defined properties, and signed with the shared secret to call their API.

Answer 2

nathvarun gave a very complete answer, but I'd like to share the steps I do for authentication in my app.

1. Send email + password via ajax to the server
2. Generate a token in the server and send it back to the app
3. Store email + token in localStorage
4. For every single request I make to the server I send email + token via POST
5. In the server I verify authenticity of that user with that token, if true the method is executed, if false I send back to the app an error (401)
6. If app receives success, then it's ok, if receives error I redirect to login screen.

Nice thing is that when the app is open, you can get the email + token from localStorage, send to the server, if that token is ok for that user, redirect to main screen, otherwise redirect to login. Then whenever user clears the cache of the app, he is redirected to login screen.

Answer 3

I actually needed something like that for a few apps I'm working on. I spent quite some time investigating this and was able to achieve that.

I'm pretty happy with the result, in addition to email/password authentication I've added some social authentication which works in the same way.

1. open url on client side with the provider's (facebook/twitter/instagram) url for login
2. the user logs in and is redirected to the server's callback url (my server is written in nodejs)
3. once I've got the access token from the provider. I save this token and then create a token for the client to reuse every time the user wants to access a protected ressource.

Download the apk and test it.

If this is what you're looking for you can checkout both the client side code at : https://github.com/malikov/Authenticate.me-client-cordova-ionic

And the server side code at : https://github.com/malikov/Authenticate.me-Node-Server