Maintaining AngularJS Authentication Securengular: Ensuring

Question

Maintaining AngularJS Authentication Securengular: Ensuring

I need to find the ideal architectural solution.

Below is the HTML code I currently have:

<body ng-controller="individualFootprintController as $ctrl">
<div ng-hide="$ctrl.authenticated">
            <h1>Login</h1>
            With Corporate Account: <a href="/login/corporate">click here</a>
</div>

And this is the controller:

function individualFootprintController($http) {
        var self = this;
        $http.get("/is_auth").success(function () {
            self.authenticated = true;
        })
            .error(function() {
                self.authenticated = false;
            }
        );
}

Inquiries:

1) Should this logic be in the controller?

2) How can I get the actual "is_authenticated" value while only making the request once?

javascript angularjs authentication

Answer 1

Answer №1

In order to authenticate with the backend, it is necessary to have a valid token rather than just toggling a simple flag for authentication. Without including a username/password/cookie/token in the request, access to the backend will be denied.

Storing the token in a controller is not ideal as controllers are not meant to be permanent structures. It is best to store the token in a service where other components can access it as needed.

Authentication status should rely on the presence of a valid authentication token.
The authentication token should be stored in a centralized location, typically a service.
Other services can retrieve the token from this central location to determine if the app is currently authenticated.

An example structure could look like this:

app.service('AuthService', function () {
    this.token = null;
});

app.service('FooService', function (AuthService, $http) {
    $http.get(..., AuthService.token, ...)
});

app.controller('LoginStatusController', function (AuthService) {
    Object.defineProperty(this, 'isLoggedIn', {
        get: function () { return AuthService.token != null; }
    });
});

<div ng-controller="LoginStatusController as ctrl">
    <div ng-hide="ctrl.isLoggedIn">

Upon logging in and receiving a token, set AuthService.token so that all other components can access it. If the token becomes invalid or unset, all authenticated statuses will be revoked.

Answer 2

In order to authenticate with the backend, it is necessary to have a valid token rather than just toggling a simple flag for authentication. Without including a username/password/cookie/token in the request, access to the backend will be denied.

Storing the token in a controller is not ideal as controllers are not meant to be permanent structures. It is best to store the token in a service where other components can access it as needed.

Authentication status should rely on the presence of a valid authentication token.
The authentication token should be stored in a centralized location, typically a service.
Other services can retrieve the token from this central location to determine if the app is currently authenticated.

An example structure could look like this:

app.service('AuthService', function () {
    this.token = null;
});

app.service('FooService', function (AuthService, $http) {
    $http.get(..., AuthService.token, ...)
});

app.controller('LoginStatusController', function (AuthService) {
    Object.defineProperty(this, 'isLoggedIn', {
        get: function () { return AuthService.token != null; }
    });
});

<div ng-controller="LoginStatusController as ctrl">
    <div ng-hide="ctrl.isLoggedIn">

Upon logging in and receiving a token, set AuthService.token so that all other components can access it. If the token becomes invalid or unset, all authenticated statuses will be revoked.

Answer 3

Answer №2

My typical approach involves the following steps:

Utilizing ui-router

Utilizing the resolve hook to inject arguments into the controller and defining subroutes of a main route to check authentication on each route change

scripts/services/user.js

 angular.module('yourmodule')
  .service('userSrv', function ($http, $q) {
    var srv = {};

    srv.getAuthenticatedUser = function() {
      return $http.get("/authenticated_user");
    };

    return srv;
  });

scripts/routes.js

angular
 .module('yourmodule')
 .config(function ($stateProvider) {
   $stateProvider
    .state('authenticated', {
      abstract: true,
      template: '<ui-view />',
      controller: 'AuthenticatedCtrl',
      resolve: {
        signedInUser: function(userSrv, $q) {
          return userSrv.getAuthenticatedUser()
          .then(function(null, function() {
            //Catch any auth error, likely 403
            //And transform it to null "signedInUser"
            //This is the place to handle error (log, display flash)
            return $q.resolve(null);
          });
        }
      }
    })
    .state('authenticated.myspace', {
      url: '/myspace',
      templateUrl: 'views/myspace.html'
    });
 });

Leveraging $scope inheritance within your view

scripts/controllers/authenticated.js

 angular.module('yourmodule')
  .controller('AuthenticatedCtrl', function (signedInUser, $scope, $state) {
   //Here you set current user to the scope
   $scope.signedInUser= signedInUser;

   $scope.logout = function() {
     //this is where you would put your logout code.
     //$state.go('login');
   };
 });

views/myspace.html

 <!-- here you call parent state controller $scope property -->
 <div ng-hide="signedInUser">
   <h1>Login</h1>
     With Corporate Account: <a href="/login/corporate">click here</a>
 </div>

1) How can I get the actual "is_authenticated" value with only one request? By querying for authenticated user on each route change, which may seem unusual but proves to be efficient. The query should not take more than 30ms, as it's a small SELECT operation. However, asking "am I authenticated" and "get the authenticated user" are essentially the same, except one returns a boolean and the other returns the user. It is recommended to handle the "am I authenticated" question by requesting the authenticated user and then converting it to a boolean using "if(user)" (accounting for null values).

