Twitter Bootstrap Question posted in

Twitter bootstrap – Angular-devise 401 unauthorized error on landing page

I am building an app ROR that uses Devise for authentication and the angular-devise gem to link my angularJS front-end to rails.
When I come to the landing page of the app though the console is showing an error which I understand to be devise trying to sign in and having no username or password for that. My question is: Why is it trying to sign in?
I admit my limited understanding of how Devise and Angular-devise work. So I am not being able to debug this error. On top of that I m having the error twice, which I understand to be devise trying to sign in twice. I still don’t know where these calls are being made to improve the code.

enter image description here

enter image description here

navCtrl.js

angular.module('theNotesApp')
    .controller('navCtrl', ['$scope', 'Auth', '$state', 'notesFactory', 'Flash', function($scope, Auth, $state, notesService, Flash) {
        $scope.signedIn = Auth.isAuthenticated;
        $scope.logout = Auth.logout;

        $scope.successAlert = function() {
            var message = '<strong> Well done!</strong>  You successfully read this important alert message.';
            Flash.create('success', message, 'custom-class');
            // First argument (success) is the type of the flash alert
            // Second argument (message) is the message displays in the flash alert
            // You can inclide html as message (not just text)
            // Third argument (custom-class) is the custom class for the perticular flash alert
        };

        // When the controller loads the function below is executed and the currentUser returned promise is set as
        //the value of $scope.user
        Auth.currentUser().then(function(user) {
            $scope.user = user;
        });
        $scope.$on('devise:new-registration', function(event, user){
            $scope.user = user;
        });
        $scope.$on('devise:login', function (event, user){
            $scope.user = user;
        });
        $scope.$on('devise:logout', function (event, user){
            $scope.user = {};
            $state.go('welcome');
            $scope.clear();
        });
    }])

authCtrl.js

angular.module('theNotesApp')
    .controller('authCtrl',['$scope', '$state', 'Auth',  function($scope, $state, Auth) {
        $scope.login = function() {
            Auth.login($scope.user).then(function () {
                $state.go('home');
            });
        };
        $scope.register = function() {
            Auth.register($scope.user).then(function () {

                $state.go('home');
            });
        };
    }])

application_controller.rb

![class ApplicationController < ActionController::Base
  # Prevent CSRF attacks by raising an exception.
  # For APIs, you may want to use :null_session instead.
  protect_from_forgery with: :exception

  respond_to :json

  before_action :configure_permitted_parameters, if: :devise_controller?

  def angular
    render 'layouts/application'
  end

  def configure_permitted_parameters
    devise_parameter_sanitizer.for(:sign_up) << :username
  end

end][3]

application.html.erb

<!DOCTYPE html>
<html>
<head>
  <title>The Notes App</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
  <!--jquerytag must be on top as it's required for bootstrap.min.js-->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <!--javascript plugins -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

  <%= stylesheet_link_tag    'application', media: 'all' %>
  <%= javascript_include_tag 'application' %>
  <%= csrf_meta_tags %>
</head>

<body ng-app="theNotesApp">
<nav class="navbar navbar-default"  ng-controller="navCtrl" ng-show="signedIn()"  >
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#/home">The Notes App</a>
    </div>
    <div class="collapse navbar-collapse"  id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#/home" >+ New Note</a></li>
        <li class="active" ng-hide="signedIn()"><a href="#register">Register <span class="sr-only">(current)</span></a></li>
        <li ng-hide="signedIn()"><a href="#/login">Login</a></li>
        <li ng-show="signedIn()"><a href="#/home">{{user.email}}</a></li>
        <li ng-show="signedIn()"><a ng-click="logout()">Logout</a></li>
      </ul>
    </div>
  </div>
</nav>


<ui-view></ui-view>


</body>
</html>

welcome.html

<div class="intro-header fadein">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="intro-message" style="color: black">
                    <h1>The Notes App</h1>
                    <h3>Access your notes anywhere, anytime!</h3>

                    <hr class="intro-divider">
                    <ul class="list-inline intro-social-buttons">
                        <li>
                            <a href="#/login" class="btn btn-default btn-lg"><i class="fa fa-twitter fa-fw"></i> <span class="network-name">Login</span></a>
                        </li>
                        <li>
                            <a href="#/register" class="btn btn-default btn-lg"><i class="fa fa-github fa-fw"></i> <span class="network-name">register</span></a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="col-lg-12" >
            </div>
        </div>
    </div>
    <!-- /.container -->
</div>
Tags:

2

Answers


  1. 0

    If my guess is right, signedIn() function will be fire up “sign_in.json” call.

    If yes then it is due to ng-show=”signedIn()” / ng-hide=”signedIn()” that you have in application.html.erb.

    Ng-show & ng-hide will be evaluated when the page is parsed.

    Login or Signup to reply.
  2. 0

    In navCtrl.js you have:

    Auth.currentUser().then(function(user) {
  $scope.user = user;
});

    This is responsible for one of the sign-in attempt.

    I don’t know where the other attempt is from. I would advise you to check for a similar call by running grep -r Auth.currentUser app in you Rails root folder.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search