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:
Questions of mine:
Thanks for helping me become a better developer.
Okay theres alot 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 mobile app :
What is the standard approach ?
Should i be using Node.JS as a proxy to the databse?
Am I going about this all the wrong way?
What are my potential road-blocks?
How does CORS work with hybrid applications?
Anything I'm missing?
Cordova is what will allow you to access native phone features like the camera,gallery,contacts etc.
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:
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.
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.
nathvarun gave a very complete answer, but I'd like to share the steps I do for authentication in my app.
passwordvia ajax to the server
tokenin the server and send it back to the app
truethe method is executed, if
falseI send back to the app an error (401)
Nice thing is that when the app is open, you can get the
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.
If you are looking for a complete Authentication example, I can recommend my Complete Guide for User Authentication With AngularJS .
It's not that easy to secure a SPA, but if you know how it should be really safe. What you use as a backend doesn't really matter in this case, as it just provides the token we need to identify the user. In general you want to
so basically everything that might change the UI of the app. In those cases you need to check whether a user is authenticated, or has the rights to perform this action. That's the best way to secure a SPA in my eyes.
Regarding CORS, does errors can occur while development, but that's also part of the server to set the correct header information.
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.
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