Auth-module: NuxtServerError with Laravel.passport callback

Created on 21 Dec 2019 · 17Comments · Source: nuxt-community/auth-module

Version

v4.8.4

Reproduction link

https://codepen.io/pcasaspere/pen/mdymJxW

Steps to reproduce

Version

4.8.4

Steps to reproduce

Config nuxt.config:
~
auth: {
// localStorage: false,
redirect: {
login: '/login',
logout: '/login',
home: '/',
},
strategies: {
'laravel.passport': {
url: process.env.API_BASE_URL,
client_id: process.env.API_OAUTH_CLIENT_ID,
client_secret: process.env.API_OAUTH_CLIENT_SECRET,
},
}
},
~
In view /login.vue add method login and call in mounted:
~
methods: {
login(){
this.$auth.loginWith('laravel.passport');
}
~
this.$auth.loginWith('laravel.passport'); redirect to my Laravel Login form.
Laravel authorize my user, and redirect to Nuxt callback route with correct code in url's query.

Nuxt call to internal http://127.0.0.1:3000/_auth/oauth/laravel.passport/authorize
Nuxt response with error 500 with this data:
~
{
"error": {
"message": "Request failed with status code 401",
"name": "NuxtServerError",
"frames": [
{
"file": "node_modules/axios/lib/core/createError.js",
"method": "createError",
"line": 16,
"column": 15,
"context": {
"start": 11,
"pre": " * @param {Object} [request] The request.n * @param {Object} [response] The response.n * @returns {Error} The created error.n */nmodule.exports = function createError(message, config, code, request, response) {",
"line": " var error = new Error(message);",
"post": " return enhanceError(error, config, code, request, response);n};n"
},
"lang": "js",
"open": "/__open-in-editor?file=/home/casas/dev/fitvium-app/app/node_modules/axios/lib/core/createError.js:16:15"
},
{
"file": "node_modules/axios/lib/core/settle.js",
"method": "settle",
"line": 17,
"column": 12,
"context": {
"start": 12,
"pre": "module.exports = function settle(resolve, reject, response) {n var validateStatus = response.config.validateStatus;n if (!validateStatus || validateStatus(response.status)) {n resolve(response);n } else {",
"line": " reject(createError(",
"post": " 'Request failed with status code ' + response.status,n response.config,n null,n response.request,n response"
},
"lang": "js",
"open": "/__open-in-editor?file=/home/casas/dev/fitvium-app/app/node_modules/axios/lib/core/settle.js:17:12"
},
{
"file": "node_modules/axios/lib/adapters/http.js",
"method": "IncomingMessage.handleStreamEnd",
"line": 237,
"column": 11,
"context": {
"start": 232,
"pre": " if (config.responseType !== 'arraybuffer') {n responseData = responseData.toString(config.responseEncoding);n }nn response.data = responseData;",
"line": " settle(resolve, reject, response);",
"post": " });n }n });nn // Handle errors"
},
"lang": "js",
"open": "/__open-in-editor?file=/home/casas/dev/fitvium-app/app/node_modules/axios/lib/adapters/http.js:237:11"
},
{
"file": "events.js",
"method": "IncomingMessage.emit",
"line": 203,
"column": 15,
"context": {},
"lang": "js"
},
{
"file": "domain.js",
"method": "IncomingMessage.EventEmitter.emit",
"line": 448,
"column": 20,
"context": {},
"lang": "js"
},
{
"file": "_stream_readable.js",
"method": "endReadableNT",
"line": 1143,
"column": 12,
"context": {},
"lang": "js"
},
{
"file": "internal/process/next_tick.js",
"method": "process._tickCallback",
"line": 63,
"column": 19,
"context": {},
"lang": "js"
}
]
},
"hasInternal": true
}
~

_{This bug report is available on Nuxt community (#c462)}

bug

Source

pcasaspere

🚀1 ❤1 👍1

Most helpful comment

Hi @devondahon! If I'm not wrong, this error is because your callback route is not matching. I see that you set callback to http://localhost:3000/auth/callback. Then add:

auth: {
  redirect: {
    callback: '/auth/callback'
  }
}

JoaoPedroAS51 on 16 Apr 2020

👍2 ❤1

All 17 comments

Me too!!
why post to :
http://localhost:3000/_auth/oauth/laravel.passport/authorize

{
  "error": {
    "message": "unable to verify the first certificate",
    "name": "NuxtServerError",
    "frames": [
      {
        "file": "_tls_wrap.js",
        "method": "TLSSocket.onConnectSecure",
        "line": 1475,
        "column": 34,
        "context": {},
        "lang": "js"
      },
      {
        "file": "events.js",
        "method": "TLSSocket.emit",
        "line": 321,
        "column": 20,
        "context": {},
        "lang": "js"
      },
      {
        "file": "domain.js",
        "method": "TLSSocket.EventEmitter.emit",
        "line": 485,
        "column": 12,
        "context": {},
        "lang": "js"
      },
      {
        "file": "_tls_wrap.js",
        "method": "TLSSocket._finishInit",
        "line": 918,
        "column": 8,
        "context": {},
        "lang": "js"
      },
      {
        "file": "_tls_wrap.js",
        "method": "TLSWrap.ssl.onhandshakedone",
        "line": 688,
        "column": 12,
        "context": {},
        "lang": "js"
      }
    ]
  },
  "hasInternal": false
}

MilesWuCode on 5 Mar 2020

👍1

I have the same problem, anyone has a solution to fix it ?

I'm using Laravel 7.3 with Passport and Nuxt in SPA mode.

{
  "error": {
    "message": "Request failed with status code 401",
    "name": "NuxtServerError",
    "frames": [
      {
        "file": "node_modules/axios/lib/core/createError.js",
        "method": "createError",
        "line": 16,
        "column": 15,
        "context": {
          "start": 11,
          "pre": " * @param {Object} [request] The request.\n * @param {Object} [response] The response.\n * @returns {Error} The created error.\n */\nmodule.exports = function createError(message, config, code, request, response) {",
          "line": "  var error = new Error(message);",
          "post": "  return enhanceError(error, config, code, request, response);\n};\n"
        },
        "lang": "js",
        "open": "/__open-in-editor?file=/Users/me/code/nuxt-spa/node_modules/axios/lib/core/createError.js:16:15"
      },
      {
        "file": "node_modules/axios/lib/core/settle.js",
        "method": "settle",
        "line": 17,
        "column": 12,
        "context": {
          "start": 12,
          "pre": "module.exports = function settle(resolve, reject, response) {\n  var validateStatus = response.config.validateStatus;\n  if (!validateStatus || validateStatus(response.status)) {\n    resolve(response);\n  } else {",
          "line": "    reject(createError(",
          "post": "      'Request failed with status code ' + response.status,\n      response.config,\n      null,\n      response.request,\n      response"
        },
        "lang": "js",
        "open": "/__open-in-editor?file=/Users/me/code/nuxt-spa/node_modules/axios/lib/core/settle.js:17:12"
      },
      {
        "file": "node_modules/axios/lib/adapters/http.js",
        "method": "IncomingMessage.handleStreamEnd",
        "line": 236,
        "column": 11,
        "context": {
          "start": 231,
          "pre": "          if (config.responseType !== 'arraybuffer') {\n            responseData = responseData.toString(config.responseEncoding);\n          }\n\n          response.data = responseData;",
          "line": "          settle(resolve, reject, response);",
          "post": "        });\n      }\n    });\n\n    // Handle errors"
        },
        "lang": "js",
        "open": "/__open-in-editor?file=/Users/me/code/nuxt-spa/node_modules/axios/lib/adapters/http.js:236:11"
      },
      {
        "file": "events.js",
        "method": "IncomingMessage.emit",
        "line": 215,
        "column": 7,
        "context": {},
        "lang": "js"
      },
      {
        "file": "domain.js",
        "method": "IncomingMessage.EventEmitter.emit",
        "line": 476,
        "column": 20,
        "context": {},
        "lang": "js"
      },
      {
        "file": "_stream_readable.js",
        "method": "endReadableNT",
        "line": 1183,
        "column": 12,
        "context": {},
        "lang": "js"
      },
      {
        "file": "internal/process/task_queues.js",
        "method": "processTicksAndRejections",
        "line": 80,
        "column": 21,
        "context": {},
        "lang": "js"
      }
    ]
  },
  "hasInternal": true
}

gilles6 on 7 Apr 2020

🚀1 ❤1 👍1

Hi @devondahon! I made some tests using Laravel Passport and this error means that Laravel couldn't issue the token. The error message is invalid_credentials.

Are you using the client generated by passport:install? Because it generates a Personal Access Client and a Password Grant Client, and both are not correct for this flow.

You should run passport:client instead, to generate a normal client. You can check the client in your database and make sure that both values (Personal and Password) are disabled :)

JoaoPedroAS51 on 13 Apr 2020

If I do that, I get the following error in Laravel right after logging in:

{
  "error":"invalid_client",
  "error_description":"Client authentication failed",
  "message":"Client authentication failed"
}

➜  backend $ php artisan passport:client

 Which user ID should the client be assigned to?:
 > my-client-id

 What should we name the client?:
 > my-client-name

 Where should we redirect the request after authorization? [http://localhost/auth/callback]:
 > http://localhost:3000/auth/callback                                       

New client created successfully.
Client ID: 8
Client secret: H0SOYOKN9IrRs786hk4xS6p6tYOjUJZTFsOzc4GZ
➜  backend $

nuxt.config.js:

auth: {
  // redirect: {
  //   login: '/login',
  //   logout: '/login',
  //   home: '/'
  // },
  strategies: {
    'laravel.passport': {
      url: 'http://backend.test',
      client_id: 8,
      client_secret: 'H0SOYOKN9IrRs786hk4xS6p6tYOjUJZTFsOzc4GZ',
      userinfo_endpoint: 'http://backend.test/api/user'
    }
  }
}

gilles6 on 16 Apr 2020

Hi @devondahon! If I'm not wrong, this error is because your callback route is not matching. I see that you set callback to http://localhost:3000/auth/callback. Then add:

auth: {
  redirect: {
    callback: '/auth/callback'
  }
}

JoaoPedroAS51 on 16 Apr 2020

👍2 ❤1

Thanks a lot ! It works :D

gilles6 on 16 Apr 2020

😄1

I'm so happy to know it worked!! :smiley:

JoaoPedroAS51 on 16 Apr 2020

If I want to make any other request to this backend, I just need to send the token in the Bearer or is there a safer way to make a request ?

Also, is it using CORS ? Should I pass CORS stuffs in the request as well ?

gilles6 on 16 Apr 2020

The access token is automatically added to your $axios instance after a successful login. So any request made using $axios will have the authorization header.

And yes, it is using CORS. But you just need to configure cors.php config in your Laravel application. Allow your origin, methods and paths...

JoaoPedroAS51 on 17 Apr 2020

Note: Refresh tokens aren't supported yet. We are working on this feature in dev branch. So if you need to refresh tokens, then add "@nuxtjs/auth": "nuxt-community/auth-module#dev" to your package.json.

You can see the new docs at https://dev.auth.nuxtjs.org/

JoaoPedroAS51 on 17 Apr 2020

Great! Thank you very much!!

gilles6 on 17 Apr 2020

👍1

@JoaoPedroAS51
I have multiple Nuxt websites like foo.com and bar.com, they all have their own database with users table in a Laravel backend.
My guards and providers are configured as below in Laravel config/auth.php:

    'guards' => [
        'web' => [
            'driver' => 'session',
            'provider' => 'users',
        ],
        'api' => [
            'driver' => 'passport',
            'provider' => 'users'
        ],
        'foo' => [
            'driver' => 'passport',
            'provider' => 'foo_users'
        ],
        'bar' => [
            'driver' => 'passport',
            'provider' => 'bar_users'
        ],
    ],
    'providers' => [
        'users' => [
            'driver' => 'eloquent',
            'model' => App\Models\Backend\User::class,
        ],
        'foo_users' => [
            'driver' => 'eloquent',
            'model' => App\Models\Foo\User::class,
        ],
        'bar_users' => [
            'driver' => 'eloquent',
            'model' => App\Models\Bar\User::class,
        ]
    ],

How to set Nuxt authentication and Laravel settings to use foo guard with foo.com and bar guard with bar.com ?

gilles6 on 25 May 2020

Actually, what I would need is to use a password grant token, but I've read on stackoverflow that it's insecure.

There's use case on dev.to but the author doesn't use Nuxt Auth module because he think it's not flexible enough.

@JoaoPedroAS51
Is it possible to use Nuxt Auth with Laravel Passport Password Grant Tokens in a secure way ? And if yes, how should I configure nuxt.config.js ?

gilles6 on 27 May 2020

My problem is that I get a 404 with http://127.0.0.1:3000/_auth/oauth/laravel.passport/authorize.

This only happens after deploying with npm run build. It works perfectly with npm run dev.

Any help would be appreciated.

mviljoen on 23 Jul 2020

@JoaoPedroAS51
I finally found my answer here. I need to wait for Laravel Passport to get some new feature.

gilles6 on 24 Jul 2020

Closing here, as this is an old issue and has already been answered.

JoaoPedroAS51 on 18 Dec 2020

the problem still there ,"Method Illuminate\Auth\RequestGuard::attempt does not exist. if use session the api token does not work

tiggidoo on 24 Feb 2021

Was this page helpful?

0 / 5 - 0 ratings

Related issues

Request to https://<cognito domain>.auth.<cognito region>.amazoncognito.com/oauth2/token returns 400 response

eatyrghost · 3Comments

Silent Authentication (OpenID Connect prompt=none)

ishitatsuyuki · 4Comments

500 error when login fails with Passport password grant

aaronhuisinga · 3Comments

I want to set user information login with.

dasisyouyu · 3Comments

I need the token(s) to be fetched from the header instead of data of the request.

AhmedAtef07 · 3Comments