nvh95/react-linkedin-login-oauth2

After Popup closes, my main app background image disappears (blank)

codekiu opened this issue · 4 comments

As the title says, the problem comes after log in successfully, the popup window will close and successfully send me the code to my main reactjs application but at the same time, it also makes my background image and some icons disappear. Why is this? I simply implemented the code displayed in the description.

index.js

import { LinkedInPopUp } from 'react-linkedin-login-oauth2';
<Route exact path="/linkedin" component={LinkedInPopUp} /> 

oauth.js

import { LinkedIn } from "react-linkedin-login-oauth2";

handleLinkedInFailure = (response) => {
     console.log("linkedinfailure", response);
   };
   handleLinkedInSuccess = (response) => {
     console.log("linkedinsuccess", response);
   };

<LinkedIn
                 clientId="XXX"
                 onFailure={this.handleLinkedInFailure}
                 onSuccess={this.handleLinkedInSuccess}
                 redirectUri="http://localhost:3000/linkedin"
                 renderElement={({ onClick, disabled }) => (
                   <Button
                     icon={<IconFont type="icon-linkedin" />}
                     onClick={onClick}
                     disabled={disabled}
                   >
                     Log in with Linkedin
                   </Button>
                 )}
               />
nvh95 commented

Hey @lynguistical, can you replicate your issue in a repository?

nvh95 commented

@ItaloGoncales I cannot reproduce your issue. I clone your repository then run, but your linkedin app is disabled. I replaced it by my linkedin application's clientId and it work fine. Can you provide more information?

image

Also, react-linkedin-login-oauth2 is now at 2.0.0 . If possible, can you use that version? It come with breaking changes, please refer to Usage or Migration guide from 1 to 2.
The example code is also updated, too https://github.com/nvh95/react-linkedin-login-oauth2-demo

I could fix that by removing the background definition from index.css and making it hardcoded into the body tag on my application.

Maybe it resets the CSS styles?