Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

LinkedIn Provider throwing error #5220

Closed
7 tasks
sfonua10 opened this issue Aug 25, 2022 · 21 comments · Fixed by #5236
Closed
7 tasks

LinkedIn Provider throwing error #5220

sfonua10 opened this issue Aug 25, 2022 · 21 comments · Fixed by #5236
Labels
bug Something isn't working providers

Comments

@sfonua10
Copy link

sfonua10 commented Aug 25, 2022

Provider type

LinkedIn

Environment

System:
OS: macOS 12.5
CPU: (8) arm64 Apple M1 Pro
Memory: 339.61 MB / 16.00 GB
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 16.14.0 - /usr/local/bin/node
Yarn: 1.22.18 - /usr/local/bin/yarn
npm: 8.3.1 - /usr/local/bin/npm
Browsers:
Chrome: 104.0.5112.101
Safari: 15.6
npmPackages:
next: 12.0.7 => 12.0.7
react: 17.0.2 => 17.0.2

Reproduction URL

https://github.com/sfonua10/linkedin-provider-issue/blob/main/.env.local.example

Describe the issue

After following configuration steps (https://next-auth.js.org/providers/linkedin), setting client id and client secret in .env file, and adding the LinkedInProvider in [...nextauth].ts file, I receive the following error after trying to log in with linkedin in the browser:

[next-auth][error][SIGNIN_OAUTH_ERROR]
https://next-auth.js.org/errors#signin_oauth_error client_id is required {
error: {
message: 'client_id is required',
stack: 'TypeError: client_id is required\n' +
' at new BaseClient (/Users/saiafonua/workspace/linkedin-provider-issue/node_modules/openid-client/lib/client.js:178:13)\n' +
' at new Client (/Users/saiafonua/workspace/linkedin-provider-issue/node_modules/openid-client/lib/client.js:1808:7)\n' +
' at openidClient (/Users/saiafonua/workspace/linkedin-provider-issue/node_modules/next-auth/core/lib/oauth/client.js:28:18)\n' +
' at getAuthorizationUrl (/Users/saiafonua/workspace/linkedin-provider-issue/node_modules/next-auth/core/lib/oauth/authorization-url.js:65:49)\n' +
' at Object.signin (/Users/saiafonua/workspace/linkedin-provider-issue/node_modules/next-auth/core/routes/signin.js:37:60)\n' +
' at NextAuthHandler (/Users/saiafonua/workspace/linkedin-provider-issue/node_modules/next-auth/core/index.js:238:39)\n' +
' at runMicrotasks ()\n' +
' at processTicksAndRejections (node:internal/process/task_queues:96:5)\n' +
' at async NextAuthNextHandler (/Users/saiafonua/workspace/linkedin-provider-issue/node_modules/next-auth/next/index.js:23:19)\n' +
' at async /Users/saiafonua/workspace/linkedin-provider-issue/node_modules/next-auth/next/index.js:59:32',
name: 'TypeError'
},
providerId: 'linkedin',
message: 'client_id is required'
}

I get this error too on another branch which is similar:

