I can't see the linkedin login popup with this code

[anhtran917]

I followed this tutorial but I can't see linkedin login popup as above image.
If I change client_id as sample code, it works but if I use my client_id, it doesn't work.
Please help me.

[monirulislam027]

I am also facing the same issue.

[gauravp-dev]

Please check if you have configured your redirect URIs correctly in developer console of LinkedIn.

[anhtran917]

Now it's fixed. Thanks. I configured again redirect route in my react app.

[DURGASAI-11]

I am also facing the same issue.

I am also encountering the same error. Have you resolved it?

[beredi]

I am sure that I tried everything, but nothing helped. Could someone help us with this problem?

[monirulislam027]

I am sure that I tried everything, but nothing helped. Could someone help us with this problem?

I think this problem is occurring because of the permission issue. Please make sure you are using the following product.

You can the permission list on this auth tab.

Click here and scroll down a little bit


on this prop use email. r_emailaddress is the default value which is not exist on LinkedIn app permission list.

I hope this will help.
Thank you!

[beredi]

I am sure that I tried everything, but nothing helped. Could someone help us with this problem?

I think this problem is occurring because of the permission issue. Please make sure you are using the following product. You can the permission list on this auth tab. Click here and scroll down a little bit on this prop use email. r_emailaddress is the default value which is not exist on LinkedIn app permission list.

I hope this will help. Thank you!

Thank you, man! This helped me!

[beredi]

@monirulislam027
but when I get the token, I log it to the console, copy it, I try to call it in Postman using: https://api.linkedin.com/v2/userinfo and Bearer Token (my token) and always get
{ "serviceErrorCode": 65600, "message": "Invalid access token", "status": 401 }

Any suggestion?

[monirulislam027]

@monirulislam027 but when I get the token, I log it to the console, copy it, I try to call it in Postman using: https://api.linkedin.com/v2/userinfo and Bearer Token (my token) and always get { "serviceErrorCode": 65600, "message": "Invalid access token", "status": 401 }

Any suggestion?

@beredi This token will be valid for the next 15 seconds.

[beredi]

@monirulislam027 I am trying it <15sec. I can do it under 10sec but it always returns an Invalid access token. I know that this isn't a React lib problem, but I don't know where to ask for help.

[GabrieleGie]

@beredi in order to call https://api.linkedin.com/v2/userinfo you need to provide 'openid' scope in your request.
As you can see in Linkedin's Developer web:

Being more specific, you need to add 'openid' scope in useLinkedIn hook next to 'email' scope as:
scope: 'email,openid',

[beredi]

@GabrieleGie thanks for your answer. I tried this combination of scopes, but the result is the same.
This is my code
<LinkedIn clientId='my-client-id' redirectUri={redirectUri} scope='email,openid' onSuccess={(code) => { console.log(code) }} onError={(error) => { console.log(error) }} > {({ linkedInLogin }) => ( <img onClick={linkedInLogin} src={linkedin} alt='Sign in with Linked In' style={{ maxWidth: '180px', cursor: 'pointer' }} /> )} </LinkedIn>

[GabrieleGie]

@beredi how do you get your access token? From the code snipped you've printed, you only get an authorization code which is used later on to get access token.
See Step 3: https://learn.microsoft.com/en-us/linkedin/shared/authentication/authorization-code-flow?context=linkedin%2Fcontext&tabs=HTTPS1#step-2-request-an-authorization-code

[beredi]

@GabrieleGie thank you very much!! You helped me a lot. 🥇 Thanks

[luknl]

Solved it by formatting the scope as follows: scope: 'email openid profile'

[DineshRout779]

Solved it by formatting the scope as follows: scope: 'email openid profile'

This worked for me

Below is the code for reference

import { useLinkedIn } from 'react-linkedin-login-oauth2';

const Signup = () => {
  const { linkedInLogin } = useLinkedIn({
    clientId: import.meta.env.VITE_CLIENT_ID,
    redirectUri: `http://localhost:5173/home`,
    scope: 'email openid profile',
    onSuccess: (code) => {
      console.log(code);
    },
    onError: (error) => {
      console.log(error);
    },
  });

  return (
    <div className='min-h-screen bg-gray-200 flex justify-center items-center'>
      <div className='bg-white border border-gray-300 rounded-md w-full max-w-[480px]'>
        {/* header */}
        <div className='p-4 border-b'>
          <h1 className='text-xl font-semibold text-center'>
            Hey there, let&apos;s sign up
          </h1>
        </div>
        {/* content */}
        <div className='p-4 flex flex-col justify-center items-center'>
          <button
            onClick={linkedInLogin}
            className='bg-blue-700 text-white p-2 px-4 rounded-md'
          >
            Signup with Linkedin
          </button>

          <p className='my-4'>-------------OR-------------</p>
        </div>
      </div>
    </div>
  );
};

export default Signup;