Parakh Proxy

A minimal React Native package providing clean, attractive sign-in buttons for Google, Apple, and OTP authentication.

Installation

npm install parakh-proxy @react-native-google-signin/google-signin @invertase/react-native-apple-authentication

or

yarn add parakh-proxy @react-native-google-signin/google-signin @invertase/react-native-apple-authentication

Additional Setup

For Google Sign-In and Apple Sign-In to work, you'll need to follow the setup instructions for each library:

• Google Sign-In Setup
• Apple Sign-In Setup

Usage

Basic Usage (Custom Handlers)

import React from 'react';
import { ParakhProxy } from 'parakh-proxy';

const App = () => {
  const handleGoogleSignIn = (user, error) => {
    if (error) {
      console.log('Google Sign In error:', error);
      return;
    }
    console.log('Google Sign In success:', user);
    // Implement your custom Google sign-in logic here
  };

  const handleAppleSignIn = (user, error) => {
    if (error) {
      console.log('Apple Sign In error:', error);
      return;
    }
    console.log('Apple Sign In success:', user);
    // Implement your custom Apple sign-in logic here
  };

  const handleOTPSignIn = () => {
    console.log('OTP Sign In pressed');
    // Implement your OTP sign-in logic here
  };

  return (
    <ParakhProxy
      onGoogleSignIn={handleGoogleSignIn}
      onAppleSignIn={handleAppleSignIn}
      onOTPSignIn={handleOTPSignIn}
    />
  );
};

export default App;

Built-in Authentication

import React from 'react';
import { ParakhProxy } from 'parakh-proxy';

const App = () => {
  const handleGoogleSignIn = (user, error) => {
    if (error) {
      console.log('Google Sign In error:', error);
      return;
    }
    console.log('Google user info:', user);
    // Handle successful Google sign-in
  };

  const handleAppleSignIn = (user, error) => {
    if (error) {
      console.log('Apple Sign In error:', error);
      return;
    }
    console.log('Apple user info:', user);
    // Handle successful Apple sign-in
  };

  const handleOTPSignIn = () => {
    console.log('OTP Sign In pressed');
    // Implement your OTP sign-in logic here
  };

  return (
    <ParakhProxy
      enableBuiltInSignIn={true}
      googleSignInConfig={{
        webClientId: 'your-google-web-client-id.googleusercontent.com',
        offlineAccess: true,
      }}
      onGoogleSignIn={handleGoogleSignIn}
      onAppleSignIn={handleAppleSignIn}
      onOTPSignIn={handleOTPSignIn}
    />
  );
};

export default App;

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | onGoogleSignIn | (user: User \| null, error?: string) => void | undefined | Callback function for Google sign-in result | | onAppleSignIn | (user: any \| null, error?: string) => void | undefined | Callback function for Apple sign-in result | | onOTPSignIn | () => void | undefined | Callback function for OTP sign-in button press | | containerStyle | ViewStyle | undefined | Custom style for the container | | buttonStyle | ViewStyle | undefined | Custom style for all buttons | | textStyle | TextStyle | undefined | Custom style for button text | | disabled | boolean | false | Disable all buttons | | enableBuiltInSignIn | boolean | false | Enable built-in authentication functionality | | googleSignInConfig | GoogleSignInConfig | undefined | Configuration for Google Sign-In (required if enableBuiltInSignIn is true) |

GoogleSignInConfig

| Property | Type | Required | Description | |----------|------|----------|-------------| | webClientId | string | Yes | Your Google Web Client ID | | offlineAccess | boolean | No | Request offline access | | hostedDomain | string | No | Restrict sign-in to a specific domain | | forceCodeForRefreshToken | boolean | No | Force code for refresh token |

Customization

You can customize the appearance of the buttons by passing custom styles:

<ParakhProxy
  onGoogleSignIn={handleGoogleSignIn}
  onAppleSignIn={handleAppleSignIn}
  onOTPSignIn={handleOTPSignIn}
  containerStyle={{ paddingHorizontal: 40 }}
  buttonStyle={{ borderRadius: 20, height: 55 }}
  textStyle={{ fontSize: 18, fontWeight: 'bold' }}
/>

Features

• ✅ Minimal and clean UI design
• ✅ Three pre-styled authentication buttons
• ✅ Built-in Google Sign-In integration
• ✅ Built-in Apple Sign-In integration (iOS only)
• ✅ Custom authentication handler support
• ✅ Fully customizable styling
• ✅ TypeScript support
• ✅ Cross-platform (iOS & Android)
• ✅ Comprehensive error handling

Default Styling

The package comes with attractive default styling:

• Google Button: Blue (#4285F4) with white text
• Apple Button: Black (#000000) with white text
• OTP Button: Green (#34C759) with white text

All buttons feature subtle shadows and smooth press animations for a polished user experience.

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.