Search code examples
angularjsnode.jsexpressangular-ui-routerstormpath

how to make angularjs call to nodejs api and auth with stormpath

The following code starts in angularjs, then is routed through node which then should make an external api call. What is happening, stormpath is intercepting the call and trying to authenticate it (the login screen is served...I checked res.data). I thought the app was good to go already since I had to login initially. I didn't define a route in ui-router because I want node to handle it and not angular. So, my question is how do I configure the different layers to handle the call.

angular -> node/stormpath -> external api

node route:

  app.use('/api/v1/accounts/:search', stormpath.groupsRequired(['dataentry']), apiAccounts.findAll);

stormpath setup:

  app.use(stormpath.init(app, {
     apiKeyFile: config.stormpathapi.apiKeyFile,
     application: config.stormpathapi.application,
     secretKey: config.stormpathapi.secretKey,
     sessionDuration: 1000 * 60 * 30,
     enableAutoLogin: true,
     enableUsername: true
  }));

angular code:

  $scope.getCustomers = function(chars) {
    var customers = [],
        url = 'api/v1/accounts/' + encodeURIComponent(chars) + '/';

    console.log('getCustomers: ' + url);
    try
    {
        //return $http.jsonp(url)
        return $http.get(url)
            .then(function(res) {
                if(angular.isArray(res.data))
                {
                    customers = res.data;
                }

                return customers;
            }, function (error) {
                console.log('Unable to load the customers: ' + error)
            });
    }
    catch(e){
        console.log("error searching comapny: " + e);
    }

}

The url is correctly formated. If I make the call in a new browser window it works as expected (and authenticates me via stormpath api. I want this functionality so that no one can use the api without being logged into the app.

url format:

  http://localhost:3000/api/v1/accounts/ap/

res.data contains stormpath html:

   <!DOCTYPE html><!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
   <!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
   <!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
   <!--[if gt IE 8]><!--><html lang="en" class="no-js"><!--<![endif]--><head><meta charset="utf- 8"><title>Log In</title><meta content="Log into your account!" name="description"><meta   content="width=device-width" name="viewport"><link href="//fonts.googleapis.com/css?    family=Open+Sans:300italic,300,400italic,400,600italic,600,700italic,700,800italic,800"    rel="stylesheet" type="text/css"><link    href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"><style>html,
   body {
       height: 100%;

   .....

   <body class="login"><div class="container custom-container"><div class="va-wrapper"><div    class="view login-view container"><div class="box row"><div class="email-password-area col-xs-12     large col-sm-12"><div class="header"><span>Log In or <a href="/register">Create Account</a>

  .....

Thanks!

Solution

  • I believe that the Stormpath middleware is intercepting the API call and trying to render the login page. I think the solution would be to put stormpath.LoginRequired middleware on the route that serves your Angular app, this will force them to the Login page and after they login should have a session cookie which will be used for API calls.