nvh95/react-linkedin-login-oauth2

Popup modal doesn't close after login - working fine on localhost but not working on server (digital ocean)

best-luck opened this issue · 5 comments

best-luck commented

Greetings to the development team of this module.

I found that this module is a great fit for my project and integrated successfully on my project.
However, it's not working properly on server as it's working on localhost.

https://connectcaptain.com/login
You can check the issue on this site.

Looking forward to hearing from you soon.
Thank you.

AhmadSabbah1 commented

I'm facing the same issue, after allowing the popup dialog doesn't close and the site loads inside it.

Need to note that I'm facing this issue on localhost

best-luck commented

Hello, AhmadSabbah1!

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...

<Route exact path="/linkedin" element={} />

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.

AhmadSabbah1 commented

Hello! Thanks for sharing!!
Definitely a solution, but my concern is if it goes back to normal in production and causing an unexpected behavior.
Will keep fiddling around to get it to its normal functioning state or find an alternative.

Thanks

best-luck commented

Hello! Thanks for sharing!! Definitely a solution, but my concern is if it goes back to normal in production and causing an unexpected behavior. Will keep fiddling around to get it to its normal functioning state or find an alternative.

Thanks

https://connectcaptain.com/login

You can check it's working on production website.
Feel free to ask me if you still have problems

luknl commented

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