Used for login in consumer using provider app
npm install @d11/dream-auth-loginA 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.
- 🔐 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
``sh`
npm install @d11/dream-auth-login
yarn add @d11/dream-auth-login
`tsx
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
}
});
`
`tsx
import { LoginButton, DreamAuthLoginButtonTheme } from '@d11/dream-auth-login';
function LoginScreen() {
return (
theme={DreamAuthLoginButtonTheme.DARK}
shouldShowD11Icon={true}
disabled={false}
onPress={() => {
// onpress support for additional work on client requirement
}}
/>
);
}
`
`tsx
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);
}
}
`
`tsx
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();
}, []);
}
`
#### initializeAsync(config: DreamAuthConfiguration): Promise
Initializes the SDK with the provided configuration.
Configuration Options:
- clientId (required): Your Dream11 client IDclientName
- (optional): Your application nameredirectUri
- (required): Custom redirect URI for authentication callbackhost
- (required): Array of Dream11 provider hostsdeeplinkProvider
- (required): Deep link scheme for your appscopes
- (optional): Array of OAuth scopes (default: ['openid'])baseUrl
- (optional): Base URL for API callstimeout
- (optional): Request timeout in millisecondsresponseType
- (optional): OAuth response type (default: 'code')httpConfig
- (optional): HTTP configuration objectbaseUrl
- (optional): Base URL for HTTP requeststimeout
- (optional): Request timeout in millisecondsretryCount
- (optional): Number of retry attemptsnonce
- (optional): OAuth nonce parametershouldPersistCookie
- (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.
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.DARKdisabled
- (optional): Whether the button is disabled (default: false)shouldShowD11Icon
- (optional): Whether to show the Dream11 icon (default: true)onPress
- (optional): Custom press handlerstyle
- (optional): Custom button stylestextStyle
- (optional): Custom text stylesicon
- (optional): Custom icon image sourceloadingIndicatorColor
- (optional): Color for the loading indicator
#### DreamAuthProviderHostDream11PlayStore
- : Dream11 Play Store app (com.dream11.fantasy.cricket.football.kabaddi)Dream11
- : Dream11 web APK (com.app.dream11Pro)Dream11Stag
- : Dream11 staging environment (com.app.dream11staging)
#### DreamAuthLoginButtonThemeLIGHT
- : Light theme with white backgroundDARK
- : Dark theme with black background
Add the following to your ios/YourApp/Info.plist:
`xml`
And in your AppDelegate.swift:
`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: [:])
}
}
`
Add the following to your android/app/src/main/AndroidManifest.xml:
`xml`
android:exported="true"
android:launchMode="singleTask">
And in your MainActivity.kt:
`kotlin
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)
}
}
}
``
Check out the example app for a complete implementation.
See the contributing guide to learn how to contribute to the repository and the development workflow.
MIT
---
Made with ❤️ by the Dream11 team