Skip to content

nvh95/react-linkedin-login-oauth2

Repository files navigation

React Linked In Login Using OAuth 2.0

react-linkedin-login-oauth2 VERSION 2 IS OUT. THIS IS MIGRATION GUIDE FROM 1 TO 2.

All Contributors PRs Welcome

npm package npm

Demo: https://stupefied-goldberg-b44ee5.netlify.app/

This package is used to get authorization code for Linked In Log in feature using OAuth2 in a easy way. After have the authorization code, you can exchange to an access token by sending it to the server to continue to get information needed. For more details, please see at Authorization Code Flow (3-legged OAuth)
See Usage and Demo for instruction.

Table of contents

Changelog

See CHANGELOG.md

Installation

npm install --save react-linkedin-login-oauth2@latest

Overview

We will trigger linkedInLogin by using useLinkedIn (recommended) or LinkedIn (using render props technique) after click on Sign in with LinkedIn button, a popup window will show up and ask for the permission. After we accepted, the pop up window will redirect to redirectUri (should be LinkedInCallback component) then notice its opener about the authorization code Linked In provides us. You can use react-router-dom or Next.js's file system routing

Usage

First, we create a button and provide required props:

import React, { useState } from 'react';

import { useLinkedIn } from 'react-linkedin-login-oauth2';
// You can use provided image shipped by this package or using your own
import linkedin from 'react-linkedin-login-oauth2/assets/linkedin.png';

function LinkedInPage() {
  const { linkedInLogin } = useLinkedIn({
    clientId: '86vhj2q7ukf83q',
    redirectUri: `${window.location.origin}/linkedin`, // for Next.js, you can use `${typeof window === 'object' && window.location.origin}/linkedin`
    onSuccess: (code) => {
      console.log(code);
    },
    onError: (error) => {
      console.log(error);
    },
  });

  return (
    <img
      onClick={linkedInLogin}
      src={linkedin}
      alt="Sign in with Linked In"
      style={{ maxWidth: '180px', cursor: 'pointer' }}
    />
  );
}

If you don't want to use hooks. This library offer render props option:

import React, { useState } from 'react';

import { LinkedIn } from 'react-linkedin-login-oauth2';
// You can use provided image shipped by this package or using your own
import linkedin from 'react-linkedin-login-oauth2/assets/linkedin.png';

function LinkedInPage() {
  return (
    <LinkedIn
      clientId="86vhj2q7ukf83q"
      redirectUri={`${window.location.origin}/linkedin`}
      onSuccess={(code) => {
        console.log(code);
      }}
      onError={(error) => {
        console.log(error);
      }}
    >
      {({ linkedInLogin }) => (
        <img
          onClick={linkedInLogin}
          src={linkedin}
          alt="Sign in with Linked In"
          style={{ maxWidth: '180px', cursor: 'pointer' }}
        />
      )}
    </LinkedIn>
  );
}

Then we point redirect_url to LinkedInCallback. You can use react-router-dom or Next.js's file system routing

  • react-router-dom:
import React from 'react';
import { LinkedInCallback } from 'react-linkedin-login-oauth2';

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

function Demo() {
  return (
    <BrowserRouter>
      <Route exact path="/linkedin" component={LinkedInCallback} />
    </BrowserRouter>
  );
}
  • Next.js's file system routing:
// pages/linkedin.js
import { LinkedInCallback } from 'react-linkedin-login-oauth2';
export default function LinkedInPage() {
  return <LinkedInCallback />;
}

Support IE

  • Support for IE is dropped from version 2

Demo

Props

  • LinkedIn component:
Parameter value is required default
clientId string yes
redirectUri string yes
onSuccess function yes
onError function no
state string no randomly generated string (recommend to keep default value)
scope string no 'r_emailaddress'
See your app scope here. If there are more than one, delimited by a space
children function no Require if using LinkedIn component (render props)

Reference: https://docs.microsoft.com/en-us/linkedin/shared/authentication/authorization-code-flow?context=linkedin/context#step-2-request-an-authorization-code

  • LinkedInCallback component:
    No parameters needed

Issues

Please create an issue at https://github.com/nvh95/react-linkedin-login-oauth2/issues. I will spend time to help you.

Failed to minify the code from this file: ./node_modules/react-linkedin-login-oauth2/node_modules/query-string/index.js:8

Please upgrade react-linkedin-login-oauth2 to latest version following

npm install --save react-linkedin-login-oauth2

Known issue

Contributors ✨

Thanks goes to these wonderful people (emoji key):


Hung Viet Nguyen

πŸ’»

Nguyα»…n Duy KhΓ‘nh

πŸ’»

YBeck

πŸ’»

Mehdi Raza

πŸ€”

Phillip Denness

πŸ›

dsp.iam

πŸ›

Vitalii Bulyzhyn

πŸ’»

Pradeep Reddy Guduru

πŸ›

Uric Bonatti Cardoso

πŸ›

faisalur-rehman

πŸ“–

Ruslan

πŸ’»

This project follows the all-contributors specification. Contributions of any kind welcome!