The most common authentication used in an SPA is to use a username and password. We need to send the username and password to the server from the client in order to authenticate the user on the server. The following view is used to send the user credentials for authentication:

<form name ="userLoginPage" ng-controller="ctrlLogin" ng-
submit="login(userCredentials)" >

<label for="userName"> User Name: </label>

<input type="text" id="userName" ng-
model="userCredentials.username">

<label for="Password"> Password: </label>

<input type="text" id="Password" ng-
model="userCredentials.password">

<button type="submit">Submit</button>

</form>

In the preceding code, we used an AngularJS form and the ng-submit directive to execute a scope function on submit. We are using userCredentials as a parameter in order to avoid coupling between the function and its adjoining scope.

The corresponding controller is shown as follows:

var app = angular.model('myApp',[]);

app.controller('CtrlLogin', function ($scope, $rootScope, 

AUTH_EVENTS, AuthService) {
  $scope.userCredentials = {
    username: '',
    password: ''
  };
  $scope.login = function (userCredentials) {
    AuthService.login(userCredentials).then(function (user) {
      $rootScope.$broadcast(AUTH_EVENTS.loginSuccess);
      $scope.setCurrentUser(user);
    }, function () {
      $rootScope.$broadcast(AUTH_EVENTS.loginFailed);
    });
  };
});

It is noticeable in the preceding code that there is no logic. This is done intentionally to decouple the form from the actual authentication logic. It is best practice to keep the logic separate from the controllers by using AngularJS services. AngularJS controllers should only mange the $scope object and not do any heavy lifting. User authentication will distress the state of the whole application and because of this, we used $broadcast in the previous code to communicate the changes in the user session.

It is a good approach to define available event codes in the constant, as shown in following code:

app.constant('AUTH_EVENTS', {
  loginSuccess: 'auth-login-success',
  loginFailed: 'auth-login-failed',
  logoutSuccess: 'auth-logout-success',
  sessionTimeout: 'auth-session-timeout',
  notAuthenticated: 'auth-not-authenticated',
  notAuthorized: 'auth-not-authorized'
});

The good thing about AngularJS constants is that they can be injected like a service. It is easy to rename them later without changing other files. We also used AngularJS constants for a user's role, as shown in the following code:

app.constant('USER_ROLES', {
  all: '*',
  admin: 'admin',
  editor: 'editor',
  guest: 'guest'
});

Some users would like to save their credentials on their computers instead of entering their username and password every time they access the application. The preceding code will not work for this purpose because it is hard to handle an AngularJS form to manage the credentials. There are two problems; first, credentials are never stored when we submit the AngularJS form because form submission is not detected. Second, in AngularJS, credentials will not be picked up from auto filled controls. These problems can be avoided using the iframe and timeout function.

The following code shows the login with iframe:

<iframe src="loginSink.html" name="mysink"

       style="display:none"></iframe>

<form name="userLoginPage"
      action="loginSink.html" target="mysink" method="post"
      ng-controller="CtrlLogin"
      ng-submit="login(userCredentials)"
      novalidate form-autofill-fix>

  <label for="username">Username:</label>
  <input type="text" id="username"
         ng-model=" userCredentials.username">

  <label for="password">Password:</label>
  <input type="password" id="password"
         ng-model=" userCredentials.password">

  <button type="submit">Login</button>

</form>

In the preceding code, we added an <iframe> tag and added the action, target, and method attribute HTML <form> elements. In this way, the form will be posted to loginskin.html in the iframe tag instead of calling the form with ng-submit. Using this technique, a browser's normal form processing logic will boost up without traversing to loginskin.html. This will recognize this as a regular form and save the credentials on the keychain. Now, users will be able to store their credentials on their computers.