@d11/dream-auth-login

@d11/dream-auth-login

A React Native SDK for seamless Dream11 authentication integration. This library provides a complete authentication solution for integrating Dream11 login functionality into your React Native applications.

Features

• 🔐 OAuth 2.0 Integration: Secure authentication flow with Dream11
• 🎨 Customizable Login Button: Pre-built login button component with light/dark themes
• 📱 Cross-Platform: Works on both iOS and Android with old and new architecture support
• 🔄 Deep Link Support: Handles authentication callbacks via deep links
• ⚡ TypeScript Support: Full TypeScript definitions included
• Easy Integration: Simple API for quick setup

Installation

npm install @d11/dream-auth-login
yarn add @d11/dream-auth-login

Quick Start

1. Initialize the SDK

import DreamAuthLogin, { DreamAuthProviderHost } from '@d11/dream-auth-login';

// Initialize the SDK with your configuration on the app startup
await DreamAuthLogin.initializeAsync({
  clientId: 'your-client-id',
  clientName: 'Your App Name',
  redirectUri: 'yourapp://auth-callback',
  host: [DreamAuthProviderHost.Dream11], // or Dream11PlayStore, Dream11Stag
  deeplinkProvider: 'dream11',
  scopes: ['profile', 'email'],
  baseUrl: 'https://api.dream11.com',
  forceWebViewLogin: false,
  shouldPersistCookie: true,
  onLoginCallback: (status, data) => {
    // you will get authcode here
  }
});

2. Use the Login Button Component

import { LoginButton, DreamAuthLoginButtonTheme } from '@d11/dream-auth-login';

function LoginScreen() {
  return (
    <LoginButton
      title="LOGIN WITH DREAM11"
      theme={DreamAuthLoginButtonTheme.DARK}
      shouldShowD11Icon={true}
      disabled={false}
      onPress={() => {
        // onpress support for additional work on client requirement
      }}
    />
  );
}

3. Manual Login Flow

import DreamAuthLogin from '@d11/dream-auth-login';

async function handleManualLogin() {
  try {
    const result = await DreamAuthLogin.startLoginFlow();
    console.log('Login result:', result);
  } catch (error) {
    console.error('Login failed:', error);
  }
}

4. Deep Link Handling

import DreamAuthLogin from '@d11/dream-auth-login';
import { useEffect } from 'react';
import { Linking } from 'react-native';

export function useDeepLinkListener() {
  useEffect(() => {
    const handleDeepLink = (event: { url: string }) => {
      DreamAuthLogin.proceedDeeplink(event.url);
    };

    const subscription = Linking.addEventListener('url', handleDeepLink);

    Linking.getInitialURL().then((url) => {
      if (url) DreamAuthLogin.proceedDeeplink(url);
    });

    return () => subscription.remove();
  }, []);
}

API Reference

DreamAuthLoginSDK

initializeAsync(config: DreamAuthConfiguration): Promise<InitResponse>

Initializes the SDK with the provided configuration.

Configuration Options:

• clientId (required): Your Dream11 client ID
• clientName (optional): Your application name
• redirectUri (required): Custom redirect URI for authentication callback
• host (required): Array of Dream11 provider hosts
• deeplinkProvider (required): Deep link scheme for your app
• scopes (optional): Array of OAuth scopes (default: ['openid'])
• baseUrl (optional): Base URL for API calls
• timeout (optional): Request timeout in milliseconds
• responseType (optional): OAuth response type (default: 'code')
• httpConfig (optional): HTTP configuration object
  • baseUrl (optional): Base URL for HTTP requests
  • timeout (optional): Request timeout in milliseconds
  • retryCount (optional): Number of retry attempts
• nonce (optional): OAuth nonce parameter
• shouldPersistCookie (optional): Whether to persist cookies (default: true)
• forceWebViewLogin (optional): Force WebView login instead of app (default: false)
• onLoginCallback (optional): Callback function for login events and authcode

startLoginFlow(): Promise<{status: string, data: {authCode?: string, message?: string}}>

Initiates the login flow and returns the authentication result.

proceedDeeplink(uri: string): Promise<{handled: boolean}>

Processes incoming deep links and returns whether the link was handled.

isInitialized(): boolean

Returns whether the SDK has been initialized.

LoginButton Component

A pre-built login button component with Dream11 branding.

Props:

• title (optional): Button text (default: "LOGIN WITH DREAM11")
• theme (optional): Button theme - DreamAuthLoginButtonTheme.LIGHT or DreamAuthLoginButtonTheme.DARK
• disabled (optional): Whether the button is disabled (default: false)
• shouldShowD11Icon (optional): Whether to show the Dream11 icon (default: true)
• onPress (optional): Custom press handler
• style (optional): Custom button styles
• textStyle (optional): Custom text styles
• icon (optional): Custom icon image source
• loadingIndicatorColor (optional): Color for the loading indicator

Enums

DreamAuthProviderHost

• Dream11PlayStore: Dream11 Play Store app (com.dream11.fantasy.cricket.football.kabaddi)
• Dream11: Dream11 web APK (com.app.dream11Pro)
• Dream11Stag: Dream11 staging environment (com.app.dream11staging)

DreamAuthLoginButtonTheme

• LIGHT: Light theme with white background
• DARK: Dark theme with black background

Deep Link Configuration

iOS

Add the following to your ios/YourApp/Info.plist:

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleTypeRole</key>
    <string>Editor</string>
    <key>CFBundleURLName</key>
    <string>{client-app-package}</string>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>{clientAppName}</string>
    </array>
  </dict>
</array>
<key>LSApplicationQueriesSchemes</key>
<array>
  <string>dream11</string>
</array>

And in your AppDelegate.swift:

import DreamAuthLogin

@main
class AppDelegate: UIResponder, UIApplicationDelegate {
  // ... existing code ...

  func application(_ application: UIApplication, handleOpen url: URL) -> Bool {
    if url.scheme == "{your-app-scheme}" {
      DreamAuthFlowController.handleRedirect(url.absoluteString)
      return true
    }
    return RCTLinkingManager.application(application, open: url, options: [:])
  }
}

Android

Add the following to your android/app/src/main/AndroidManifest.xml:

<activity
  android:name=".MainActivity"
  android:exported="true"
  android:launchMode="singleTask">
  
  <!-- add below intent filters -->
  
  <intent-filter>
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data android:scheme="{your-app-scheme}" />
  </intent-filter>
</activity>

And in your MainActivity.kt:

import com.dreamauthlogin.flow.DreamAuthFlowController

class MainActivity : ReactActivity() {
  override fun onNewIntent(intent: Intent?) {
    super.onNewIntent(intent)
    handleDeepLink(intent)
  }

  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    handleDeepLink(intent)
  }

  private fun handleDeepLink(intent: Intent?) {
    val uri: Uri? = intent?.data
    if (uri != null) {
      DreamAuthFlowController.handleRedirect(uri)
    }
  }
}

Example

Check out the example app for a complete implementation.

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Made with ❤️ by the Dream11 team