react-native-linkedin-signin-lite

A lightweight, fully responsive LinkedIn OAuth modal for React Native (iOS & Android) using WebView authentication.

No UI dependencies—works out of the box with customizable styling and zero setup hassle.

✅ Overview

react-native-linkedin-signin-lite provides a simple, production-ready login flow for LinkedIn through a modal interface.

• OAuth 2.0 compatible
• iOS & Android support
• No external UI libraries (only react-native-webview)
• TypeScript and JavaScript friendly

📌 Requirements

• React Native 0.65+
• react-native-webview
• LinkedIn Developer App (Client ID + Client Secret)
• Approved redirect URI configured in LinkedIn

🚀 Installation

Yarn

yarn add react-native-linkedin-signin-lite react-native-webview

npm

npm install react-native-linkedin-signin-lite react-native-webview

Then install iOS pods:

npx pod-install

🔐 LinkedIn App Setup

1. Visit https://www.linkedin.com/developers/apps
2. Create/select an app
3. Under Auth, set Authorized Redirect URLs
4. Copy Client ID and Client Secret
5. Use identical redirectUri in the code and LinkedIn config

🧩 Basic Usage

import React, { useRef } from 'react';
import { SafeAreaView, View, Text, Alert, StyleSheet } from 'react-native';
import { LinkedInModal, LinkedInModalRef } from 'react-native-linkedin-signin-lite';

const LINKEDIN_CLIENT_ID = 'YOUR_CLIENT_ID';
const LINKEDIN_CLIENT_SECRET = 'YOUR_CLIENT_SECRET';
const LINKEDIN_REDIRECT_URI = 'YOUR_REDIRECT_URI';

export default function App() {
  const linkedInRef = useRef<LinkedInModalRef>(null);

  const handleSuccess = (token: any) => {
    Alert.alert('Signed in', `Token: ${JSON.stringify(token)}`);
  };

  const handleError = (error: any) => {
    Alert.alert('Login failed', error.message || 'Unknown error');
  };

  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.title}>LinkedIn Sign-In Example</Text>
      <View style={styles.buttonContainer}>
        <LinkedInModal
          ref={linkedInRef}
          clientID={LINKEDIN_CLIENT_ID}
          clientSecret={LINKEDIN_CLIENT_SECRET}
          redirectUri={LINKEDIN_REDIRECT_URI}
          permissions={['openid', 'profile', 'email']}
          onSuccess={handleSuccess}
          onError={handleError}
          linkText="Login with LinkedIn"
          shouldGetAccessToken={true}
          animationType="slide"
        />
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 16,
    backgroundColor: '#F5F5F5',
  },
  title: {
    fontSize: 22,
    fontWeight: '600',
    marginBottom: 24,
    textAlign: 'center',
  },
  buttonContainer: {
    width: '100%',
    maxWidth: 400,
  },
});

🧱 API Reference

Props

| Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | clientID | string | — | yes | LinkedIn App Client ID | | clientSecret | string | — | no | LinkedIn App Client Secret (only needed for token exchange) | | redirectUri | string | — | yes | OAuth Redirect URI | | permissions | string[] | ['openid', 'profile', 'email'] | no | LinkedIn OAuth scopes | | onSuccess | (token) => void | — | yes | Called with auth code / access token on success | | onError | (error) => void | — | no | Called when login fails | | linkText | string | 'Sign in with LinkedIn' | no | Display text for default button | | shouldGetAccessToken | boolean | true | no | Exchange auth code for access token if true | | animationType | 'none' | 'slide' | 'fade' | 'slide' | no | Modal animation type | | overlayColor | string | 'rgba(0,0,0,0.4)' | no | Backdrop overlay color | | containerStyle | object | undefined | no | Custom backdrop container style | | modalStyle | object | undefined | no | Custom modal content style | | buttonStyle | object | undefined | no | Custom button style | | buttonTextStyle | object | undefined | no | Custom button text style | | closeButtonStyle | object | undefined | no | Custom close button style | | closeTextStyle | object | undefined | no | Custom close text style |

Methods (via ref)

