Always getting the 'user_closed_popup' error... If I don't re-render or remove the UI (in which linkedInLogin component is used) after receiving the code

[nik32]

Describe the bug

@nvh95 @asanovr Kindly refer to my comment in this issue thread for more context. Kindly read the discussion... you will understand my issue

Screenshots

The below is a screenshot of your NextJS "demo app" output... (I downloaded it and then just commented out the setCode() call which you make in the success callback). You can see in the console output (1st the code is consoled and then I also get the error 'user_closed_popup' consoled)

Reproduce

Just comment the setCode() line in your onSuccess callback of NextJs example app(line 20 in examples/nextjs/pages/index.js).
You would see the same output in console as I attached above

Expected behavior

Not to call the error callback if the code is successfully received by the lib (if this isn't feasible easily... at-least it should be mentioned in docs to re-render or remove the UI after receiving code in onSuccess callback... so that other people don't get tripped at this again)

Environment (please complete the following information)

• OS: macOS 12.0.1 (monterey
• Browser: Microsoft edge

Additional context

[~Crazy~]

Hello!

I have solved this problem by making the modal by myself.

I used local storage to communicate between parent and child window as childWindow.opener is null if origin is different.

const width = 500;
const height = 600;
const left = window.screen.width / 2 - width / 2;
const top = window.screen.height / 2 - height / 2;
const params = width=${width},height=${height},left=${left},top=${top};

let url = new URL("https://www.linkedin.com/oauth/v2/authorization")
url.searchParams.append('response_type', 'code')
url.searchParams.append('client_id', linkedInClientId)
url.searchParams.append('redirect_uri', ${window.location.origin}/linkedin)
url.searchParams.append('scope', 'r_emailaddress r_liteprofile')

const popup = window.open(url, 'LinkedIn Login', params);

const handleInvalidToken = e => {
if (e.key === 'linkedin_login_code') {
popup.close();
dispatch(linkedinLoginAction(e.newValue, navigate));
}
}
window.addEventListener('storage', handleInvalidToken)

Make new route component yourself and add it to your route...

import { useEffect } from "react";

export default function LinkedinCallback(props) {

useEffect(() => {
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const code = urlParams.get('code');
localStorage.setItem('linkedin_login_code', code)
window.close()
}, [])

return <></>
}

Thank you.

[Luca Haenel]

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