react-linkedin-login-oauth2
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.0 • Public • Published

    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

    npm package

    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@alpha
    

    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';
    
    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 '../src/LinkedIn';
    // You can use provided image shipped by this package or using your own
    import linkedin from '../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, Switch } 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
    onFailure 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

    💻

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

    Install

    npm i react-linkedin-login-oauth2

    DownloadsWeekly Downloads

    3,706

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    47 kB

    Total Files

    15

    Last publish

    Collaborators

    • nvh95