npm package: @kristalpithwa/react-native-linkedin-login
Description: React Native LinkedIn login made easy with a ready-to-use WebView modal.
Author: Kristal Pithwa
Latest version: 0.0.4

#### Enable LinkedIn authentication in your React Native application in minutes with a ready-to-use WebView solution designed for simplicity, reliability, and seamless user experience.

## Installation

```sh
npm install @kristalpithwa/react-native-linkedin-login
```

or if you use yarn:

```sh
yarn add @kristalpithwa/react-native-linkedin-login
```

> [!IMPORTANT]
> This library depends on `react-native-webview`. You must install it additionally.

```sh
npm install react-native-webview
or
yarn add react-native-webview
```

## Getting LinkedIn API Keys

To use LinkedIn authentication, you must create a LinkedIn App and configure OAuth credentials.

Follow the steps below carefully.

### Step 1: Navigate to LinkedIn Developers Portal

Open the [LinkedIn Developers portal](https://www.linkedin.com/developers/).

Sign in with your LinkedIn account.

Ensure your account has permission to create and manage applications.

### Step 2: Create a New LinkedIn App

1. Click on **Create App**.
2. Fill in the required details:
   - **App Name** – Your application name
   - **LinkedIn Page** – Select an existing Company Page or create one
   - **App Logo** – Upload your app logo
   - **Privacy Policy URL** – Required and must be publicly accessible
3. Accept LinkedIn’s terms and conditions.
4. Click **Create App**.

✅ Your LinkedIn App has now been created successfully.

### Step 3: Get Client ID and Client Secret

1. Open your newly created app.
2. Navigate to the **Auth** tab.
3. Locate the following credentials:
   - **Client ID**
   - **Client Secret**
4. Copy and store them securely.

> [!CAUTION]
> **Security Note**
>
> Never expose the Client Secret in mobile code.
>
> Always store secrets in .env file.

**Example:**

```env
LINKEDIN_CLIENT_ID=your_client_id
LINKEDIN_CLIENT_SECRET=your_client_secret
```

### Step 4: Configure OAuth Redirect URI

1. In the **Auth** tab, scroll to **OAuth 2.0 settings**.
2. Add a **Redirect URI**, which LinkedIn will redirect users to after authentication.

**Examples:**

- **Web:**

  ```
  https://yourdomain.com/auth/linkedin/callback
  ```

- **Local development:**

  ```
  http://localhost:3000/auth/linkedin/callback
  ```

- **Mobile (backend-based auth):**
  ```
  https://api.yourdomain.com/auth/linkedin/callback
  ```

3. Click **Save**.

> [!WARNING]
> The redirect URI must **exactly match** the one used in your authentication code.

### Step 5: Enable “Sign In with LinkedIn using OpenID Connect”

1. Go to the **Products** tab in your LinkedIn App dashboard.
2. Find **Sign In with LinkedIn using OpenID Connect**.
3. Click **Add Product** or **Request Access**.
4. Approval is usually instant.

This enables access to:

- Basic profile information
- Email address (with proper scopes)

### Step 6: Verify App Configuration

Before proceeding, ensure:

- App status is **Active**
- **Client ID** and **Client Secret** are available
- **Redirect URI** is configured
- **OpenID Connect** product is enabled

Your LinkedIn App is now ready for authentication.

## Usage

```tsx
import React, { useState } from 'react';
import { Button, StyleSheet, View } from 'react-native';
import { LoginWithLinkedIn } from '@kristalpithwa/react-native-linkedin-login';

export default function App() {
  const [isVisible, setIsVisible] = useState(false);

  return (
    <View style={styles.container}>
      <Button title="Login with LinkedIn" onPress={() => setIsVisible(true)} />

      <LoginWithLinkedIn
        isVisible={isVisible}
        clientId="YOUR_LINKEDIN_CLIENT_ID"
        clientSecret="YOUR_LINKEDIN_CLIENT_SECRET"
        redirectUri="YOUR_LINKEDIN_REDIRECT_URI"
        onSuccess={(data) => {
          console.log('Login Success:', data);
          setIsVisible(false);
          // data contains access_token, expiresIn, etc.
        }}
        onError={(error) => {
          console.log('Login Error:', error);
          setIsVisible(false);
        }}
        onClose={() => {
          setIsVisible(false);
          console.log('Modal Closed');
        }}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});
```

## Props

| Prop            | Type                        | Required | Description                                                          |
| --------------- | --------------------------- | -------- | -------------------------------------------------------------------- |
| `isVisible`     | `boolean`                   | Yes      | Controls the visibility of the login modal.                          |
| `clientId`      | `string`                    | Yes      | Your LinkedIn Client ID.                                             |
| `clientSecret`  | `string`                    | Yes      | Your LinkedIn Client Secret.                                         |
| `redirectUri`   | `string`                    | Yes      | Your LinkedIn Redirect URI (must match LinkedIn App config).         |
| `onSuccess`     | `(data: any) => void`       | No       | Callback fired on successful login. Returns the access token object. |
| `onError`       | `(message: string) => void` | No       | Callback fired when login fails.                                     |
| `onClose`       | `() => void`                | Yes      | Callback fired when the user closes the modal.                       |
| `animationType` | `'slide' \| 'fade'`         | No       | Animation type for the modal. Default is 'slide'.                    |

## Hire an expert!

Maintained by a **Senior React Native Developer (5+ years experience)**
🌐 [https://kristalpithwa.vercel.app](https://kristalpithwa.vercel.app)

## License

MIT