3

I am following this tutorial - https://www.codetutorial.io/laravel-and-angularjs-token-based-auth-part1/.

I've modifed it a bit by making a separate laravel backend and another folder for angular frontend. As of now, I running this on localhost.

When logging in to my application, I get the following message :-

Satellizer Warning Expecting a token named token

Current user is undefined.

my controller for login -

public function authenticate(Request $request){
    $credentials = $request->only('email', 'password');

    try{
        if(! $token = JWTAuth::attempt($credentials)){
            return response()->json(['error' => 'invalid_credentials'], 401);
        }
    }
    catch(JWTException $e){
        return response()->json(['error' => 'could_not_create_token'], 500);
    }

    return response()->json(compact('token'));
}

public function getAuthenticatedUser(){

    try{
        if(! $user = JWTAuth::parseToken()->authenticate()){
            return response()->json(['user_not_found'], 404);
        }
    }
    catch(Tymon\JWTAuth\Exceptions\TokenExpiredException $e){
        return response()->json(['token_expired'], $e->getStatusCode());
    }
    catch(Tymon\JWTAuth\Exceptions\TokenInvalidException $e){
        return response()->json(['token_invalid'], $e->getStatusCode());
    }
    catch(Tymon\JWTAuth\Exceptions\JWTException $e){
        return response()->json(['token_absent'], $e->getStatusCode());
    }

    return response()->json(compact('user'));
}

Routes.php

Route::post('/api/register', 'RegisterController@register');
Route::post('api/authenticate', 'LoginController@authenticate');
Route::get('api/authenticate/user', 'LoginController@getAuthenticatedUser');

my angualr controller :-

reglogApp.controller('AuthController', function($scope, $http, $auth, $rootScope, $state){
$scope.email='';
$scope.password='';
$scope.newUser={};
$scope.loginError=false;
$scope.loginErrorText='';

$scope.register = function(){
    $scope.name = $scope.newUser.name;
    $scope.email = $scope.newUser.email;
    $scope.password = $scope.newUser.password;
    console.log($scope.name, $scope.email, $scope.password);
    $http.post('http://localhost/lab/reglog/public/api/register', $scope.newUser).success(function(data){
        console.log('Registered');
        $scope.email = $scope.newUser.email;
        $scope.password = $scope.newUser.password;
        $scope.login();
    });
}

$scope.login = function(){
    var credentials = {
        email: $scope.email,
        password: $scope.password
    }

    console.log('Entered Login Function', credentials);

    $auth.login(credentials)
        .then(function(){
            return $http.get('http://localhost/lab/reglog/public/api/authenticate/user');
        }, function(error){
            $scope.loginError = true;
            $scope.loginErrorText = error.data.error;
            console.log('Login Error', $scope.loginErrorText);
        })
        .then(function(response){
            $rootScope.currentUser = response.data.user;
            $scope.loginError = false;
            $scope.loginErrorText = '';
            console.log('Current User', $rootScope.currentUser);
            $state.go('dashboard');
        });
}
});
Stacy J
  • 2,721
  • 15
  • 58
  • 92

1 Answers1

0

Satellizer expects a top level property in your post request json called "token", it cannot be inside another object in your json, it must be at the top level thus:

{
    token: "<your JWT token>",
    user:{
           ...
          }
}

This is the only time I've run into this error. It must also be included in every authenticated request to your API (obviously).

Joe
  • 4,618
  • 3
  • 28
  • 35