[@nuxtjs/auth-next] URL forced onto user endpoint causing Errors - laravel/passport

[AAllport]

Version

5.0.0-1602966760.822bc05

Reproduction link

http://thisdoesnotexist.co.uk/

Steps to reproduce

I have a containerised NuxtJs application with a Laravel backend.
There are 2 different URLs for accessing the laravel server, since
I'm having some issue getting the "user" after login.

Auth Config:

{
  proxy: {
    '/api': { target: upstream.internal },
  },
  auth: {
    redirect: {
      login: '/auth/login',
      logout: '/auth/logout',
      home: '/dashboard',
    },
    strategies: {
      'platform-api': {
        provider: 'laravel/passport',
        grantType: 'password',
        endpoints: {
          user: {
            url: '/api/user',
            baseURL: 'upstream.external',
          },
        },
        url: upstream.internal,
        clientId: '<<REDACTED>>',
        clientSecret:  '<<REDACTED>>',
      },
    },
}

What is expected ?

The user endpoint should either be proxied, as to be accessible on via the internal URL. (preferred)
Or
The user endpoint should respect the URL given to it

What is actually happening?

auth.url is being prepended to auth.endpoints.url, causing the newly constructed URL to be invalid

Additional comments?

I'm aware that one option is to use sanctum, but I personally disagree with the way it works and would make our setup rather segmented for different clients

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

[JoaoPedroAS51]

Hi @AAllport! Sorry for the delay.

To proxy the endpoint you need to set the url property to your proxy path, in your case /api.

Your config should look like this:

{
  proxy: {
    '/api': { target: upstream.internal },
  },
  auth: {
    redirect: {
      login: '/auth/login',
      logout: '/auth/logout',
      home: '/dashboard',
    },
    strategies: {
      'platform-api': {
        provider: 'laravel/passport',
        grantType: 'password',
        endpoints: {
          user: {
            url: '/api/user',
            baseURL: 'upstream.external',
          },
        },
        url: '/api', // <- Your proxy path
        clientId: '<<REDACTED>>',
        clientSecret:  '<<REDACTED>>',
      },
    },
}

Note: If you update to the latest version of auth v5, you need to change the provider to laravelPassport

You can also take a look at the demo config

[AAllport]

Ahhhh, seems obvious now 🤦‍♂️.
Will test over the next few days and report back!

[AAllport]

Updated to "@nuxtjs/auth-next": "5.0.0-1608347545.4014627" set provider: 'laravelPassport',

Still having a few issues,
Putting the /api in URL resulted in the oauth endpoints being /api/oauth (as opposed to /oauth) the following error.

Tried a few solutions:

• Adding a proxy for /oauth and setting url to /
• Adding a proxy for /prox to / with a path rewrite, and setting the url to /prox

And I get the following error:

{
  "error": {
    "message": "Cannot read property 'status' of undefined",
    "name": "TypeError",
    "frames": [
      {
        "file": "node_modules/@nuxtjs/auth-next/dist/module.js",
        "method": null,
        "line": 153,
        "column": 43,
        "context": {
          "start": 148,
          "pre": "            Accept: \"application/json\"\n          }\n        }).then((response) => {\n          res.end(JSON.stringify(response.data));\n        }).catch((error) => {",
          "line": "          res.statusCode = error.response.status;",
          "post": "          res.end(JSON.stringify(error.response.data));\n        });\n      });\n    }\n  });"
        },
        "lang": "js",
        "open": "/__open-in-editor?file=/usr/src/app/node_modules/@nuxtjs/auth-next/dist/module.js:153:43"
      },
      {
        "file": "node:internal/process/task_queues",
        "method": "processTicksAndRejections",
        "line": 93,
        "column": 5,
        "context": {},
        "lang": "js"
      }
    ]
  },
  "hasInternal": true
}

Taking a look at the Nginx & FPM logs looks like the request doesn't make it, I guess, it's not getting proxied.

For context. I'm working in a container environment. The upstream object looks as follows:

const upstream = {
  internal: process.env.api_url_internal ?? 'http://api.nginx',
  external: process.env.api_url_external ?? 'https://api.<mysite>.com',
  socket: process.env.api_ws_url_internal ?? 'http://echo:6001',
};

Due to it being a development environment, api_url_external doesn't resolve inside the container.

Tried setting url to upstream.internal, and I can authenticate. However, when it tries to resolve the user on the client-side, I get an ERR:NAME_NOT_RESOLVED, since api.nginx isn't accessible from the host.

Previously, I resolved it by creating a custom provider, like this:

// @ts-ignore
import {
  assignDefaults,
  initializePasswordGrantFlow,
} from '@nuxtjs/auth-next/dist/utils/provider';

export default function customPassport(nuxt: any, strategy: any) {
  const defaults = {
    name: 'laravelPassport',
    token: {
      property: 'access_token',
      type: 'Bearer',
      name: 'Authorization',
      maxAge: 60 * 60 * 24 * 365,
    },
    refreshToken: {
      property: 'refresh_token',
      data: 'refresh_token',
      maxAge: 60 * 60 * 24 * 30,
    },
    user: {
      property: false,
    },
  };
  assignDefaults(strategy, {
    ...defaults,
    scheme: 'refresh',
    endpoints: {
      token: strategy.url + '/oauth/token',
      login: {
        baseURL: '',
      },
      refresh: {
        baseURL: '',
      },
      logout: false,
      user: {
        url: '/api/user',
        baseUrl: '',
      },
    },
    grantType: 'password',
  });
  // assignAbsoluteEndpoints(strategy);
  initializePasswordGrantFlow(nuxt, strategy);
}

But it looks like some changes mean this no-longer works. (Tried using @nuxtjs/auth-next/dist/module but getting a module_1.assignDefaults is not a function)

For now, going to downgrade to 5.0.0-1602966760.822bc05 so I can get that export back.
Set URL to upstream.internal, downside though. The user call on the front-end doesn't proxy (causing a CORS preflight). But it works, for now
I do appreciate your support though!

[JoaoPedroAS51]

@AAllport

I think we forgot to add path rewrite to /api proxy.

Try the following config:

{
  proxy: {
    '/api': { target: upstream.internal, pathRewrite: { '^/api': '/' } },
  },
  auth: {
    redirect: {
      login: '/auth/login',
      logout: '/auth/logout',
      home: '/dashboard',
    },
    strategies: {
      'platform-api': {
        provider: 'laravelPassport',
        grantType: 'password',
        endpoints: {
          user: {
            url: '/api/api/user', // <- If your laravel route has /api, then it needs /api two times as shown here, first is proxy, second is laravel route
            baseURL: 'upstream.external', // <- Try without this option to use proxy in user endpoint
          },
        },
        url: '/api', // <- Your proxy path
        clientId: '<<REDACTED>>',
        clientSecret:  '<<REDACTED>>',
      },
    },
}

Let me know if it worked!

And if it works, don't forget to update to latest version again. Important fix released today :)

[AAllport]

Version: "@nuxtjs/auth-next": "5.0.0-1608461079.ae1e5db"

Cfg:

{
proxy: {
    '/api': { target: upstream.internal, pathRewrite: { '^/api': '/' } },
    '/graphql': { target: upstream.internal },
    '/socket.io': { target: upstream.socket },
  },
  auth: {
    redirect: {
      login: '/auth/login',
      logout: '/auth/logout',
      home: '/dashboard#home',
      user: '/dashboard#user', // Wanted to know why redirects were doing their thing
    },
    strategies: {
      'platform-api': {
        name: 'platform-api',
        // provider: '~/plugins/passport', //Custom scheme, commented out
        provider: 'laravelPassport',
        grantType: 'password',
        endpoints: {
          user: { url: '/api/api/user' },
        },
        url: '/api',
        clientId: '<<REDACTED>>',
        clientSecret: '<<REDACTED>>',
      },
    },
    cookie: {
      options: {
        expires: 10,
      },
    },
    localStorage: false, // Was having some issues RE ssr, hence disabling the localstorage stuff (been here for a while)
  },
}

Cleared storage, error retrieving token:

{
  "error": {
    "message": "Cannot read property 'status' of undefined",
    "name": "TypeError",
    "frames": [
      {
        "file": "node_modules/@nuxtjs/auth-next/dist/module.js",
        "method": null,
        "line": 153,
        "column": 43,
        "context": {
          "start": 148,
          "pre": "            Accept: \"application/json\"\n          }\n        }).then((response) => {\n          res.end(JSON.stringify(response.data));\n        }).catch((error) => {",
          "line": "          res.statusCode = error.response.status;",
          "post": "          res.end(JSON.stringify(error.response.data));\n        });\n      });\n    }\n  });"
        },
        "lang": "js",
        "open": "/__open-in-editor?file=/usr/src/app/node_modules/@nuxtjs/auth-next/dist/module.js:153:43"
      },
      {
        "file": "node:internal/process/task_queues",
        "method": "processTicksAndRejections",
        "line": 93,
        "column": 5,
        "context": {},
        "lang": "js"
      }
    ]
  },
  "hasInternal": true
}

Going to see if I can do some digging, do a dump of the important variants will report back

[AAllport]

@JoaoPedroAS51 Is there any reason we're not doing a serverMiddleare based proxy in a similar manner to initializePasswordGrantFlow?

[AAllport]

Think I've found the issue.
For the purposes of example. mysite is a constant value that refers to the projects name
I have it defined in the host's file that mysite.test resolves to the docker-machine's host.
Within the stack is a trafeik reverse proxy instance that directs api.mysite.test to the nginx container accessible internally on api.nginx (running my API)
The reverse proxy will also direct mysite.test to the nuxt container internal hostname: web

api.mysite.test and mysite.test will not resolve to api.nginx and web from the internal docker network
During the token request. It looks like the proxy will attempt to call itself via requrl, Which returns mysite.test which is a name that cannot be found.
This causes an error that isn't being handled correctly since error.response is undefined.

My suggested fix would be to handle the call to user in the same way as token, which would allow an absolute to be passed to url.
I do, however, recognise that this sort of application may not have originally been considered.
That being said, certainly feels like it's incorrect behaviour, which should be fixed.
I'll revert to my previous work-around in the meantime

Although, the mishandling of the error does seem to be a fairly obscure error, which should probably be looked at.

Happy to provide more info as to my use-case. And would love to contrib to OSS, so would love to write the fix myself, providing we were all clear on the plan.