# Quick Start: React Embedded Wallet Integration

### 2.1 Install Dependencies
```bash
npm install @uptickjs/webauth-sdk @uptickjs/uptick-aawallet-mpc-sdk
```

### 2.2 Prepare Developer Console
1. Log in to the **Uptick Developer Dashboard** (https://developers.uptick.network/)
2. Switch to the **AA Wallet API** service from the top service selector
3. Create a new application project and copy the exclusive project `API Key`, Bundler URL and Paymaster URL
4. Top up UPTICK tokens for the project to ensure sufficient balance for Gas sponsorship

### 2.3 Initialize WebAuth Social Login
WebAuth Url
```
    Mainnet: https://uptickauth.uptick.network/api
    Testnet: https://uptickauth.testweb.uptick.network/api
```


```typescript
import { createWebAuth, createTokenStorage } from '@uptickjs/webauth-sdk';

// Environment Configuration
const webAuthConfig = {
  apiBaseUrl: 'https://uptickauth.testweb.uptick.network/api', // Testnet
  apiKey: 'Your Project API_KEY',
  redirectUri: 'Your application authorization callback URL',
};

// Instantiate login instance
const webAuth = createWebAuth(webAuthConfig, createTokenStorage('react-native'));
```

### 2.4 Integrate Multi-channel Login
#### 2.4.1 Email Verification Code Login
```typescript
// Send verification code
const sendCodeRes = await webAuth.getAuth().sendEmailCode(emailAddress);
// Log in with verification code
const authResult = await webAuth.getAuth().loginWithEmail(emailAddress, verifyCode);
// Obtain user-controlled EOA address
const userOwnerAddress = authResult.eoaAddress;
```

#### 2.4.2 Google Social Login
**Pre-configuration**
1. Create an OAuth application in Google Cloud Console
   - Go to **APIs & Services → Credentials**, create (or select) a project
   - Configure the **OAuth consent screen** (User Type: `External`; set App name, User support email, and Developer contact email; add test users if still in test mode)
   - Create an **OAuth client ID** with Application type `Web application`
   - Add the authorized redirect URI below and save, then copy the `Client ID` and `Client Secret`
   
2. Authorize redirect URI:

   ```
      Mainnet: https://uptickauth.uptick.network/api/auth/google/callback
   
      Testnet: https://uptickauth.testweb.uptick.network/api/auth/google/callback
  
   ```

**Code Implementation**
```typescript
webAuth.getAuth().loginWithGoogleRedirect().then(async (result) => {
  if (result?.owner) {
    // Login succeeded, get user-controlled EOA address
    const ownerAddr = result.owner;
  }
});
```

#### 2.4.3 Apple Sign-in
**Pre-configuration**
1. Create a Service ID in Apple Developer Console
2. Enable `Sign in with Apple` and configure domain: `auth.uptick.network`
3. Set authorization callback URL:
   ```
   https://auth.uptick.network/auth/apple/callback
   
   https://uptickauth.testweb.uptick.network/auth/apple/callback
   
   ```
4. Generate `.p8` private key and JWT client secret

**Code Implementation**
```typescript
webAuth.getAuth().loginWithAppleRedirect().then(async (result) => {
  if (result?.owner) {
    const ownerAddr = result.owner;
  }
});
```

### 2.5 Initialize Core AA Wallet SDK
```typescript
import { createAaWalletSdk } from '@uptickjs/uptick-aawallet-mpc-sdk';

// Create AA Wallet instance
const aaWalletSdk = createAaWalletSdk();

// Global initialization configuration
aaWalletSdk.init({
  chainId: 1170, // Uptick Origin Testnet Chain ID
  bundlerUrl: 'https://developapi.testweb.uptick.network/v1/aa?apiKey=Your API_KEY',
  paymasterServiceUrl: 'https://developapi.testweb.uptick.network/v1/aa?apiKey=Your API_KEY',
  gasLimitMultiplier: 150, // 1.5x gas multiplier to improve transaction success rate
  skipBundlerGasEstimate: true, // Skip bundler gas estimation, use local calculation
});
```

---