Error 404 when login with nuxt auth and laravel passport

Question

I'm authenticating with Laravel Passport and my front end has been implemented with nuxt. I receive the following 404 error when sending a request with nuxt Auth to Backend:

{"message":"","exception":"Symfony\\Component\\HttpKernel\\Exception\\NotFoundHttpException","file":"D:\\temopo\\api-test\\vendor\\laravel\\framework\\src\\Illuminate\\Routing\\AbstractRouteCollection.php","line":43,"trace":[{"file":"D:\\temopo\\api-test\\vendor\\laravel\\framework\\src\\Illuminate\\Routing\\RouteCollection.php","line":162,"function":"handleMatchedRoute","class":"Illuminate\\Routing\\AbstractRouteCollection","type":"->"},{"file":"D:\\temopo\\api-test\\vendor\\laravel\\framework\\src\\Illuminate\\Routing\\Router.php","line":647,"function":"match","class":"Illuminate\\Routing\\RouteCollection","type":"->"},{"file":"D:\\temopo\\api-test\\vendor\\laravel\\framework\\src\\Illuminate\\Routing\\Router.php","line":636,"function":"findRoute","class":"Illuminate\\Routing\\Router","type":"->"},{"file":"D:\\temopo\\api-test\\vendor\\laravel\\framework\\src\\Illuminate\\Routing\\Router.php","line":625,"function":"dispatchToRoute","class":"Illuminate\\Routing\\Router","type":"->"},{"file":"D:\\temopo\\api-test\\vendor\\laravel\\framework\\src\\Illuminate\\Foundation\\Http\\Kernel.php","line":166,"function":"dispatch","class":"Illuminate\\Routing\\Router","type":"->"},{"file":"D:\\temopo\\api-test\\vendor\\laravel\\framework\\src\\Illuminate\\Pipeline\\Pipeline.php","line":128,"function":"Illuminate\\Foundation\\Http\\{closure}","class":"Illuminate\\Foundation\\Http\\Kernel","type":"->"},{"file":"D:\\temopo\\api-test\\vendor\\laravel\\framework\\src\\Illuminate\\Foundation\\Http\\Middleware\\TransformsRequest.php","line":21,"function":"Illuminate\\Pipeline\\{closure}","class":"Illuminate\\Pipeline\\Pipeline","type":"->"},{"file":"D:\\temopo\\api-test\\vendor\\laravel\\framework\\src\\Illuminate\\Foundation\\Http\\Middleware\\ConvertEmptyStringsToNull.php","line":31,"function":"handle","class":"Illuminate\\Foundation\\Http\\Middleware\\TransformsRequest","type":"->"},{"file":"D:\\temopo\\api-test\\vendor\\laravel\\framework\\src\\Illuminate\\Pipeline\\Pipeline.php","line":167,"function":"handle","class":"Illuminate\\Foundation\\Http\\Middleware\\ConvertEmptyStringsToNull","type":"->"},{"file":"D:\\temopo\\api-test\\vendor\\laravel\\framework\\src\\Illuminate\\Foundation\\Http\\Middleware\\TransformsRequest.php","line":21,"function":"Illuminate\\Pipeline\\{closure}","class":"Illuminate\\Pipeline\\Pipeline","type":"->"},{"file":"D:\\temopo\\api-test\\vendor\\laravel\\framework\\src\\Illuminate\\Foundation\\Http\\Middleware\\TrimStrings.php","line":40,"function":"handle","class":"Illuminate\\Foundation\\Http\\Middleware\\TransformsRequest","type":"->"},{"file":"D:\\temopo\\api-test\\vendor\\laravel\\framework\\src\\Illuminate\\Pipeline\\Pipeline.php","line":167,"function":"handle","class":"Illuminate\\Foundation\\Http\\Middleware\\TrimStrings","type":"->"},{"file":"D:\\temopo\\api-test\\vendor\\laravel\\framework\\src\\Illuminate\\Foundation\\Http\\Middleware\\ValidatePostSize.php","line":27,"function":"Illuminate\\Pipeline\\{closure}","class":"Illuminate\\Pipeline\\Pipeline","type":"->"},{"file":"D:\\temopo\\api-test\\vendor\\laravel\\framework\\src\\Illuminate\\Pipeline\\Pipeline.php","line":167,"function":"handle","class":"Illuminate\\Foundation\\Http\\Middleware\\ValidatePostSize","type":"->"},{"file":"D:\\temopo\\api-test\\vendor\\laravel\\framework\\src\\Illuminate\\Foundation\\Http\\Middleware\\PreventRequestsDuringMaintenance.php","line":86,"function":"Illuminate\\Pipeline\\{closure}","class":"Illuminate\\Pipeline\\Pipeline","type":"->"},{"file":"D:\\temopo\\api-test\\vendor\\laravel\\framework\\src\\Illuminate\\Pipeline\\Pipeline.php","line":167,"function":"handle","class":"Illuminate\\Foundation\\Http\\Middleware\\PreventRequestsDuringMaintenance","type":"->"},{"file":"D:\\temopo\\api-test\\vendor\\fruitcake\\laravel-cors\\src\\HandleCors.php","line":38,"function":"Illuminate\\Pipeline\\{closure}","class":"Illuminate\\Pipeline\\Pipeline","type":"->"},{"file":"D:\\temopo\\api-test\\vendor\\laravel\\framework\\src\\Illuminate\\Pipeline\\Pipeline.php","line":167,"function":"handle","class":"Fruitcake\\Cors\\HandleCors","type":"->"},{"file":"D:\\temopo\\api-test\\vendor\\fideloper\\proxy\\src\\TrustProxies.php","line":57,"function":"Illuminate\\Pipeline\\{closure}","class":"Illuminate\\Pipeline\\Pipeline","type":"->"},{"file":"D:\\temopo\\api-test\\vendor\\laravel\\framework\\src\\Illuminate\\Pipeline\\Pipeline.php","line":167,"function":"handle","class":"Fideloper\\Proxy\\TrustProxies","type":"->"},{"file":"D:\\temopo\\api-test\\vendor\\laravel\\framework\\src\\Illuminate\\Pipeline\\Pipeline.php","line":103,"function":"Illuminate\\Pipeline\\{closure}","class":"Illuminate\\Pipeline\\Pipeline","type":"->"},{"file":"D:\\temopo\\api-test\\vendor\\laravel\\framework\\src\\Illuminate\\Foundation\\Http\\Kernel.php","line":141,"function":"then","class":"Illuminate\\Pipeline\\Pipeline","type":"->"},{"file":"D:\\temopo\\api-test\\vendor\\laravel\\framework\\src\\Illuminate\\Foundation\\Http\\Kernel.php","line":110,"function":"sendRequestThroughRouter","class":"Illuminate\\Foundation\\Http\\Kernel","type":"->"},{"file":"D:\\temopo\\api-test\\public\\index.php","line":52,"function":"handle","class":"Illuminate\\Foundation\\Http\\Kernel","type":"->"},{"file":"D:\\temopo\\api-test\\server.php","line":21,"function":"require_once"}]}