2) Is it appropriate to have this logic in the controller? Yes and no. While setting the user to the scope makes sense in the controller, it is advisable to move the HTTP API logic to a service and handle routing events separately in another file.

NB: For complete route protection (such as redirection on non-authenticated access), feel free to ask another question for detailed guidance.

Answer 4

My typical approach involves the following steps:

Utilizing ui-router

Utilizing the resolve hook to inject arguments into the controller and defining subroutes of a main route to check authentication on each route change

scripts/services/user.js

 angular.module('yourmodule')
  .service('userSrv', function ($http, $q) {
    var srv = {};

    srv.getAuthenticatedUser = function() {
      return $http.get("/authenticated_user");
    };

    return srv;
  });

scripts/routes.js

angular
 .module('yourmodule')
 .config(function ($stateProvider) {
   $stateProvider
    .state('authenticated', {
      abstract: true,
      template: '<ui-view />',
      controller: 'AuthenticatedCtrl',
      resolve: {
        signedInUser: function(userSrv, $q) {
          return userSrv.getAuthenticatedUser()
          .then(function(null, function() {
            //Catch any auth error, likely 403
            //And transform it to null "signedInUser"
            //This is the place to handle error (log, display flash)
            return $q.resolve(null);
          });
        }
      }
    })
    .state('authenticated.myspace', {
      url: '/myspace',
      templateUrl: 'views/myspace.html'
    });
 });

Leveraging $scope inheritance within your view

scripts/controllers/authenticated.js

 angular.module('yourmodule')
  .controller('AuthenticatedCtrl', function (signedInUser, $scope, $state) {
   //Here you set current user to the scope
   $scope.signedInUser= signedInUser;

   $scope.logout = function() {
     //this is where you would put your logout code.
     //$state.go('login');
   };
 });

views/myspace.html

 <!-- here you call parent state controller $scope property -->
 <div ng-hide="signedInUser">
   <h1>Login</h1>
     With Corporate Account: <a href="/login/corporate">click here</a>
 </div>

1) How can I get the actual "is_authenticated" value with only one request? By querying for authenticated user on each route change, which may seem unusual but proves to be efficient. The query should not take more than 30ms, as it's a small SELECT operation. However, asking "am I authenticated" and "get the authenticated user" are essentially the same, except one returns a boolean and the other returns the user. It is recommended to handle the "am I authenticated" question by requesting the authenticated user and then converting it to a boolean using "if(user)" (accounting for null values).

2) Is it appropriate to have this logic in the controller? Yes and no. While setting the user to the scope makes sense in the controller, it is advisable to move the HTTP API logic to a service and handle routing events separately in another file.

NB: For complete route protection (such as redirection on non-authenticated access), feel free to ask another question for detailed guidance.

Maintaining AngularJS Authentication Securengular: Ensuring

Answer №1

Answer №2

Similar questions

Is there a way for me to replace zero with a different number dynamically?

Tips for dynamically loading a modal

Incorporating Meteor js into an established user system

Error: The object does not have the property createContext necessary to call React.createContext

[Vue alert]: Issue in created function: "TypeError: Unable to assign value to undefined property"

My app's custom barrel configurations don't appear to be functioning properly in Angular 2's system-config.ts

Leveraging Gatsbyjs to Integrate GraphQL Data with Material UI Library

Unexpected results occur when accessing data in $uibModal.open() within Angular JS causing it to

A guide to transferring modules between component files in JavaScript

Unable to switch the text option

Error: Unexpected token : encountered in jQuery ajax call

Navigate to the final element of a mapped array

What is the reason behind console.log() displaying an array, while typeof returning 'object'?

Is there a way to reset back to the default CSS styles?

Integrate Form.io with a SQL Server database

What is the reason behind negative numbers appearing as "5-" rather than "-5" in the basic calculator coded using HTML and JavaScript?

Using Vue.js data with an erb link_to tag

Is there a way to use JavaScript to rearrange the order of my div elements?

The methodology of executing a Javascript function

Error: Unable to authenticate due to timeout on outgoing request to Azure AD after 3500ms