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

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

or if you use yarn:

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

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

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.

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:

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

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

License

MIT