• linkedInRef.current?.open() - Open the modal
• linkedInRef.current?.close() - Close the modal
• await linkedInRef.current?.logoutAsync() - Logout from LinkedIn

📝 Notes

• Fully responsive: auto-adjusts modal dimensions across devices/orientations.
• Zero UI dependencies (only React Native + WebView).
• Supports TypeScript and JS.
• Works on iOS and Android.
• For custom button styling, wrap LinkedInModal in your own button and control open/close via ref.

🔧 Advanced Usage

Custom Button Styling

import { TouchableOpacity, Text } from 'react-native';
import { LinkedInModal, LinkedInModalRef } from 'react-native-linkedin-signin-lite';

const linkedInRef = useRef<LinkedInModalRef>(null);

<TouchableOpacity
  style={{
    backgroundColor: '#0077B5',
    padding: 12,
    borderRadius: 8,
    alignItems: 'center',
  }}
  onPress={() => linkedInRef.current?.open()}
>
  <Text style={{ color: 'white', fontWeight: '600' }}>
    Connect with LinkedIn
  </Text>
</TouchableOpacity>

<LinkedInModal
  ref={linkedInRef}
  clientID={LINKEDIN_CLIENT_ID}
  clientSecret={LINKEDIN_CLIENT_SECRET}
  redirectUri={LINKEDIN_REDIRECT_URI}
  onSuccess={handleSuccess}
  onError={handleError}
  shouldGetAccessToken={true}
/>

Programmatic Control

const linkedInRef = useRef<LinkedInModalRef>(null);

// Open modal
linkedInRef.current?.open();

// Close modal
linkedInRef.current?.close();

// Logout user
await linkedInRef.current?.logoutAsync();

Error Handling

const handleError = (error: any) => {
  if (error.message?.includes('network')) {
    Alert.alert('Network Error', 'Please check your internet connection');
  } else if (error.message?.includes('cancelled')) {
    console.log('User cancelled login');
  } else {
    Alert.alert('Login Failed', error.message || 'Unknown error occurred');
  }
};

🐛 Troubleshooting

Common Issues

Modal not opening?

• Ensure react-native-webview is properly installed and linked
• Check that all required props are provided

OAuth redirect not working?

• Verify redirect URI matches exactly in LinkedIn app settings
• Ensure URI scheme is properly configured in app

Build fails on iOS?

cd ios && pod install

Android build issues?

• Ensure react-native-webview is in android/app/build.gradle
• Check minSdkVersion compatibility

TypeScript errors?

• Ensure you're importing types correctly
• Check that react-native-webview types are installed

Platform-Specific Notes

iOS:

• Requires iOS 11.0+
• WebView works out-of-the-box
• No additional permissions needed

Android:

• Requires Android API 21+
• WebView works out-of-the-box
• No additional permissions needed

❓ FAQ

Q: Can I customize the modal appearance? A: Yes! Use modalStyle, containerStyle, overlayColor, and other style props.

Q: Do I need both Client ID and Client Secret? A: Client Secret is only required if shouldGetAccessToken={true} (default). For auth code only, you can omit it.

Q: How do I handle token refresh? A: LinkedIn tokens expire in 60 days. Implement your own refresh logic using the refresh token from the response.

Q: Can I use this with Expo? A: Yes, but you'll need to use expo-dev-client for custom native modules.

Q: Is this secure? A: Yes, uses LinkedIn's official OAuth 2.0 flow with PKCE-like state validation.

🤝 Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📞 Support

• Issues: GitHub Issues
• GitHub Discussions: Start a discussion
• WhatsApp Support: Chat with us
• Email: [email protected]

💡 Tip: Use GitHub Discussions for general Q&A and feature requests. Use WhatsApp for urgent questions or direct support.

📋 Changelog

v1.0.0

• Initial release
• Lightweight OAuth implementation
• Full TypeScript support
• Cross-platform compatibility
• Zero UI dependencies

🛠 Development

yarn

yarn prepare

yarn workspace react-native-linkedin-signin-lite-example start

📄 License

MIT © Tanvir Faysal