2

I'm trying to install a 'Log in with LinkedIn' functionality into a React app. Therefore I've used npx create-react-app kekap and ran npm install nvh95/react-linkedin-login-oauth2#pull/42/head, considering the current version install of react-linkedin-login-oauth2 wasn't working. After adding the sample files as proposed in the GitHub readme as a means of testing the application can't seem to find the module.

Failed to compile.

./src/App.js Module not found: Can't resolve 'react-linkedin-login-oauth2' in 'D:\workspaces\kekap\src'

My App.js:

import { Component } from 'react';
import { LinkedInPopUp } from 'react-linkedin-login-oauth2';

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

import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
        <BrowserRouter>
          <Switch >
            <Route exact path="/linkedin" component={LinkedInPopUp} />
          </Switch>
        </BrowserRouter>
        </header>
      </div>
    );  
  }
  
}

export default App;

package.json:

{
  "name": "kekap",
  "homepage": "/wp-content/themes/screenr/templates/build/",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.12.0",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-linkedin-login-oauth2": "github:nvh95/react-linkedin-login-oauth2#pull/42/head",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "^4.0.3",
    "web-vitals": "^1.1.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

npm audit is giving me 82 moderate severity vulnerabilities. Fixes however switch me between versions @4.0.3 (current) and @1.1.5 (required by outdated module I'm guessing) of react-scripts.

Does anyone know how to fix this? How could I troubleshoot this further? Until now I've only followed a React course on Coursera, so I have little experience beyond what a simple Google query can solve.

Much thanks in advance!

Sjors Hijgenaar
  • 1,232
  • 1
  • 16
  • 30

2 Answers2

1

The following works fine on my local machine:

  1. npx create-react-app kekap.
  2. cd kekap.
  3. Replaced the created App.js with your provided App.js.
  4. Replaced the created package.json with your provided package.json.
  5. npm install (just that, not npm install nvh95/react-linkedin-login-oauth2#pull/42/head).
    • After running the above, react-linkedin-login-oauth2 should be present under node_modules. If it isn't, you would probably get an error message saying that it wasn't installed (which may happen with earlier npm versions).
  6. npm start.

Note that by "works fine" I mean that the react app is launched with no errors.

However, as opposed to the demo app, there's no Linkedin sign-in button. The reason is that your provided App.js is different than the one in the demo App.js you linked to, which uses an additional component named LinkedInPage.

To make such a button appear, we nevertheless don't need that additional LinkedInPage component. All we need to do is use the provided LinkedIn component (which comes with the npm module), so App.js should become:

import { Component } from 'react';
import { LinkedIn, LinkedInPopUp } from 'react-linkedin-login-oauth2';

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

import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
        <BrowserRouter>
          <Switch >
            <Route exact path="/linkedin" component={LinkedInPopUp} />
            <Route path="/">
                <LinkedIn clientId="81lx5we2omq9xh" />
            </Route>
          </Switch>
        </BrowserRouter>
        </header>
      </div>
    );  
  }
  
}

export default App;
OfirD
  • 9,442
  • 5
  • 47
  • 90
  • I retried the steps in OfirD's solution which results in a working application, but misses the option to fill in the required clientId, resulting in an error in the LinkedInPopUp. However, as soon as I add the LinkedInPage component the application breaks on the linkedin import. As soon as I add the file locally (as suggested here: https://stackoverflow.com/questions/44114436/the-create-react-app-imports-restriction-outside-of-src-directory), add my own clientId from LinkedIn everything works and I get the required authorization token. – Sjors Hijgenaar Jun 01 '21 at 16:25
  • 1
    @SjorsHijgenaar, you can certainly use the demo's `LinkedInPage` (which is nice, because it has an additional button implementation, but you then need (as you noticed) the `assets` folder, which was removed from that or 42), but as said, it's not a must, you can just use the provided `LinkedIn` and pass the `clientid` to it. I edited my answer to show how (you may also want to refer to [this answer](https://stackoverflow.com/a/65378087/3002584)). – OfirD Jun 01 '21 at 17:03
  • 1
    Also, note that the "popup" that opens when the button is clicked is actually not the `LinkedInPopUp`, but a simple window that's built with a function named `getPopupPositionProperties`. The `LinkedInPopUp` is opened once the user logs in to LinkedIn and that "popup" window is closed. – OfirD Jun 01 '21 at 17:03
  • 1
    Awesome, much obliged for your help @OfirD – Sjors Hijgenaar Jun 02 '21 at 06:46
  • @SjorsHijgenaar, you're welcome. Do you think it's worth the bounty? – OfirD Jun 02 '21 at 09:43
  • 1
    absolutely, silly I have to do that manually after accepting your answer as solution. – Sjors Hijgenaar Jun 02 '21 at 13:14
0

For anyone who has tried above steps. If you still face the issue make sure you are using react 17 or above In my case i was using react v 16, tried all these steps but wasn't able to fix the issue. But upgrading to v 17 fixed the issue..

Kaushik Garkoti
  • 27
  • 8