Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
react-linkedin-login-oauth2
Advanced tools
React component for Linked In Log In feature using OAuth 2.0
react-linkedin-login-oauth2
VERSION 2
IS OUT. THIS IS MIGRATION GUIDE FROM 1
TO 2
.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.
See CHANGELOG.md
npm install --save react-linkedin-login-oauth2@latest
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
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>
);
}
// pages/linkedin.js
import { LinkedInCallback } from 'react-linkedin-login-oauth2';
export default function LinkedInPage() {
return <LinkedInCallback />;
}
2
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) |
LinkedInCallback
component:Please create an issue at https://github.com/nvh95/react-linkedin-login-oauth2/issues. I will spend time to help you.
Please upgrade react-linkedin-login-oauth2
to latest version following
npm install --save react-linkedin-login-oauth2
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!
FAQs
React component for Linked In Log In feature using OAuth 2.0
We found that react-linkedin-login-oauth2 demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.