[next-auth][error][OAUTH_CALLBACK_ERROR]
https://next-auth.js.org/errors#oauth_callback_error invalid_request (A required parameter "client_secret" is missing) {
error: {
message: 'invalid_request (A required parameter "client_secret" is missing)',
stack: 'OPError: invalid_request (A required parameter "client_secret" is missing)\n' +
' at processResponse (/Users/saiafonua/workspace/alma-business/node_modules/openid-client/lib/helpers/process_response.js:38:13)\n' +
' at Client.grant (/Users/saiafonua/workspace/alma-business/node_modules/openid-client/lib/client.js:1325:22)\n' +
' at runMicrotasks ()\n' +
' at processTicksAndRejections (node:internal/process/task_queues:96:5)\n' +
' at async Client.oauthCallback (/Users/saiafonua/workspace/alma-business/node_modules/openid-client/lib/client.js:601:24)\n' +
' at async oAuthCallback (/Users/saiafonua/workspace/alma-business/node_modules/next-auth/core/lib/oauth/callback.js:116:16)\n' +
' at async Object.callback (/Users/saiafonua/workspace/alma-business/node_modules/next-auth/core/routes/callback.js:50:11)\n' +
' at async NextAuthHandler (/Users/saiafonua/workspace/alma-business/node_modules/next-auth/core/index.js:186:28)\n' +
' at async NextAuthNextHandler (/Users/saiafonua/workspace/alma-business/node_modules/next-auth/next/index.js:23:19)\n' +
' at async /Users/saiafonua/workspace/alma-business/node_modules/next-auth/next/index.js:59:32',
name: 'OPError'
},
providerId: 'linkedin',
message: 'invalid_request (A required parameter "client_secret" is missing)'
}
[next-auth][error][CALLBACK_OAUTH_ERROR]
https://next-auth.js.org/errors#callback_oauth_error invalid_request (A required parameter "client_secret" is missing) OPError: invalid_request (A required parameter "client_secret" is missing)
at processResponse (/Users/saiafonua/workspace/alma-business/node_modules/openid-client/lib/helpers/process_response.js:38:13)
at Client.grant (/Users/saiafonua/workspace/alma-business/node_modules/openid-client/lib/client.js:1325:22)
at runMicrotasks ()
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async Client.oauthCallback (/Users/saiafonua/workspace/alma-business/node_modules/openid-client/lib/client.js:601:24)
at async oAuthCallback (/Users/saiafonua/workspace/alma-business/node_modules/next-auth/core/lib/oauth/callback.js:116:16)
at async Object.callback (/Users/saiafonua/workspace/alma-business/node_modules/next-auth/core/routes/callback.js:50:11)
at async NextAuthHandler (/Users/saiafonua/workspace/alma-business/node_modules/next-auth/core/index.js:186:28)
at async NextAuthNextHandler (/Users/saiafonua/workspace/alma-business/node_modules/next-auth/next/index.js:23:19)
at async /Users/saiafonua/workspace/alma-business/node_modules/next-auth/next/index.js:59:32 {
name: 'OAuthCallbackError',
code: undefined
}

How to reproduce

Follow configuration steps found here: https://next-auth.js.org/providers/linkedin.

  • Generate client ID

  • Generate client secret

  • Add http://localhost:3000/api/auth/callback/linkedin as redirect URL

  • In Products tab, enable the "Sign In with LinkedIn"

  • Also, verify company name in Settings tab (might not be required)

  • In your api/auth/[...nextauth].ts file, add in the following code:
    import LinkedInProvider from "next-auth/providers/linkedin"; ... providers: [ LinkedInProvider({ clientId: process.env.LINKEDIN_CLIENT_ID, clientSecret: process.env.LINKEDIN_CLIENT_SECRET }) ] ...

  • Set your client id and client secret in your .env file appropriately:
    LINKEDIN_CLIENT_ID=[INSERT ID HERE] LINKEDIN_CLIENT_SECRET=[INSERT SECRET HERE]

Expected behavior

It should log me in with that provider like it does with google and github.

@sfonua10 sfonua10 added providers triage Unseen or unconfirmed by a maintainer yet. Provide extra information in the meantime. labels Aug 25, 2022
@kphilemon
Copy link

I'm getting the same error on my end too

@slava-ovchinnikov
Copy link

Same issue, tried prev versions of next-auth. App also verified. Yesterday same codebase worked correctly.

@slava-ovchinnikov
Copy link

@kphilemon are u also using node 16.x?

@kphilemon
Copy link

@kphilemon are u also using node 16.x?

Yes. v16.15.1 to be precise.

Side note: The company linked to my LinkedIn app is verified, auth settings are set up correctly and there is no visible warnings/to-do in the developer console.

@slava-ovchinnikov
Copy link

slava-ovchinnikov commented Aug 25, 2022

@kphilemon are u also using node 16.x?

Yes. v16.15.1 to be precise.

Side note: The company linked to my LinkedIn app is verified, auth settings are set up correctly and there is no visible warnings/to-do in the developer console.

@kphilemon
I did migration on the 16.x today, yesterday has 12.x, could u check does it working with 12 for you?

