Nuxtjs auth not working, I am using Laravel sanctum on front end back both - laravel

Question

I am building a web application, on the front end side I am using Nuxt js (Laravel sanctum package) and on the back end side I am using Laravel sanctum
I configure the front-end and back-end both, cookies are also generating correctly but I unable to hit the Laravel route. When I send the request it return 200 code with the cookie but Laravel method return nothing, it's means that my app is not hitting the Laravel method. After clicking on the login button I am redirected to the dashboard but console return no response with no error.
My login page headers
Request URL: http://localhost:3000/http://localhost:8000/api/admin/login
Request Method: POST
Status Code: 200 OK
Remote Address: 127.0.0.1:3000
Referrer Policy: strict-origin-when-cross-origin
Accept-Ranges: none
Connection: keep-alive
Content-Length: 2779
Content-Type: text/html; charset=utf-8
Date: Mon, 24 May 2021 16:08:05 GMT
ETag: "adb-BuJ98IeCR24JYV5bINxcPHcMBsc"
Accept: application/json
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9,la;q=0.8,mt;q=0.7,id;q=0.6,pl;q=0.5,fr;q=0.4
Connection: keep-alive
Content-Length: 2
Content-Type: application/json
Cookie: auth.strategy=laravelSanctum; auth._token_expiration.laravelSanctum=false; auth._token.laravelSanctum=false
Host: localhost:3000
Origin: http://localhost:3000
Referer: http://localhost:3000/admin/login
sec-ch-ua: " Not A;Brand";v="99", "Chromium";v="90", "Google Chrome";v="90"
sec-ch-ua-mobile: ?0
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-origin
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.212 Safari/537.36
X-Requested-With: XMLHttpRequest
Api.php
Route::prefix('admin')->group(function(){
Route::post('/login', [LoginController::class, 'login'])->name('admin.login');
});
LoginController.php
namespace App\Http\Controllers\Admin;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
class LoginController extends Controller
{
public function login(Request $request)
{
return "Login Success";// Just for testing
}
}
nuxt.config.js
modules: [
'bootstrap-vue/nuxt',
'#nuxtjs/axios',
'#nuxtjs/auth-next'
],
auth: {
strategies: {
'laravelSanctum': {
provider: 'laravel/sanctum',
url: '/http://localhost:8000',
endpoints:{
login:{
url:'/api/admin/login',
withCredentials: true,
method: 'post',
},
logout:{
url:'admin/logout'
},
user:{
url:'/user'
},
},
user:{
property:Array
}
},
},
redirect:{
login: '/admin/login',
logout: '/',
home: '/'
}
},
Login.vue
<template>
<div>
<index />
<b-container>
<b-row>
<b-col cols="*" sm="*" md="6" lg="6" class="mx-auto mt-5 offset-2">
<b-card title="Login Page">
<b-form>
<b-form-group>
<label for="text-email">Email</label>
<b-form-input type="email" v-model="form.email" aria-describedby="email-help-block"></b-form-input>
</b-form-group>
<b-form-group>
<label for="text-password">Password</label>
<b-form-input type="password" v-model="form.password" aria-describedby="password-help-block"></b-form-input>
</b-form-group>
<b-form-group>
<b-button type="submit" #click.prevent="login()" block variant="primary">Login</b-button>
</b-form-group>
</b-form>
</b-card>
</b-col>
</b-row>
</b-container>
</div>
</template>
<script>
import index from '../index.vue'
export default {
components: { index },
data(){
return {
form:{
email: '',
password: '',
}
}
},
methods:{
async login(){
await this.$auth.loginWith('laravelSanctum', {
data: {
email: this.email,
password: this.password
}
})
.then( (response) => {
this.$router.push('/admin/dashboard')
console.log( response );
})
.catch( (error) => {
console.log( error );
})
}
}
}
</script>
package.json
"dependencies": {
"#nuxtjs/auth-next": "5.0.0-1620773067.c356fed",
"bootstrap": "^4.6.0",
"bootstrap-vue": "^2.21.2",
"core-js": "^3.9.1",
"nuxt": "^2.15.3"
},

Answer 1

My request URL is invalid, the spa domain added in the URL that's why my spa is not sending requests to the server.
Request URL: http://localhost:3000/http://localhost:8000/api/admin/login
TO
Request URL: http://localhost:8000/api/admin/login
That works fine.