MIGRATION-from-1-to-2.md

MIGRATION TO VERSION 2

react-linkedin-login-oauth2 is rewritten using typescript and updated to use functional component with hooks. The API also changed to make it easier to integrate. In version 1, it comes with a default Signin with Linked In button. In version 2, you can use your own Signin with Linked In button. You cans still use the default image, which is bundled within the package at react-linkedin-login-oauth2/assets/linkedin.png.

• The onSuccess callback now have code as an argument (version 1 is {code})
• The callback to handle error changed name from onFailure to onError

Given that in version 1, your code is similar to bellow:

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

function LoginWithLinked() {
  const handleSuccess = (data) => {
    console.log(data.code);
  };
  const handleFailure = (error) => {
    console.log(error.errorMessage);
  };
  return (
    <LinkedIn
      clientId="your-client-id"
      onSuccess={handleSuccess}
      onFailure={handleFailure}
      redirectUri="http://localhost:3000/linkedin"
      renderElement={({ onClick, disabled }) => (
        <button onClick={onClick} disabled={disabled}>
          Signin with Linkedin
        </button>
      )}
    />
  );
}

In version 2, you can use it with hooks like this:

import { useLinkedIn } from 'react-linkedin-login-oauth2';
// You can still use default image provided by the package
import linkedin from 'react-linkedin-login-oauth2/assets/linkedin.png';

function LoginWithLinked() {
  const { linkedInLogin } = useLinkedIn({
    clientId: 'your-client-id',
    redirectUri: 'http://localhost:3000/linkedin',
    onSuccess: (code) => {
      // Change from `data.code` to `code`
      console.log(code);
    },
    // Change from `onFailure` to `onError`
    onError: (error) => {
      console.log(error);
    },
  });

  return (
    <img
      src={linkedin}
      alt="Log in with Linked In"
      style={{ maxWidth: '180px' }}
      // Pass `linkedInLogin` to `onClick` handler
      onClick={linkedInLogin}
    />
  );
}

If you do not like hooks, you can use render props:

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

function LoginWithLinked() {
  const handleSuccess = (data) => {
    console.log(data.code);
  };
  const handleFailure = (error) => {
    console.log(error.errorMessage);
  };
  return (
    <LinkedIn
      clientId="your-client-id"
      onSuccess={handleSuccess}
      onFailure={handleFailure}
      redirectUri="http://localhost:3000/linkedin"
-     renderElement={({ onClick, disabled }) => (
-       <button onClick={onClick} disabled={disabled}>
+    >
+      {({ linkedInLogin }) => (
+        <button onClick={linkedInLogin}>
          Signin with Linkedin
        </button>
      )}
-   />
+   </LinkedIn>
  );
}