@kphilemon
Copy link

@kphilemon I did migration on the 16.x today, yesterday has 12.x, could u check does it working with 12 for you?

I'm sorry man. My project is dependent on node v16 since I've been using it from the beginning. I don't think I can downgrade it to v12.

Could you revert yours to v12 instead since you mentioned you migrated from v12? (assuming that you are using version control lol). It would be easier for you to give it a try I guess.

@slava-ovchinnikov
Copy link

@kphilemon I did migration on the 16.x today, yesterday has 12.x, could u check does it working with 12 for you?

I'm sorry man. My project is dependent on node v16 since I've been using it from the beginning. I don't think I can downgrade it to v12.

Could you revert yours to v12 instead since you mentioned you migrated from v12? (assuming that you are using version control lol). It would be easier for you to give it a try I guess.

Yeah, will check soon. Just a little busy at the moment :)

@pabloyorio
Copy link

Hi guys! I have a similar problem. Yesterday my LinkedIn sign in was working perfectly on local host. Suddenly it started to throw the following error in the terminal, but I didn't touch the "client_secret" at all and I verified that it's OK, I also didn't touch any relevant code (I think). My configuration is the same shown by @sfonua10.

Please let us know if you have an idea about what could be the problem. Thanks!

error shown in terminal:

[next-auth][error][OAUTH_CALLBACK_ERROR]
https://next-auth.js.org/errors#oauth_callback_error invalid_request (A required parameter "client_secret" is missing) {
error: {
message: 'invalid_request (A required parameter "client_secret" is missing)',
stack: 'OPError: invalid_request (A required parameter "client_secret" is missing)\n' +
' at processResponse (C:\Users\DELL\Desktop\writi-mui\node_modules\openid-client\lib\helpers\process_response.js:38:13)\n' +
' at Client.grant (C:\Users\DELL\Desktop\writi-mui\node_modules\openid-client\lib\client.js:1325:22)\n' +
' at runMicrotasks ()\n' +
' at processTicksAndRejections (node:internal/process/task_queues:96:5)\n' +
' at async Client.oauthCallback (C:\Users\DELL\Desktop\writi-mui\node_modules\openid-client\lib\client.js:601:24)\n' +
' at async oAuthCallback (C:\Users\DELL\Desktop\writi-mui\node_modules\next-auth\core\lib\oauth\callback.js:116:16)\n' +
' at async Object.callback (C:\Users\DELL\Desktop\writi-mui\node_modules\next-auth\core\routes\callback.js:50:11)\n' +
' at async NextAuthHandler (C:\Users\DELL\Desktop\writi-mui\node_modules\next-auth\core\index.js:186:28)\n' +
' at async NextAuthNextHandler (C:\Users\DELL\Desktop\writi-mui\node_modules\next-auth\next\index.js:23:19)\n' +
' at async C:\Users\DELL\Desktop\writi-mui\node_modules\next-auth\next\index.js:59:32',
name: 'OPError'
},
providerId: 'linkedin',
message: 'invalid_request (A required parameter "client_secret" is missing)'
}
[next-auth][error][CALLBACK_OAUTH_ERROR]
https://next-auth.js.org/errors#callback_oauth_error invalid_request (A required parameter "client_secret" is missing) OPError: invalid_request (A required parameter "client_secret" is missing)
at processResponse (C:\Users\DELL\Desktop\writi-mui\node_modules\openid-client\lib\helpers\process_response.js:38:13)
at Client.grant (C:\Users\DELL\Desktop\writi-mui\node_modules\openid-client\lib\client.js:1325:22)
at runMicrotasks ()
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async Client.oauthCallback (C:\Users\DELL\Desktop\writi-mui\node_modules\openid-client\lib\client.js:601:24)
at async oAuthCallback (C:\Users\DELL\Desktop\writi-mui\node_modules\next-auth\core\lib\oauth\callback.js:116:16)
at async Object.callback (C:\Users\DELL\Desktop\writi-mui\node_modules\next-auth\core\routes\callback.js:50:11)
at async NextAuthHandler (C:\Users\DELL\Desktop\writi-mui\node_modules\next-auth\core\index.js:186:28)
at async NextAuthNextHandler (C:\Users\DELL\Desktop\writi-mui\node_modules\next-auth\next\index.js:23:19)
at async C:\Users\DELL\Desktop\writi-mui\node_modules\next-auth\next\index.js:59:32 {
name: 'OAuthCallbackError',
code: undefined
}

