# Embedding ReferralHero Widget in React Native WebView

## Embedding ReferralHero Widget in React Native WebView

#### 1. Identify the Subscriber Using the API

To begin, call the **Add Subscriber Endpoint** using the following endpoint:

**Endpoint:**\
`https://app.referralhero.com/api/sdk/v1/lists/UUID/subscribers`

Send the necessary mobile parameters and subscriber details. The API response will include a **subscriber ID**, which is required for authentication.\
It is crucial to store the **subscriber ID** securely as it will be used for future authentication. Make sure that the API call is handled properly and errors are logged for debugging.

#### 2. Set Authentication Cookies in the WebView

Before loading the widget, ensure the WebView injects the **subscriber ID** as a cookie. These cookies allow the widget to automatically recognize the user without requiring manual authentication.\
This step helps in reducing friction for users, enabling a smoother experience without the need for repeated logins.

#### 3. Embed the Widget Inside a WebView

The RH-hosted page, containing the widget, should be loaded within a **WebView** inside the React Native app. This ensures that the widget functions exactly as it does in a standard browser environment.\
Additionally, ensure that WebView settings allow JavaScript execution and storage access, which is necessary for proper widget functionality.

#### 4. Auto-Redirect to the Share Screen

Once the widget detects the **authentication cookies**, it will bypass the login screen and directly load the share screen. This creates a **seamless user experience**, similar to accessing the widget from a logged-in web browser.

To further enhance user experience, consider adding loading indicators while the WebView is initializing to inform users of ongoing processes.

**Implementation**

```jsx
import React, { useEffect, useState, useRef } from 'react';
import { View, StyleSheet, Alert } from 'react-native';
import { WebView } from 'react-native-webview';
import AsyncStorage from '@react-native-async-storage/async-storage';

const ReferralWidget = () => {
  const webViewRef = useRef(null);
  const [injectedJS, setInjectedJS] = useState('');

  useEffect(() => {
    const fetchId = async () => {
      const id = await AsyncStorage.getItem("id");
      if (id) {
        const script = `
          document.cookie = "__maitre-anonymous-MFxxxxxxxxx=${id}; path=/; max-age=86400";
          document.cookie = "__maitre-session-MFxxxxxxxxx=${id}; path=/; max-age=86400";
          window.ReactNativeWebView.postMessage(document.cookie);
        `;
        setInjectedJS(script);
      }
    };
    fetchId();
  }, []);

  const handleMessage = (event) => {
    //Alert.alert("Cookies", event.nativeEvent.data);
  };

  return (
    <View style={styles.container}>
      {injectedJS ? (
        <WebView 
          ref={webViewRef}
          source={{ uri: 'https://campaign.referralhero.com/MFxxxxxxxx/dashboard' }}
          javaScriptEnabled={true}
          domStorageEnabled={true}
          startInLoadingState={true} 
          onLoadEnd={() => console.log("WebView Loaded Successfully")}
          injectedJavaScript={injectedJS}
          onMessage={handleMessage}
        />
      ) : null}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  }
});

export default ReferralWidget;
```

This implementation ensures that the **subscriber authentication process is seamless**, automatically logging users into the referral widget inside the React Native WebView.