fix(auth): authController full rewrite (#3173)

* fix(auth): authController full rewrite

fixes 2 bugs caused by legacy code

* fix(auth): moving state to cookies for Firefox private browsing

* fix(auth): clean query params on OAuth response

app/portainer/__module.js

@@ -56,7 +56,8 @@ angular.module('portainer.app', [])
     views: {
       'content@': {
         templateUrl: './views/auth/auth.html',
-        controller: 'AuthenticationController'
+        controller: 'AuthenticationController',
+        controllerAs: 'ctrl'
       },
       'sidebar@': {}
     },

app/portainer/helpers/urlHelper.js

@@ -23,7 +23,7 @@ angular.module('portainer.app')
   }
 
   function cleanParameters() {
-    $window.location.search = '';
+    $window.location.replace($window.location.origin + $window.location.pathname + $window.location.hash);
   }
 
   return helper;

app/portainer/services/authentication.js

@@ -1,7 +1,7 @@
 angular.module('portainer.app')
 .factory('Authentication', [
-'Auth', 'OAuth', 'jwtHelper', 'LocalStorage', 'StateManager', 'EndpointProvider', 'UserService',
+'$async', 'Auth', 'OAuth', 'jwtHelper', 'LocalStorage', 'StateManager', 'EndpointProvider', 'UserService',
-function AuthenticationFactory(Auth, OAuth, jwtHelper, LocalStorage, StateManager, EndpointProvider, UserService) {
+function AuthenticationFactory($async, Auth, OAuth, jwtHelper, LocalStorage, StateManager, EndpointProvider, UserService) {
   'use strict';
 
   var service = {};
@@ -25,24 +25,29 @@ function AuthenticationFactory(Auth, OAuth, jwtHelper, LocalStorage, StateManage
     }
   }
 
+  async function OAuthLoginAsync(code) {
+    const response = await OAuth.validate({ code: code }).$promise;
+    setUser(response.jwt);
+  }
+
   function OAuthLogin(code) {
-    return OAuth.validate({ code: code }).$promise
+    return $async(OAuthLoginAsync, code)
-      .then(function onLoginSuccess(response) {
+  }
-        return setUser(response.jwt);
+
-      });
+  async function loginAsync(username, password) {
+    const response = await Auth.login({ username: username, password: password }).$promise;
+    setUser(response.jwt);
   }
 
   function login(username, password) {
-    return Auth.login({ username: username, password: password }).$promise
+    return $async(loginAsync, username, password);
-      .then(function onLoginSuccess(response) {
-        return setUser(response.jwt);
-      });
   }
 
   function logout() {
     StateManager.clean();
     EndpointProvider.clean();
     LocalStorage.clean();
+    LocalStorage.storeLoginStateUUID('');
   }
 
   function isAuthenticated() {

app/portainer/services/localStorage.js

@@ -15,10 +15,10 @@ angular.module('portainer.app')
       return localStorageService.get('ENDPOINT_PUBLIC_URL');
     },
     storeLoginStateUUID: function(uuid) {
-      localStorageService.set('LOGIN_STATE_UUID', uuid);
+      localStorageService.cookie.set('LOGIN_STATE_UUID', uuid);
     },
     getLoginStateUUID: function() {
-      return localStorageService.get('LOGIN_STATE_UUID');
+      return localStorageService.cookie.get('LOGIN_STATE_UUID');
     },
     storeOfflineMode: function(isOffline) {
       localStorageService.set('ENDPOINT_OFFLINE_MODE', isOffline);

app/portainer/views/auth/auth.html

@@ -4,53 +4,53 @@
     <div class="col-sm-6 col-sm-offset-3">
       <!-- login box logo -->
       <div class="row">
-        <img ng-if="!logo" src="../../../../assets/images/logo_alt.png" class="simple-box-logo" alt="Portainer">
+        <img ng-if="!ctrl.logo" src="../../../../assets/images/logo_alt.png" class="simple-box-logo" alt="Portainer">
-        <img ng-if="logo" ng-src="{{ logo }}" class="simple-box-logo">
+        <img ng-if="ctrl.logo" ng-src="{{ ctrl.logo }}" class="simple-box-logo">
       </div>
       <!-- !login box logo -->
       <!-- login panel -->
-      <div class="panel panel-default" ng-show="!state.isInOAuthProcess">
+      <div class="panel panel-default" ng-show="!ctrl.state.loginInProgress">
         <div class="panel-body">
           <!-- login form -->
           <form class="simple-box-form form-horizontal">
             <!-- username input -->
             <div class="input-group">
               <span class="input-group-addon"><i class="fa fa-user" aria-hidden="true"></i></span>
-              <input id="username" type="text" class="form-control" name="username" ng-model="formValues.Username" auto-focus>
+              <input id="username" type="text" class="form-control" name="username" ng-model="ctrl.formValues.Username" auto-focus>
             </div>
             <!-- !username input -->
             <!-- password input -->
             <div class="input-group">
               <span class="input-group-addon"><i class="fa fa-lock" aria-hidden="true"></i></span>
-              <input id="password" type="password" class="form-control" name="password" ng-model="formValues.Password">
+              <input id="password" type="password" class="form-control" name="password" ng-model="ctrl.formValues.Password">
             </div>
             <!-- !password input -->
             <!-- login button -->
             <div class="form-group">
               <div class="col-sm-12" >
-                <a ng-href="{{OAuthLoginURI}}" ng-if="AuthenticationMethod === 3">
+                <a ng-href="{{ctrl.OAuthLoginURI}}" ng-if="ctrl.AuthenticationMethod === 3">
-                  <div class="btn btn-primary btn-sm pull-left" style="margin-left:2px" ng-if="state.OAuthProvider === 'Microsoft'">
+                  <div class="btn btn-primary btn-sm pull-left" style="margin-left:2px" ng-if="ctrl.state.OAuthProvider === 'Microsoft'">
                     <i class="fab fa-microsoft" aria-hidden="true"></i> Login with Microsoft
                   </div>
-                  <div class="btn btn-primary btn-sm pull-left" style="margin-left:2px" ng-if="state.OAuthProvider === 'Google'">
+                  <div class="btn btn-primary btn-sm pull-left" style="margin-left:2px" ng-if="ctrl.state.OAuthProvider === 'Google'">
                     <i class="fab fa-google" aria-hidden="true" ></i> Login with Google
                   </div>
-                  <div class="btn btn-primary btn-sm pull-left" style="margin-left:2px" ng-if="state.OAuthProvider === 'Github'">
+                  <div class="btn btn-primary btn-sm pull-left" style="margin-left:2px" ng-if="ctrl.state.OAuthProvider === 'Github'">
                     <i class="fab fa-github" aria-hidden="true" ></i> Login with Github
                   </div>
-                  <div class="btn btn-primary btn-sm pull-left" style="margin-left:2px" ng-if="state.OAuthProvider === 'OAuth'">
+                  <div class="btn btn-primary btn-sm pull-left" style="margin-left:2px" ng-if="ctrl.state.OAuthProvider === 'OAuth'">
                     <i class="fa fa-sign-in-alt" aria-hidden="true" ></i> Login with OAuth
                   </div>
                 </a>
 
-                <button type="submit" class="btn btn-primary btn-sm pull-right" ng-click="authenticateUser()" button-spinner="state.loginInProgress" ng-disabled="state.loginInProgress">
+                <button type="submit" class="btn btn-primary btn-sm pull-right" ng-click="ctrl.authenticateUser()" button-spinner="ctrl.state.loginInProgress" ng-disabled="ctrl.state.loginInProgress">
-                  <span ng-hide="state.loginInProgress"><i class="fa fa-sign-in-alt" aria-hidden="true"></i> Login</span>
+                  <span ng-hide="ctrl.state.loginInProgress"><i class="fa fa-sign-in-alt" aria-hidden="true"></i> Login</span>
-                  <span ng-show="state.loginInProgress">Login in progress...</span>
+                  <span ng-show="ctrl.state.loginInProgress">Login in progress...</span>
                 </button>
 
-                <span class="pull-right" style="margin: 5px;" ng-if="state.AuthenticationError">
+                <span class="pull-right" style="margin: 5px;" ng-if="ctrl.state.AuthenticationError">
                   <i class="fa fa-exclamation-triangle red-icon" aria-hidden="true" style="margin-right: 2px;"></i>
-                  <span class="small text-danger">{{ state.AuthenticationError }}</span>
+                  <span class="small text-danger">{{ ctrl.state.AuthenticationError }}</span>
                 </span>
               </div>
             </div>
@@ -61,10 +61,10 @@
         </div>
       </div>
       <!-- !login panel -->
-      <div class="panel panel-default" ng-show="state.isInOAuthProcess">
+      <div class="panel panel-default" ng-show="ctrl.state.loginInProgress">
         <div class="panel-body">
           <div class="form-group text-center">
-              <span class="small text-muted">OAuth authentication in progress... <span button-spinner="true"></span></span>
+              <span class="small text-muted">Authentication in progress... <span button-spinner="true"></span></span>
           </div>
         </div>
       </div>

app/portainer/views/auth/authController.js

@@ -1,123 +1,71 @@
+import angular from 'angular';
 import uuidv4 from 'uuid/v4';
 
-angular.module('portainer.app')
+class AuthenticationController {
-.controller('AuthenticationController', ['$async', '$q', '$scope', '$state', '$stateParams', '$sanitize', 'Authentication', 'UserService', 'EndpointService', 'ExtensionService', 'StateManager', 'Notifications', 'SettingsService', 'URLHelper', 'LocalStorage',
+  /* @ngInject */
-function($async, $q, $scope, $state, $stateParams, $sanitize, Authentication, UserService, EndpointService, ExtensionService, StateManager, Notifications, SettingsService, URLHelper, LocalStorage) {
+  constructor($async, $scope, $state, $stateParams, $sanitize, Authentication, UserService, EndpointService, ExtensionService, StateManager, Notifications, SettingsService, URLHelper, LocalStorage) {
-  $scope.logo = StateManager.getState().application.logo;
+    this.$async = $async;
+    this.$scope = $scope;
+    this.$state = $state;
+    this.$stateParams = $stateParams;
+    this.$sanitize = $sanitize;
+    this.Authentication = Authentication;
+    this.UserService = UserService;
+    this.EndpointService = EndpointService;
+    this.ExtensionService = ExtensionService;
+    this.StateManager = StateManager;
+    this.Notifications = Notifications;
+    this.SettingsService = SettingsService;
+    this.URLHelper = URLHelper;
+    this.LocalStorage = LocalStorage;
 
-  $scope.formValues = {
+    this.logo = this.StateManager.getState().application.logo;
-    Username: '',
+    this.formValues = {
-    Password: ''
+      Username: '',
-  };
+      Password: ''
+    };
+    this.state = {
+      AuthenticationError: '',
+      loginInProgress: true,
+      OAuthProvider: ''
+    };
 
-  $scope.state = {
+    this.retrieveAndSaveEnabledExtensionsAsync = this.retrieveAndSaveEnabledExtensionsAsync.bind(this);
-    AuthenticationError: '',
+    this.retrievePermissionsAsync = this.retrievePermissionsAsync.bind(this);
-    isInOAuthProcess: true,
+    this.checkForEndpointsAsync = this.checkForEndpointsAsync.bind(this);
-    OAuthProvider: ''
+    this.postLoginSteps = this.postLoginSteps.bind(this);
-  };
 
-  function retrieveAndSaveEnabledExtensions() {
+    this.oAuthLoginAsync = this.oAuthLoginAsync.bind(this);
-    return $async(retrieveAndSaveEnabledExtensionsAsync);
+    this.retryLoginSanitizeAsync = this.retryLoginSanitizeAsync.bind(this);
+    this.internalLoginAsync = this.internalLoginAsync.bind(this);
+
+    this.authenticateUserAsync = this.authenticateUserAsync.bind(this);
+
+    this.manageOauthCodeReturn = this.manageOauthCodeReturn.bind(this);
+    this.authEnabledFlowAsync = this.authEnabledFlowAsync.bind(this);
+    this.onInit = this.onInit.bind(this);
   }
 
-  async function retrieveAndSaveEnabledExtensionsAsync() {
+  /**
-    try {
+   * UTILS FUNCTIONS SECTION
-      await ExtensionService.retrieveAndSaveEnabledExtensions();
+   */
-    } catch (err) {
+
-      Notifications.error('Failure', err, 'Unable to retrieve enabled extensions');
+  logout() {
-      $scope.state.loginInProgress = false;
+    this.Authentication.logout();
+    this.state.loginInProgress = false;
+    this.generateOAuthLoginURI();
+  }
+
+  error(err, message) {
+    this.state.AuthenticationError = message;
+    if (!err) {
+      err = {};
     }
+    this.Notifications.error('Failure', err, message);
+    this.state.loginInProgress = false;
   }
 
-  function permissionsError() {
+  determineOauthProvider(LoginURI) {
-    $scope.state.permissionsError = true;
-    Authentication.logout();
-    $scope.state.AuthenticationError = 'Unable to retrieve permissions.'
-    $scope.state.loginInProgress = false;
-    return Promise.reject();
-  }
-
-  $scope.authenticateUser = function() {
-    var username = $scope.formValues.Username;
-    var password = $scope.formValues.Password;
-    $scope.state.loginInProgress = true;
-
-    Authentication.login(username, password)
-    .then(() => Authentication.retrievePermissions().catch(permissionsError))
-    .then(function success() {
-      return retrieveAndSaveEnabledExtensions();
-    })
-    .then(function () {
-      checkForEndpoints();
-    })
-    .catch(function error() {
-      if ($scope.state.permissionsError) {
-        return;
-      }
-      SettingsService.publicSettings()
-      .then(function success(settings) {
-        if (settings.AuthenticationMethod === 1) {
-          return Authentication.login($sanitize(username), $sanitize(password));
-        }
-        return $q.reject();
-      })
-      .then(function success() {
-        return retrieveAndSaveEnabledExtensions();
-      })
-      .then(function() {
-        $state.go('portainer.updatePassword');
-      })
-      .catch(function error() {
-        $scope.state.AuthenticationError = 'Invalid credentials';
-        $scope.state.loginInProgress = false;
-      });
-    });
-  };
-
-  function unauthenticatedFlow() {
-    EndpointService.endpoints(0, 100)
-    .then(function success(endpoints) {
-      if (endpoints.value.length === 0) {
-        $state.go('portainer.init.endpoint');
-      } else {
-        $state.go('portainer.home');
-      }
-    })
-    .catch(function error(err) {
-      Notifications.error('Failure', err, 'Unable to retrieve endpoints');
-    });
-  }
-
-  function authenticatedFlow() {
-    UserService.administratorExists()
-    .then(function success(exists) {
-      if (!exists) {
-        $state.go('portainer.init.admin');
-      }
-    })
-    .catch(function error(err) {
-      Notifications.error('Failure', err, 'Unable to verify administrator account existence');
-    });
-  }
-
-  function checkForEndpoints() {
-    EndpointService.endpoints(0, 100)
-    .then(function success(data) {
-      var endpoints = data.value;
-
-      if (endpoints.length === 0 && Authentication.isAdmin()) {
-        $state.go('portainer.init.endpoint');
-      } else {
-        $state.go('portainer.home');
-      }
-    })
-    .catch(function error(err) {
-      Notifications.error('Failure', err, 'Unable to retrieve endpoints');
-      $scope.state.loginInProgress = false;
-    });
-  }
-
-  function determineOauthProvider(LoginURI) {
     if (LoginURI.indexOf('login.microsoftonline.com') !== -1) {
       return 'Microsoft';
     }
@@ -130,70 +78,199 @@ function($async, $q, $scope, $state, $stateParams, $sanitize, Authentication, Us
     return 'OAuth';
   }
 
-  function generateState() {
+  generateState() {
     const uuid = uuidv4();
-    LocalStorage.storeLoginStateUUID(uuid);
+    this.LocalStorage.storeLoginStateUUID(uuid);
     return '&state=' + uuid;
   }
 
-  function hasValidState(state) {
+  generateOAuthLoginURI() {
-    const savedUUID = LocalStorage.getLoginStateUUID();
+    this.OAuthLoginURI = this.state.OAuthLoginURI + this.generateState();
-    return savedUUID === state;
   }
 
-  function initView() {
+  hasValidState(state) {
-    SettingsService.publicSettings()
+    const savedUUID = this.LocalStorage.getLoginStateUUID();
-    .then(function success(settings) {
+    return savedUUID && state && savedUUID === state;
-      $scope.AuthenticationMethod = settings.AuthenticationMethod;
+  }
-      $scope.state.OAuthProvider = determineOauthProvider(settings.OAuthLoginURI);
-      $scope.OAuthLoginURI = settings.OAuthLoginURI + generateState();
-    });
 
-    if ($stateParams.logout || $stateParams.error) {
+  /**
-      Authentication.logout();
+   * END UTILS FUNCTIONS SECTION
-      $scope.state.AuthenticationError = $stateParams.error;
+   */
-      $scope.state.isInOAuthProcess = false;
-      return;
-    }
 
-    if (Authentication.isAuthenticated()) {
+  /**
-      $state.go('portainer.home');
+   * POST LOGIN STEPS SECTION
-    }
+   */
 
-    var authenticationEnabled = $scope.applicationState.application.authentication;
+  async retrievePermissionsAsync() {
-    if (!authenticationEnabled) {
+    try {
-      unauthenticatedFlow();
+      await this.Authentication.retrievePermissions();
-    } else {
+    } catch (err) {
-      authenticatedFlow();
+      this.state.permissionsError = true;
-    }
+      this.logout();
-
+      this.error(err, 'Unable to retrieve permissions.');
-    const code = URLHelper.getParameter('code');
-    const state = URLHelper.getParameter('state');
-    if (code && hasValidState(state)) {
-      oAuthLogin(code);
-    } else {
-      $scope.state.isInOAuthProcess = false;
     }
   }
 
-  function oAuthLogin(code) {
+  async retrieveAndSaveEnabledExtensionsAsync() {
-    return Authentication.OAuthLogin(code)
+    try {
-    .then(() => Authentication.retrievePermissions().catch(permissionsError))
+      await this.ExtensionService.retrieveAndSaveEnabledExtensions();
-    .then(function success() {
+    } catch (err) {
-      return retrieveAndSaveEnabledExtensions();
+      this.error(err, 'Unable to retrieve enabled extensions');
-    })
+    }
-    .then(function() {
+  }
-      URLHelper.cleanParameters();
+
-    })
+  async checkForEndpointsAsync(noAuth) {
-    .catch(function error() {
+    try {
-      if ($scope.state.permissionsError) {
+      const endpoints = await this.EndpointService.endpoints(0, 1);
+      const isAdmin = noAuth || this.Authentication.isAdmin();
+
+      if (endpoints.value.length === 0 && isAdmin) {
+        return this.$state.go('portainer.init.endpoint');
+      } else {
+        return this.$state.go('portainer.home');
+      }
+    } catch (err) {
+      this.error(err, 'Unable to retrieve endpoints');
+    }
+  }
+
+  async postLoginSteps() {
+    await this.retrievePermissionsAsync();
+    await this.retrieveAndSaveEnabledExtensionsAsync();
+    await this.checkForEndpointsAsync(false);
+  }
+  /**
+   * END POST LOGIN STEPS SECTION
+   */
+
+  /**
+   * LOGIN METHODS SECTION
+   */
+
+  async oAuthLoginAsync(code) {
+    try {
+      await this.Authentication.OAuthLogin(code);
+      this.URLHelper.cleanParameters();
+    } catch (err) {
+      this.error(err, 'Unable to login via OAuth');
+    }
+  }
+
+  async retryLoginSanitizeAsync(username, password) {
+    try {
+      await this.internalLoginAsync(this.$sanitize(username), this.$sanitize(password));
+      this.$state.go('portainer.updatePassword');
+    } catch (err) {
+      this.error(err, 'Invalid credentials');
+    }
+  }
+
+  async internalLoginAsync(username, password) {
+    await this.Authentication.login(username, password);
+    await this.postLoginSteps();
+  }
+
+  /**
+   * END LOGIN METHODS SECTION
+   */
+
+  /**
+   * AUTHENTICATE USER SECTION
+   */
+
+  async authenticateUserAsync() {
+    try {
+      var username = this.formValues.Username;
+      var password = this.formValues.Password;
+      this.state.loginInProgress = true;
+      await this.internalLoginAsync(username, password);
+    } catch (err) {
+      if (this.state.permissionsError) {
         return;
       }
-      $scope.state.AuthenticationError = 'Unable to login via OAuth';
+      // This login retry is necessary to avoid conflicts with databases
-      $scope.state.isInOAuthProcess = false;
+      // containing users created before Portainer 1.19.2
-    });
+      // See https://github.com/portainer/portainer/issues/2199 for more info
+      await this.retryLoginSanitizeAsync(username, password);
+    }
   }
 
+  authenticateUser() {
+    return this.$async(this.authenticateUserAsync)
+  }
 
-  initView();
+  /**
-}]);
+   * END AUTHENTICATE USER SECTION
+   */
+
+  /**
+   * ON INIT SECTION
+   */
+  async manageOauthCodeReturn(code, state) {
+    if (this.hasValidState(state)) {
+      await this.oAuthLoginAsync(code);
+    } else {
+      this.error(null, 'Invalid OAuth state, try again.');
+    }
+  }
+
+  async authEnabledFlowAsync() {
+    try {
+      const exists = await this.UserService.administratorExists();
+      if (!exists) {
+        this.$state.go('portainer.init.admin');
+      }
+    } catch (err) {
+      this.error(err, 'Unable to verify administrator account existence')
+    }
+  }
+
+  async onInit() {
+    try {
+      const settings = await this.SettingsService.publicSettings();
+      this.AuthenticationMethod = settings.AuthenticationMethod;
+      this.state.OAuthProvider = this.determineOauthProvider(settings.OAuthLoginURI);
+      this.state.OAuthLoginURI = settings.OAuthLoginURI;
+
+      const code = this.URLHelper.getParameter('code');
+      const state = this.URLHelper.getParameter('state');
+      if (code && state) {
+        await this.manageOauthCodeReturn(code, state);
+        this.generateOAuthLoginURI();
+        return;
+      }
+      this.generateOAuthLoginURI();
+
+      if (this.$stateParams.logout || this.$stateParams.error) {
+        this.logout();
+        this.state.AuthenticationError = this.$stateParams.error;
+        return;
+      }
+
+      if (this.Authentication.isAuthenticated()) {
+        await this.postLoginSteps();
+      }
+      this.state.loginInProgress = false;
+
+      const authenticationEnabled = this.$scope.applicationState.application.authentication;
+      if (!authenticationEnabled) {
+        await this.checkForEndpointsAsync(true);
+      } else {
+        await this.authEnabledFlowAsync();
+      }
+    } catch (err) {
+      this.Notifications.error('Failure', err, 'Unable to retrieve public settings');
+    }
+  }
+
+  $onInit() {
+    return this.$async(this.onInit);
+  }
+
+  /**
+   * END ON INIT SECTION
+   */
+}
+
+export default AuthenticationController;
+angular.module('portainer.app').controller('AuthenticationController', AuthenticationController);