Before getting the error, I am successfully redirected to the Linkedin url, but once I press the Allow button and then try to Sign In it throws the error.

image

Here starts the problem (once I press Sign in):

image

After tying to sign in with LinkedIn:

image

image

image

Any ideas? Thanks in advance!

@ashmore11
Copy link

Also experiencing this exact issue. Seem's to have appeared out of nowhere 😩

Node v12.18.3
Next-auth v4.10.0

@slava-ovchinnikov
Copy link

ok, problem on the open-id client side. Basic auth with the client_id and client_secret isn't ok for LinkedIn now.

@slava-ovchinnikov
Copy link

Have no time to finish it fully, u can override the token method with custom request
First two steps works correctly

  1. How to override getting access token proccess
  2. Signature of access token endpoint

Some not working for now drafts:

token: {
      url: "https://www.linkedin.com/oauth/v2/accessToken",
      async request(context) {
        console.log("context", context);
        const data = new FormData();

        data.append("grant_type", "authorization_code")
        data.append("code", context.params.code)
        data.append("redirect_uri", context.provider.callbackUrl)
        data.append("client_id", context.provider.callbackUrl)
        data.append("client_secret", context.provider.callbackUrl)

        const { access_token } = await fetch({
          url: context.provider.token.url,
          method: "POST",
          body: data,
        })
        console.log("access_token", access_token);
        return {
          tokens: [access_token]
        }
      }
    },

@ashmore11
Copy link

@slava-ovchinnikov Did you manage to make any more progress with this?

@sildur
Copy link
Contributor

sildur commented Aug 26, 2022

I was debugging this yesterday. I made some changes that fixed it. Feel free to check them.

@pabloyorio
Copy link

Hi @sildur , I checked this but I had the same behavior than before...

