Closing the pop-up Issue on redirection it remain open

[abdulmajidashraf92]

I'm redirecting but after redirection its remain open how can make it close
<LinkedIn
clientId="1234"
onFailure={this.handleFailure.bind(this)}
onSuccess={this.handleSuccess.bind(this)}
redirectUri="http://localhost:3000/"
scope="w_member_social"
renderElement={({onClick, disabled}) => (
Sign in with
Linkedin
)}>

[nvh95]

@abdulmajidashraf92 Have you resolved your problem yet? Please note that you need to handle the pop up like one of those demo:
Demo 1: Use react-router-dom
Demo 2: Not use react-router-dom

[trungnguyen269]

I also had the same problem. And why onSuccess not return something

[aLx450]

Same issue. I used the example with Router.

I get the popup, I can authorize, the code shows up as a URL parameter, but the popup never closes and onSuccess is never called because, I assume, the popup needs to close to do so.

The switch next to the big Linkedin button triggers the popup.

[ijro]

Same problem here. @aLx450 did you manage to solve in some way?
I'm using renderElement

<LinkedIn
	clientId="XXXXXXXXXXXXXXXX"
	onFailure={linkedinCallback}
	onSuccess={linkedinCallback}
	scope='r_emailaddress,r_liteprofile'                 
	redirectUri= "http://localhost:3000"  
	renderElement={renderProps => (
		<button href="#" style={styles.linkedinButton} onClick={renderProps.onClick}>
		   <FaLinkedinIn style={styles.nextIcon} size={24} />
		</button>
	)}
/>

[m7amad-7asan]

This still an issue

[m7amad-7asan]

@ijro @aLx450 @trungnguyen269 @nvh95 @abdulmajidashraf92
did you find a way to solve this ?

[nvh95]

In order to make it work, you need to create a route /linkedin and it should be LinkedInCallback. I recommend using react-router-dom as follow:

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

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

function Demo() {
  return (
    <BrowserRouter>
      // Your `linkedin` callback route
      <Route exact path="/linkedin" component={LinkedInCallback} />
      // Other routes
      ...
    </BrowserRouter>
  );
}

Please refer to Usage to see how to integrate react-linkedin-login-oauth2 to your application. You can find a full example here
Please note that react-linkedin-login-oauth2 is now at version 2.0.0 with some breaking changes. Please refer to Usage or Migration guide from 1 to 2.

[vuyanidaweti]

I used Routes and instead of BrowserRoute and it worked

[sebahom]

for me

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

worked. call it as an element instead of a component

[jaredzwick]

For those still interested, I got it to work by re-implementing the Callback. I'm not sure if there was some changes in v2 or something but I am using react-router-dom v6 with createBrowserRouter and this worked for me:

import { useEffect, useState } from "react";

const LINKEDIN_OAUTH2_STATE = "RANDOM_STR";
function parse(search) {
  const query = search.substring(1);
  const vars = query.split("&");
  const parsed = {};
  for (let i = 0; i < vars.length; i++) {
    const pair = vars[i].split("=");
    if (pair.length > 1) {
      parsed[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1]);
    }
  }
  return parsed;
}

export function CustomCallback() {
  const [errorMessage, setErrorMessage] = useState("");
  useEffect(() => {
    const params = parse(window.location.search);
    console.log(params);
    if (params.error) {
      const errorMessage =
        params.error_description || "Login failed. Please try again.";
      window.opener &&
        window.opener.postMessage(
          {
            error: params.error,
            state: params.state,
            errorMessage,
            from: "Linked In",
          },
          window.location.origin
        );
      // Close tab if user cancelled login
      if (params.error === "user_cancelled_login") {
        window.close();
      }
    }
    if (params.code) {
      window.opener &&
        window.opener.postMessage(
          { code: params.code, state: params.state, from: "Linked In" },
          window.location.origin
        );
    }
  }, []);
  window.close();
  return <div>{errorMessage}</div>;
}