Upgrade to version 2 error user_closed_popup even if I get the code with onSuccess with NextJS

[groomain]

Hi,

Thanks for this hook!

I've upgraded to version 2 and the user_closed_popup error is always triggered.
Even if I don't close the popup. It close automatically.

The connexion is working because I get the code with the onSuccess callback.

Any idea why?
Thanks,

[nvh95]

@groomain Thank you for submitting issue. Can you provide more information such as reproducible source code, screenshot/ video or environment?

[talaikis]

+1 suddenly stopped working.

[MrHolmes19]

Same here. I am getting onSuccess response, but then, also an onError: "user_closed_popup" after popup closes automatically.

const { linkedInLogin } =  useLinkedIn({
    clientId: {env.LINKEDIN_CLIENT_ID},
    redirectUri: `${window.location.origin}/linkedin`,
    scope: 'r_emailaddress r_liteprofile"
    onSuccess: (response) => {
      console.log("Response Code: ", response)
    },
    onError: (error) => {
      console.log("Error Code: ", error)
    },
  })  

In return --> <Button fullWidth onClick={linkedInLogin}>

in routes --> <Route exact path={"/linkedin"} component={LinkedInCallback}/>

EDIT: It's working fine now.

[psushi]

Hey @MrHolmes19 facing the same issue right now, do you by any chance remember how you managed to fix it?

[MrHolmes19]

useLinkedIn

I think it got fixed by itself that time. I just checked my code and it is almost the same (I added a signIn function after getting the success response and also changed "clientId: env.LINKEDIN_CLIENT_ID as string" because it was throwing me a Typescript warning) but that's it.

[nik32]

@psushi @MrHolmes19 I too was tripped by this very bad!! After doing a lot of experimentation... I found out that you must somehow re-render your UI (in which linkedInLogin component is used) as soon as you receive the code or else the failure callback will also be triggered!!
In @MrHolmes19 first code (in which he was facing this issue)... He is just console logging his code (and not saving the code in state)... due to that the the error handler is also called. Maybe in the solution in which the issue got fixed... he is either re-rendering the UI or removing the UI (in which linkedInLogin component is used). @MrHolmes19 maybe the 'signIn function that you are calling after receiving the code"... is the one which helped fixed the issue.
I found this out as I was using this component at 2 places in our product. One page it was working fine... but on the other page it was always giving me the error that "user_closed_popop". Turned out in the 1st page... where it was working fine... "I was removing UI which had the linkedInLogin component" as soon as I got the code. And on the other place I was not doing this.
You can confirm this behaviour by taking the code of "NextJS demo app" in this repo (examples/nextjs/pages/index.js). In the code, as soon as the code is received... setCode() is called... which re-render the UI and thus the error callback is not called. If we comment the setCode() call... we will see that both code and error are consoled.

[nik32]

@nvh95 and @asanovr can you kindly explain why this is happening?? I don't quite understand the library code that's why can't quite pinpoint why this happens.

[nik32]

@nvh95 and @asanovr I have created an issue regarding this. If this can be solved easily well and good. If not at least a mention of this (i.e. to re-render/remove UI after receiving the code in onSuccess callback) in docs could save one hours and not discard the lib for a bug like this... as its a great lib!!

[luknl]

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