CODEWITHSUNDEEP
laravelvue.jsaxioslaravel-sanctum
Hamza Radouan
Hamza Radouan

Reputation: 152

How do I fix the "401 Unauthorized" error with Laravel 8 Sanctum and VueJS 3?

So I have this Laravel 8 project with VueJS 3 in the frontend, and I'm running it on my localhost
And I'm using Sanctum for my authentication.
The Login and Sign Up process works fine, but when I go to a dashboard and I try to add something to my database it gives me the 401 Unauthorized error.

Laravel:

EDIT: UserController

public function login(Request $request)
    {
        $credentials = [
            'email' => $request->email,
            'password' => $request->password,
        ];

        if (Auth::attempt($credentials)) {
            $success = true;
            $user = User::where('email', $credentials['email'])->first();
            $token = $user->createToken("authToken")->plainTextToken;
        } else {
            $success = false;
        }

        $response = [
            'success' => $success,
            'access_token' => $token,
        ];
        return response()->json($response);
    }

web.php

Route::get('/{any}', function () {
    return view('welcome');
})->where('any', '.*');

api.php

// Auth
Route::post('login', [UserController::class, 'login']);
Route::post('register', [UserController::class, 'register']);
Route::post('logout', [UserController::class, 'logout'])->middleware('auth:sanctum');

// Niveau
Route::group(['prefix' => 'niveaux', 'middleware' => 'auth:sanctum'], function () {
    Route::get('/', [NiveauScolaireController::class, 'index']);
    Route::post('add', [NiveauScolaireController::class, 'add']);
    Route::get('edit/{id}', [NiveauScolaireController::class, 'edit']);
    Route::post('update/{id}', [NiveauScolaireController::class, 'update']);
    Route::delete('delete/{id}', [NiveauScolaireController::class, 'delete']);
});

cors.php

'paths' => ['api/*', 'sanctum/csrf-cookie'],
'allowed_methods' => ['*'],
'allowed_origins' => ['*'],
'allowed_origins_patterns' => [],
'allowed_headers' => ['*'],
'exposed_headers' => [],
'max_age' => 0,
'supports_credentials' => true,

sanctum.php

'stateful' => explode(',', env('SANCTUM_STATEFUL_DOMAINS', sprintf(
    'SANCTUM_STATEFUL_DOMAINS',
    'localhost,localhost:3000,127.0.0.1,127.0.0.1:8000,::1',
    env('APP_URL') ? ',' . parse_url(env('APP_URL'), PHP_URL_HOST) : ''
))),

session.php

'domain' => env('SESSION_DOMAIN', null),

So that's what I set up for the Laravel side.

VueJS

app.js

import { createApp } from "vue";
import App from "./App.vue";
import router from "./Router/index";
import axios from "axios";
const app = createApp(App);
app.config.globalProperties.$axios = axios;
app.use(router);
app.mount("#app");

bootsrap.js

window.axios = require("axios");
window.axios.defaults.headers.common["X-Requested-With"] = "XMLHttpRequest";
windoow.axios.defaults.withCredentials = true;

Login component

this.$axios.get("/sanctum/csrf-cookie").then((res) => {
    this.$axios
        .post("api/login", {
              email: this.email,
              password: this.password,
        })
        .then((res) => {
            if (res.data.success) {
                this.$router.push({ name: "Dashboard" });
            } else {
                console.log("Error: " + res.data.message);
            }
        })
        .catch(function (error) {
            console.log("error :>> ", error);
        });
    });

Here my request for sanctum/csrf-cookie is going well and I’ll receive Cookies, the login works fine, it gets the user from the database, and then it redirects me to the dashboard.

Problem
Now here when I try to send a request to (api/niveaux/add) the request is sent, but I get a 401 Unauthorized error with a {"message":"Unauthenticated."} response.

Dashboard component

this.$axios
    .post("api/niveaux/add", {
        nom: this.niveau,
    })
    .then((res) => {
        if (res.data.success) {
            alert(res.data.message);
        } else {
            alert(res.data.message);
        }
    })
    .catch(function (error) {
        console.log("error :>> ", error);
    });

Upvotes: 4

Views: 12929

Answers (4)

Abdulhafiz Ayobami Abdulfatai
Abdulhafiz Ayobami Abdulfatai

Reputation: 1

When I experienced this, I traced and compared changes to an existing working project

'stateful' => explode(',', env('SANCTUM_STATEFUL_DOMAINS', sprintf(
    'SANCTUM_STATEFUL_DOMAINS',
    'localhost,localhost:3000,127.0.0.1,127.0.0.1:8000,::1',
    env('APP_URL') ? ',' . parse_url(env('APP_URL'), PHP_URL_HOST) : ''
))),

in config/sanctum.php had been changed, I just replaced it with the old code

'stateful' => explode(',', env(
    'SANCTUM_STATEFUL_DOMAINS',
    'localhost,127.0.0.1,127.0.0.1:8000,::1,' . parse_url(env('APP_URL'), PHP_URL_HOST)
)),

Upvotes: 0

Wilson Oshidipe
Wilson Oshidipe

Reputation: 1

noticed a typo here:


window.axios = require("axios");
window.axios.defaults.headers.common["X-Requested-With"] = "XMLHttpRequest";
windoow.axios.defaults.withCredentials = true;

the last "windoow" was spelt wrong.

Upvotes: 0

Hedayatullah Sarwary
Hedayatullah Sarwary

Reputation: 2844

I think you are accessing through localhost port 8000, but in your stateful param under sanctum config, there is no localhost:8000. The config uses $_SERVER['SERVER_NAME'] so it actually looks for the exact content while accessing it.

sanctum.php

'stateful' => explode(',', env('SANCTUM_STATEFUL_DOMAINS', sprintf(
    'SANCTUM_STATEFUL_DOMAINS',
    'localhost,localhost:3000,127.0.0.1,127.0.0.1:8000,::1',
    'localhost:8000',
    env('APP_URL') ? ',' . parse_url(env('APP_URL'), PHP_URL_HOST) : ''
))),

Upvotes: 1

fevid
fevid

Reputation: 743

you need to send you access_token in every request that has middleware('auth:sanctum') in laravel. you can find access_token inside the cookie you get after logging in. (might have different name like token)

axios.defaults.headers.common['Authorization'] = `Bearer ${access_token}`

or

axios.defaults.headers.common['Authorization'] = `${access_token}`

gotta do the trick

Upvotes: 3

Related Questions