react-linkedin-login-openid v1.1.2

Here’s the revised README file with the integration details for linkedin-auth-server-openid added, while keeping the tables intact:

Linkedin Login OpenID React

Linkedin Login OpenID React is a React component that enables authentication with LinkedIn using OpenID Connect. It provides a straightforward way to integrate LinkedIn login functionality into your React applications.

Prerequisites

1. Create a LinkedIn App

   • Navigate to LinkedIn Developer Portal.
   • Create a new application if you don't already have one.

2. Request Access for OpenID Connect

   • Under the "Products" section of your LinkedIn app, request access to "Sign In with LinkedIn using OpenID Connect."

3. Retrieve Client ID

   • Once access is approved, navigate to the "Auth" section to obtain your Client ID.

4. Set Up Redirect URL

   • Define an Authorized redirect URL for your application in the LinkedIn Developer Portal. Example: http://localhost:5173/linked_in_auth_resp.

Installation

Install the library using npm:

npm install react-linkedin-login-openid

Usage

Step 1: Import the Component

In your login or sign-in page, import the LinkedinButton component:

import { LinkedinButton } from 'react-linkedin-login-openid';

Step 2: Add the Button Component

Add the LinkedinButton component to your page. You must provide the client_id and redirect_url properties:

<LinkedinButton
    client_id={env.VITE_APP_LINKEDIN_CLIENT_ID}
    redirect_url={env.VITE_APP_REDIRECT_URI}
    imgUrl="https://example.com/custom-image.png"
    permissions={["openid", "profile"]}
/>

• client_id: Your LinkedIn app's Client ID (retrieved from the Developer Portal).
• redirect_url: A user-defined redirect URL to handle the authentication response.
• imgUrl (optional): URL to a custom image to be displayed on the button.
• permissions (optional): Array of permissions to request from LinkedIn. Possible values are "openid", "profile", and "email". By default, all three are included.

Step 3: Create a Route to Capture the Auth Code

In your App.tsx, create a route to handle the authentication response from LinkedIn. This route should match the redirect_url specified in your LinkedIn app settings.

Import the LinkedinPage component:

import { LinkedinPage } from 'react-linkedin-login-openid';

Define a route to capture the authentication response:

<Route
    path="/linked_in_auth_resp"
    element={<LinkedinPage successPath="/home" />}
/>

• successPath: The path to navigate after a successful login.
• Optional postUrl Property: If you want to send the authorization code to a server, specify the server's URL using the postUrl property. The code will be sent in the request body under the code key. If postUrl is provided, the response from the server will be saved in localStorage with the key UserData.

Backend Integration with linkedin-auth-server-openid

To complete the LinkedIn login flow, integrate the backend using the linkedin-auth-server-openid package.

1. Install and Configure: Install linkedin-auth-server-openid in your Node.js server:

   npm install linkedin-auth-server-openid

   Import and initialize the Linkedin class with your client_id, client_secret, and redirect_uri.

2. Handle Authorization Code: Create an API endpoint (e.g., /login) on your server to receive the authorization code from the React app. Use the getData method of linkedin-auth-server-openid to exchange the code for user data.

3. Send User Data to React: After successfully fetching the user data from LinkedIn, send it back to the React app. If you're using the postUrl feature in LinkedinPage, the server response will be stored in localStorage with the key UserData.

Refer to the linkedin-auth-server-openid documentation for detailed implementation.

Example Workflow

1. User clicks the LinkedinButton.
2. User logs in via LinkedIn.
3. LinkedIn redirects the user to the redirect_url, providing an authorization code.
4. React App:
   • The LinkedinPage component handles the response and sends the authorization code to your server (if postUrl is provided).
   • Optionally, the authorization code can be manually handled by retrieving it from sessionStorage.
5. Server:
   • The server receives the authorization code and exchanges it for user data using linkedin-auth-server-openid.
   • The user data is sent back to the React frontend or saved to your database.

Props Reference

LinkedinButton

LinkedinPage

License

This project is licensed under the ISC License. Feel free to use and modify it as per your needs.