my nuxt auth and axios config:

axios: {
    baseURL: 'http://localhost:8000/',
    header:{
      'content-type':'application/json'
    }
  },

  auth: {
    strategies: {
      laravelPassport: {
        provider: 'laravel/passport', // Using nuxtAuth laravel passport provider
        url: 'http://localhost:8000/',
        clientId: '1',
        client_secret: '****MPZAMzicKGjByb1hnTciqLScP7KUr7CyKgf', //Is the same as the value inside the database
        grantType: 'password'
      },
    }
  },

nuxt login mehtod and data

data() {
    return {
      login: {
        username: '',
        password: '',
      },
    }
  },
  methods: {
    async loginMethod() {
       await this.$auth.loginWith('laravelPassport',{ data: this.login })
    },
  },

Laravel API routes

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\Auth\LoginControlle;
use \App\Http\Controllers\Auth\SignupControlle;


Route::post('/login',LoginControlle::class);

Route::middleware('auth:api')->get('/user', function (Request $request) {
    return $request->user();
});

Answer 1

i had this problem and solved after one week.

in my opinion, use the proxy same below codes: let's coding ;-)

nuxt.config.js

axios: {
proxy: true,
baseURL: process.env.API_URL,

},

proxy: {
'/backend': {
  target: process.env.API_URL,
  pathRewrite: { '^/backend': '/' },
},

},

auth: {
redirect: {
  home: '/profile',
  login: '/profile',
  logout: '/',
},
strategies: {
  laravelPassportPasswordGrant: {
    name: 'authMakeup',
    provider: 'laravel/passport',
    url: '/backend',
    endpoints: {
      token : '/api/v1/confirmCode',
      user:{url:'/api/v1/user', method:'get'},
      logout:{url: '/api/v1/logout', method: 'post'}
    },
    clientId: process.env.PASSPORT_CLIENT_ID,
    clientSecret: process.env.PASSPORT_CLIENT_SECRET,
    grantType: 'password',
  },
},

},

in .env file:

API_URL="http://localhost:8000"
PASSPORT_CLIENT_ID=************
PASSPORT_CLIENT_SECRET=***********************

using:

this.$auth.loginWith("authMakeup", {
      data: params
    });

if you want to login by user & password not require override token in endpoint section. but i had want to login by mobile, override it to custom route example:

token : '/api/v1/confirmCode',