CODEWITHSUNDEEP
javascriptangularjsauthentication
kdbanman
kdbanman

Reputation: 10557

Simple Angular authentication

I'm trying to get the little authentication app described in this article turned into a working example, roughly similar to this ember version.

The article snippets concatenated together make this:

// app.js

app.config(function ($httpProvider) {

  $httpProvider.interceptors.push(function ($timeout, $q, $injector) {
    var loginModal, $http, $state;

    // this trick must be done so that we don't receive
    // `Uncaught Error: [$injector:cdep] Circular dependency found`
    $timeout(function () {
      loginModal = $injector.get('loginModal');
      $http = $injector.get('$http');
      $state = $injector.get('$state');
    });

    return {
      responseError: function (rejection) {
        if (rejection.status !== 401) {
          return rejection;
        }

        var deferred = $q.defer();

        loginModal()
          .then(function () {
            deferred.resolve( $http(rejection.config) );
          })
          .catch(function () {
            $state.go('welcome');
            deferred.reject(rejection);
          });

        return deferred.promise;
      }
    };
  });

});

// LoginModalCtrl.js

app.controller('LoginModalCtrl', function ($scope, UsersApi) {

  this.cancel = $scope.$dismiss;

  this.submit = function (email, password) {
    UsersApi.login(email, password).then(function (user) {
      $scope.$close(user);
    });
  };

});

// loginModal.js

app.service('loginModal', function ($modal, $rootScope) {

  function assignCurrentUser (user) {
    $rootScope.currentUser = user;
    return user;
  }

  return function() {
    var instance = $modal.open({
      templateUrl: 'views/loginModalTemplate.html',
      controller: 'LoginModalCtrl',
      controllerAs: 'LoginModalCtrl'
    });

    return instance.result.then(assignCurrentUser);
  };

});

// routes.js

app.config(function ($stateProvider) {

  $stateProvider
    .state('welcome', {
      url: '/welcome',
      // ...
      data: {
        requireLogin: false
      }
    })
    .state('app', {
      abstract: true,
      // ...
      data: {
        requireLogin: true // this property will apply to all children of 'app'
      }
    })
    .state('app.dashboard', {
      // child state of `app`
      // requireLogin === true
    });

});

However, I don't know how to properly instantiate app, nor do I know what to include in the HTML or how to identify it for Angular.

Here is the JSbin I started with the above code where I added the following:

The console is spitting errors I don't understand. Can someone show me the steps to bring this Angular app to life?

Upvotes: 0

Views: 361

Answers (1)

stcorbett
stcorbett

Reputation: 613

tldr;

your first line should be

var app = angular.module("authApp", ['ui.router']);

and you need to download and include the UI Router module with something like:

<script src="app/js/angular-ui/angular-ui-router.min.js"></script>

a bit more detail:

the first console error coming up on the JSbin:

Error: [$injector:unpr] Unknown provider: $stateProvider

suggests you are calling $stateProvider in a place where angular does not know what $stateProvider is. $stateProvider comes from the Angular UI Router module. You need to include that module in your app to be able to call it down the line.

You need to download the UI-router module (https://github.com/angular-ui/ui-router), load it in the html file with something like

  <script src="app/js/angular-ui/angular-ui-router.min.js"></script>

and then include the module in the app by changing the first line to something like:

var app = angular.module("authApp", [
    'ui.router',
]);

That will knock out your first error. It looks like you'll have more errors after that, UsersApi is not defined as wickY26 mentions.

Upvotes: 1

Related Questions