CODEWITHSUNDEEP
jqueryajaxlaravel-5csrfhttp-status-code-401
user3993570
user3993570

Reputation:

Laravel 5.4 + Ajax equals 401 Unauthenticated

Whenever I try to assign a route from my api.php File I get a 401: Unauthenticated-Error.

This is the route:

Route::group(['prefix' => 'v1', 'middleware' => 'auth:api'], function () {
    Route::post('admin/product-image-sort', 'ApiController@SaveProductImageSort')->name('api.save-product-image-sort');
});

Im calling this using Jquery Ajax:

<script>

        $('#sortable-image-container').sortable({
            items: '> .row > *',
            update: function (event, ui) {
                var data = $(this).sortable('serialize');
                console.log(data);
                $.ajax({
                    data: data,
                    type: 'POST',
                    url: "{{ route('api.save-product-image-sort') }}",
                    success: function (data) {
                        if(data == "success"){
                            $.notify({
                                icon: 'pe-7s-close-circle',
                                message: "Sucessfully saved the Image Sorting"
                            },{
                                type: 'success',
                                timer: 500
                            });
                        }
                    }
                });
            }
        });
    </script>

So this works flawless when excluding the 'middleware' => 'auth:api' part but I don't want to just allow accessing my internal api without any form of authentication.

What the api does is send an array of ids it got using a serialization of jQuery Ui's Sortable. The ApiController then foreachers through that and updated the sorting of every image of a specific product.

I've included the CSRF Token like stated in the Laravel Docs by putting csrf_token() into a meta-tag and attaching it to every Ajax request:

$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});

As I can also see in Chrome's network tab is that it adds two cookies to the request.

enter image description here

Upvotes: 8

Views: 18998

Answers (4)

Marco Benvenuto
Marco Benvenuto

Reputation: 11

you can add the 'api_token' attribute and field to the table user, in this case will use the Bearer token option:

you can use this documentation:

https://laravel.com/docs/5.8/api-authentication

and then using jquery, adding the 'Authorization' header, will be:

$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
        'Authorization': 'Bearer {{Auth::user()->api_token}}'
    }
});

Upvotes: 0

Csar Jefferson Aquino Maximili
Csar Jefferson Aquino Maximili

Reputation: 21

I have two solutions:

  1. Create a controller without using the auth middleware: $this->middleware(['auth']);

  2. Creating the route before the Route::group(['middleware' => 'auth'] in the routes/web.php file.

enter image description here

Upvotes: 0

Dharmesh Rakholia
Dharmesh Rakholia

Reputation: 1238

Let's take a look at the HomeController construct method. Is there a call that looks something like this?

$this->middleware(['auth']);

Upvotes: 1

ExCluSiv3
ExCluSiv3

Reputation: 98

The point is you aren't authenticated. The CSRF Token isn't an authentication token.

You will need a way of authenticating your users against the api and (for example) give them an unique auth token, which they send with each request, in order to be sure they are allowed to use your API.

Maybe this link may be helpful:

https://laracasts.com/discuss/channels/laravel/53-api-routes-auth-middleware-confusion

This part of the docs maybe helpful too. It's about HTTP basic authentication:

https://laravel.com/docs/5.4/authentication#http-basic-authentication

Especially the part "Stateless HTTP Basic Authentication"

Upvotes: 3

Related Questions