Custom Provider, getting 401 on redirect

[leo-petrucci]

I'm trying to set up a custom provider to login via an Invision Power Board forum, I'm halfway there but I've been getting 401 errors when requesting the token and I'm not sure how to fix it.

Invision Power Board does offer some (basic) docs on how to oauth but they're not great.

This is my provider thus far:

    {
      id: "ipb",
      name: "ipb",
      type: "oauth",
      authorization: {
        url: "https://www.example.net/oauth/authorize/",
        params: {
          scope: "profile",
          response_type: "code",
          client_id,
          redirect_uri: `${process.env.NEXTAUTH_URL}/api/auth/callback/ipb`,
        },
      },
      token: `https://www.example.net/oauth/token/`,
      userinfo: "https://www.example.net/api/core/me/",
      clientId: client_id,
      clientSecret,
      profile(profile) {
        console.log(profile);
        return {
          // @ts-expect-error
          id: profile.id,
        };
      },
    },

It successfully sends me to the authorization page and then redirects me to next-auth. Unfortunately it then fails after that with:

https://next-auth.js.org/errors#callback_oauth_error expected 200 OK, got: 401 Unauthorized OPError: expected 200 OK, got: 401 Unauthorized
    at processResponse (/home/leonardo/mci-servers-v2/node_modules/openid-client/lib/helpers/process_response.js:48:11)
    at Client.userinfo (/home/leonardo/mci-servers-v2/node_modules/openid-client/lib/client.js:1124:18)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async oAuthCallback (/home/leonardo/mci-servers-v2/.next/server/pages/api/auth/[...nextauth].js:1712:17)
    at async Object.callback (/home/leonardo/mci-servers-v2/.next/server/pages/api/auth/[...nextauth].js:2524:11)
    at async NextAuthHandler (/home/leonardo/mci-servers-v2/.next/server/pages/api/auth/[...nextauth].js:794:18)
    at async /home/leonardo/mci-servers-v2/.next/server/pages/api/auth/[...nextauth].js:874:32
    at async apiResolver (/home/leonardo/mci-servers-v2/node_modules/next/dist/next-server/server/api-utils.js:8:1)
    at async DevServer.handleApiRequest (/home/leonardo/mci-servers-v2/node_modules/next/dist/next-server/server/next-server.js:66:462)
    at async Object.fn (/home/leonardo/mci-servers-v2/node_modules/next/dist/next-server/server/next-server.js:58:580) {
  name: 'OAuthCallbackError'
}

I think it's because the token request is missing parameters. The whole process works if I make the request like this:

  const qs = require('querystring')

  const { data } = await axios.post(
    `https://www.example.net/oauth/token/`,
    qs.stringify({
      client_id: process.env.USER_CLIENT_ID,
      code, // code received from https://www.example.net/oauth/authorize/
      redirect_uri: process.env.REDIRECT_URI,
      client_secret: process.env.USER_CLIENT_SECRET,
      scope: 'profile',
      grant_type: 'authorization_code',
    }),
    {
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
      },
    },
  )

But I'm unsure how to pass these parameters to the token endpoint. I can see from the types that token can receive a code param, but surely that should be passed automatically from /authorize?

I think IPB needs these to be passed as a www-form-urlencoded body or it won't work. I haven't been able to find any workarounds unfortunately. Is there any way to get this working with next-auth?

[balazsorban44]

The issue seems to be when getting the profile:

    at Client.userinfo (/home/leonardo/mci-servers-v2/node_modules/openid-client/lib/client.js:1124:18)

Just a guess, but maybe try without a trailing slash /, like so: userinfo: "https://www.example.net/api/core/me". Maybe their backend doesn't handle the request with a trailing slash?

It's also possible that some of this would be needed here: #2717

I think client_id, code, redirect_uri, client_secret, grant_type are params you don't have to set yourself, but inferred by openid-client.

If you define authorization as an object, there is a request option, where you can create the request however you want. It could be useful to get it to work with that, but I'm certain you could do it without if openid-client is configured with #2717

It is available here: #2717 (comment) until not merged.

[leo-petrucci]

I've tested requesting to https://www.example.net/api/core/me/ via Postman and it works with and without trailing slash.

Why would making changes to authorization fix the userInfo?

[balazsorban44]

It might be the reason for 401. If you don't get a correct access_token for example, I would assume that the userinfo request would fail.

There are many ways authorization/token/userinfo requests can be constructed in OAuth, and that is what openid-client could/should simplify.

[leo-petrucci]

Ah, I assumed that if I couldn't get an access_token then the requests would fail earlier, while getting the token for example.

I'll try the PR release and see if it works! Thank you ♥

[leo-petrucci]

So, this is really weird but I think I know why it's happening thanks to some console logging on openid-client.

OpenID takes an options parameter when requesting the user:

    const response = await this.requestResource(targetUrl, accessToken, options);

options contains various info, including tokenType. That's received from the API issuing the token, and tells OpenID how to use the received token in the following request.

For whatever reason, IPB returns tokenType: bearer, rather than tokenType: Bearer. Unfortunately using bearer in lowercase causes the user request to 401.

That said I can't seem to get the option to be passed correctly :/

      userinfo: {
        url: "https://www.example.net/api/core/me",
        params: {
          tokens: {
            token_type: "Bearer",
          },
        },
      },

[leo-petrucci]

Scratch that, I misunderstood how to use it:

      userinfo: {
        request: async (token) => {
          return await axios
            .get(`https://www.example.net/api/core/me/`, {
              headers: {
                Authorization: `Bearer ${token.tokens.access_token}`,
              },
            })
            .then((res) => res.data);
        },
      },

This works!