Satellizer Http Interceptor-open source projects sahat/satellizer

Currently I’m using satellizer library to authenticate using json web token. On the backend, I have tested the api and the authentication and everything is working. By the way Im using Twitter authentication.

While on the frontend, which the angular part,After I have authenticated with twitter and successfully redirect to home page, I couldn’t get user’s information whenever i go to /profile, it doesnt render the user’s information and when I check the network tab on google chrome, angular doesnt even call the /api/me route from the backend.

I believe it has something to do with Http interceptor. The authorization header is set as x-access-token both on frontend and backend.

Here’s the code.

app.js

angular.module('MyApp', [ 'ngMessages','ngRoute', 'ui.router','satellizer'])

  .config(function($authProvider) {

         // Twitter
    $authProvider.authHeader = 'x-access-token';
    $authProvider.httpInterceptor = true; // Add Authorization header to HTTP request
    $authProvider.tokenPrefix = 'twitterAuth'; // Local Storage name prefix


    $authProvider.twitter({
      url: '/auth/twitter',
      type: '1.0',
      popupOptions: { width: 495, height: 645 }
    });


  })



  .config(function($stateProvider, $urlRouterProvider,$locationProvider) {
    $stateProvider
      .state('home', {
        url: '/',
        templateUrl: 'app/views/home.html'
      })
      .state('login', {
        url: '/login',
        templateUrl: 'app/views/login.html',
        controller: 'LoginCtrl'
      })
      .state('profile', {
        url: '/profile',
        templateUrl: 'app/views/profile.html',
        controller: 'ProfileCtrl',
      })
      .state('logout', {
        url: '/logout',
        template: null,
        controller: 'LogoutCtrl'
      })


    $urlRouterProvider.otherwise('/');
    $locationProvider.html5Mode(true);


  })

the controllers login.js

angular.module('MyApp')
  .controller('LoginCtrl', function($scope, $auth) {

    $scope.authenticate = function(provider) {
      $auth.authenticate(provider);
    };

  });

profile.js

angular.module('MyApp')
  .controller('ProfileCtrl', function($scope, $auth, Account) {
    $scope.getProfile = function() {
      Account.getProfile()
        .success(function(data) {
          $scope.user = data;
        })
    };
  });

services account.js

angular.module('MyApp')
  .factory('Account', function($http) {
    return {
      getProfile: function() {
        return $http.get('/api/me');
      }
    };
  });

Views profile.html

  
    Profile
    
      
        
          Profile Picture
          
        
        
           Display Name
          
        
        
           Email Address
          
        

      
    
  

This is where the user’s information from twitter authentication should render, on the backend everything is showing when I’m using Chrome postman.

I’ve been pulling my hair for the past 4 hours, so what did I do wrong over here?