[next-auth][warn][NEXTAUTH_URL]
https://next-auth.js.org/warnings#nextauth_url
[next-auth][warn][NO_SECRET]
https://next-auth.js.org/warnings#no_secret
[next-auth][error][OAUTH_CALLBACK_ERROR]
https://next-auth.js.org/errors#oauth_callback_error invalid_request (A required parameter "client_secret" is missing) {
error: {
message: 'invalid_request (A required parameter "client_secret" is missing)',
stack: 'OPError: invalid_request (A required parameter "client_secret" is missing)\n' +
' at processResponse (C:\Users\DELL\Desktop\writi-mui\node_modules\openid-client\lib\helpers\process_response.js:38:13)\n' + ' at Client.grant (C:\Users\DELL\Desktop\writi-mui\node_modules\openid-client\lib\client.js:1325:22)\n' +
' at runMicrotasks ()\n' +
' at processTicksAndRejections (node:internal/process/task_queues:96:5)\n' +
' at async Client.oauthCallback (C:\Users\DELL\Desktop\writi-mui\node_modules\openid-client\lib\client.js:601:24)\n' +
' at async oAuthCallback (C:\Users\DELL\Desktop\writi-mui\node_modules\next-auth\core\lib\oauth\callback.js:116:16)\n' +
' at async Object.callback (C:\Users\DELL\Desktop\writi-mui\node_modules\next-auth\core\routes\callback.js:50:11)\n' +
' at async NextAuthHandler (C:\Users\DELL\Desktop\writi-mui\node_modules\next-auth\core\index.js:186:28)\n' +
' at async NextAuthNextHandler (C:\Users\DELL\Desktop\writi-mui\node_modules\next-auth\next\index.js:23:19)\n' +
' at async C:\Users\DELL\Desktop\writi-mui\node_modules\next-auth\next\index.js:59:32',
name: 'OPError'
},
providerId: 'linkedin',
message: 'invalid_request (A required parameter "client_secret" is missing)'
}
[next-auth][error][CALLBACK_OAUTH_ERROR]
https://next-auth.js.org/errors#callback_oauth_error invalid_request (A required parameter "client_secret" is missing) OPError: invalid_request (A required parameter "client_secret" is missing)
at processResponse (C:\Users\DELL\Desktop\writi-mui\node_modules\openid-client\lib\helpers\process_response.js:38:13)
at Client.grant (C:\Users\DELL\Desktop\writi-mui\node_modules\openid-client\lib\client.js:1325:22)
at runMicrotasks ()
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async Client.oauthCallback (C:\Users\DELL\Desktop\writi-mui\node_modules\openid-client\lib\client.js:601:24)
at async oAuthCallback (C:\Users\DELL\Desktop\writi-mui\node_modules\next-auth\core\lib\oauth\callback.js:116:16)
at async Object.callback (C:\Users\DELL\Desktop\writi-mui\node_modules\next-auth\core\routes\callback.js:50:11)
at async NextAuthHandler (C:\Users\DELL\Desktop\writi-mui\node_modules\next-auth\core\index.js:186:28)
at async NextAuthNextHandler (C:\Users\DELL\Desktop\writi-mui\node_modules\next-auth\next\index.js:23:19)
at async C:\Users\DELL\Desktop\writi-mui\node_modules\next-auth\next\index.js:59:32 {
name: 'OAuthCallbackError',
code: undefined
}
[next-auth][error][OAUTH_CALLBACK_ERROR]
https://next-auth.js.org/errors#oauth_callback_error invalid_request (A required parameter "client_secret" is missing) {
error: {
message: 'invalid_request (A required parameter "client_secret" is missing)',
stack: 'OPError: invalid_request (A required parameter "client_secret" is missing)\n' +
' at processResponse (C:\Users\DELL\Desktop\writi-mui\node_modules\openid-client\lib\helpers\process_response.js:38:13)\n' + ' at Client.grant (C:\Users\DELL\Desktop\writi-mui\node_modules\openid-client\lib\client.js:1325:22)\n' +
' at runMicrotasks ()\n' +
' at processTicksAndRejections (node:internal/process/task_queues:96:5)\n' +
' at async Client.oauthCallback (C:\Users\DELL\Desktop\writi-mui\node_modules\openid-client\lib\client.js:601:24)\n' +
' at async oAuthCallback (C:\Users\DELL\Desktop\writi-mui\node_modules\next-auth\core\lib\oauth\callback.js:116:16)\n' +
' at async Object.callback (C:\Users\DELL\Desktop\writi-mui\node_modules\next-auth\core\routes\callback.js:50:11)\n' +
' at async NextAuthHandler (C:\Users\DELL\Desktop\writi-mui\node_modules\next-auth\core\index.js:186:28)\n' +
' at async NextAuthNextHandler (C:\Users\DELL\Desktop\writi-mui\node_modules\next-auth\next\index.js:23:19)\n' +
' at async C:\Users\DELL\Desktop\writi-mui\node_modules\next-auth\next\index.js:59:32',
name: 'OPError'
},
providerId: 'linkedin',
message: 'invalid_request (A required parameter "client_secret" is missing)'
}

@ashmore11
Copy link

ashmore11 commented Aug 26, 2022

So I've almost got this working. Below is my code so far:

LinkedInProvider({
  clientId: process.env.LINKEDIN_CLIENT_ID,
  clientSecret: process.env.LINKEDIN_CLIENT_SECRET,
  token: {
    url: 'https://www.linkedin.com/oauth/v2/accessToken',
    request: async context => {
      const body = querystring.stringify({
        grant_type: 'authorization_code',
        code: context.params.code,
        redirect_uri: context.provider.callbackUrl,
        client_id: context.provider.clientId,
        client_secret: context.provider.clientSecret,
      });

      const { data } = await axios.post(context.provider.token.url, body);

      return {
        tokens: [data.access_token],
      };
    },
  },
  userinfo: {
    url:
      'https://api.linkedin.com/v2/me?projection=(id,localizedFirstName,localizedLastName,profilePicture(displayImage~digitalmediaAsset:playableStreams))',
    async request(context) {
      const { data } = await axios.get(context.provider.userinfo.url, {
        headers: {
          Authorization: `Bearer ${context.tokens[0]}`,
        },
      });
      return data;
    },
  },
}),

