nvh95/react-linkedin-login-oauth2

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 opened this issue · 3 comments

nik32 commented

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)
image

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

jay-klavans commented

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.

luknl commented

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