after login its not calling onSuccess function

[zafarhussain633]

No description provided.

[tleopardt]

I'm also having this problem in the latest version, I already allow linkedin login but it didn't call onSuccess function so it returns nothing. Please somebody help

[devnexitus]

Hello, I'm having a similar issue. But it's only happening on localhost, when i deploy my app to some server this error happens. It executes onError all the time and redirects to the redirectUri with no params which causes LinkedInCallback component always shows "state does not match".

Is there a way to fix this?

[zafarhussain633]

i think this package have some serious issue

[nvh95]

Hi @zafarhussain633, @tleopardt, @devnexitus,

Thank you for reaching us.

Did you setup LinkedInCallback using react-router-dom or Next.js's file system routing as mentioned in Usage (https://github.com/nvh95/react-linkedin-login-oauth2#usage)?

import React from 'react';
import { LinkedInCallback } from 'react-linkedin-login-oauth2';

import { BrowserRouter, Route, Switch } from 'react-router-dom';

function Demo() {
  return (
    <BrowserRouter>
      <Route exact path="/linkedin" component={LinkedInCallback} />
    </BrowserRouter>
  );
}

// pages/linkedin.js
import { LinkedInCallback } from 'react-linkedin-login-oauth2';
export default function LinkedInPage() {
  return <LinkedInCallback />;
}

If you follow the Usage and still experience any issues. Please help to create a minimal reproduction so we can support you. Thanks.

[kpruban98]

Hello, I'm having a similar issue. But it's only happening on localhost, when i deploy my app to some server this error happens. It executes onError all the time and redirects to the redirectUri with no params which causes LinkedInCallback component always shows "state does not match".

Is there a way to fix this?

Facing same issue, any luck finding the solution?

[jay-klavans]

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.