LinkedIn is returning the profile data as expected but now I'm seeing the following error:

[2022-08-26T11:45:05.482Z] debug GET /auth/linkedin/callback?access_token=undefined (808 ms) 400

I'm not sure why the access_token param is undefined. Any thoughts?

EDIT:

I think this may be related to my Strapi integration. Still not sure how to solve it though.

EDIT again:

So yes, that was Strapi related. In the next-auth jwt callback I needed to update the access_token param slightly:

const { data } = await axios.get(
  `${process.env.CMS_URL}/auth/${
    account.provider
  }/callback?access_token=${account.access_token || account[0]}`
);

Not the prettiest solution but it works until next-auth merge a solution.

@sildur
Copy link
Contributor

sildur commented Aug 27, 2022

Hey, @pabloyorio my fix is in my repo. I made a PR which I hope they merge. If you are brave/desperate enough, I built a package with my fix, called next-auth-linkedin-fix, with version 4.10.3-1. You can replace the line about next-auth in your package.json and then use my package exactly like next-auth. You will have to replace all imports so instead of saying "next-auth/react" (for instance), they say ""next-auth-linkedin-fix/react".

@sildur
Copy link
Contributor

sildur commented Aug 27, 2022

@pabloyorio I found a less intrusive way of fixing the issue. This does the same as my fix does:

        LinkedInProvider({
            clientId: process.env.NEXT_PUBLIC_LINKEDIN_CLIENT_ID,
            clientSecret: process.env.NEXT_PUBLIC_LINKEDIN_CLIENT_SECRET,
            token: {
                url: "https://www.linkedin.com/oauth/v2/accessToken",
                async request({
                                  client,
                                  params,
                                  checks,
                                  provider
                              }) {
                    const response = await client.oauthCallback(provider.callbackUrl, params, checks, {
                        exchangeBody: {
                            client_id: process.env.NEXT_PUBLIC_LINKEDIN_CLIENT_ID,
                            client_secret: process.env.NEXT_PUBLIC_LINKEDIN_CLIENT_SECRET,
                        }
                    });
                    return {
                        tokens: response
                    };
                }
            },
        })

sildur added a commit to sildur/next-auth that referenced this issue Aug 27, 2022
Linkedin now requires client_id and client_secret to be
sent in the oauth callback. Fixes nextauthjs#5220
@pabloyorio
Copy link

@sildur your solution works perfectly! Thank you very much!

@ThangHuuVu ThangHuuVu removed the triage Unseen or unconfirmed by a maintainer yet. Provide extra information in the meantime. label Aug 30, 2022
@balazsorban44 balazsorban44 added the bug Something isn't working label Aug 30, 2022
@balazsorban44
Copy link
Member

Hi everyone, I just wanted to jump in and say that I could confirm the issue, and the #5236 PR should fix this issue. In the meantime, you can add the following to the LinkedIn provider config:

client: {
      token_endpoint_auth_method: "client_secret_post",
},

I verified this will fix the issue, see: https://github.com/nextauthjs/next-auth/pull/5236/files#r958841113

balazsorban44 added a commit that referenced this issue Sep 7, 2022
* Send client_id and client_secret to linkedin

Linkedin now requires client_id and client_secret to be
sent in the oauth callback. Fixes #5220

* Update linkedin.ts

Co-authored-by: Thang Vu <thvu@hey.com>
Co-authored-by: Balázs Orbán <info@balazsorban.com>
@anguskeatinge
Copy link

@sildur you're a hero

@mu-irfan
Copy link

@sildur @pabloyorio now how we retrieve user data like user profile title, profile about and experience etc using access token. i want to retrieve user data plz help me with that. Thankyou!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working providers
Projects
None yet
10 participants