User Authentication on a mobile AngularJS App

Question

I'd like to ask a question, which will likely have more than one solution but at this stage I don't know how to solve this problem.

I'm currently building a mobile application built in Angular/Ionic which is accessing the Woocommerce API, for which the app needs to pass a consumer key as well as secret in order to obtain product information as well as create products.

I assume that I do not have direct access to a database on my phone where I can store theses details to authenticate my app and point it at the right woocommerce store.

Even if I store these in a server based app, then my mobile app still needs to authenticate to the server based app in order to access the correct woocommerce store.

Could somebody point me into the right directions as to how developers go about this problem?

Answer 1

here is a good article for angular-js authentication https://medium.com/opinionated-angularjs/techniques-for-authentication-in-angularjs-applications-7bbf0346acec

If you need of high level security then you can use token based login like: http://devcenter.kinvey.com/angular/tutorials/how-to-implement-safe-signin-via-oauth

or you can use http://jwt.io

Answer 2

Usually, mobile authentication in Phonegap/Ionic looks like that:

1. You send Authentication request with Login/Pass or ApiKey.
2. Server response some Token.
3. You store Token in localStorage.
4. Send token with every ApiRequest.

Here is example how pass token to every API request if you already have some token.

angular.module('app').config(AppConfig);
AppConfig.$inject = ['$httpProvider'];
function AppConfig($httpProvider, $sceProvider) {  
    var token = simpleStorage.get('access_token'); // simpleStorage here is a js-plugin for using LocalStorage
    if(token){
        $httpProvider.defaults.headers.common['access-token'] = token;
    }
}