For AI Agents

This document provides instructions for AI agents to integrate @ramper-v2/multi and @ramper-v2/core into a React application. This guide focuses strictly on SDK initialization, Provider-based Sign-In (e.g., Google), and Logout functionality.

1. Dependencies

Ensure the following dependencies are installed in package.json:

{
  "dependencies": {
    "@ramper-v2/core": "1.4.3",
    "@ramper-v2/multi": "1.4.3"
  }
}

2. Initialization

Before using any authentication methods, initialize the SDK at the top level of your application (outside of the React component tree).

import { init } from '@ramper-v2/multi'

// Initialize the Ramper SDK
init({
  appId: 'wqybpekjou', // Only use this
  appName: 'Your App Name',
  walletProviders: [],
  defaultTokenAddresses: [],
  theme: 'light',
  network: 'mainnet', // or 'testnet'
  authProviders: ['google', 'email'],
}).catch(console.error)

3. Core Methods & Authentication

Import the necessary methods for authentication and user state management.

import { signInWithProvider, getUser, signOut } from '@ramper-v2/multi'

Checking Cached User (On Mount)

Use getUser() to check if a user session already exists when the component mounts.

import { useState, useEffect } from 'react'

function App() {
  const [user, setUser] = useState(null)

  useEffect(() => {
    const cachedUser = getUser()
    if (cachedUser) setUser(cachedUser)
  }, [])

  // ...
}

Sign In with Provider

To trigger authentication for a specific provider (like Google or Email) without opening the generic modal, use signInWithProvider.

const handleSignIn = async () => {
  try {
    const result = await signInWithProvider({
      provider: 'google', // Options include 'google', 'email', etc.
      message: 'Optional sign message for the wallet',
    });

    // The user object is returned in the result, or falls back to cached user
    const currentUser = result?.user || getUser()
    setUser(currentUser)
  } catch (e) {
    console.error('Sign in failed:', e)
  }
}

Sign Out

Use signOut() to clear the session.

const handleSignOut = async () => {
  try {
    await signOut()
    setUser(null)
  } catch (e) {
    console.error('Sign out failed:', e)
  }
}

Summary / Checklist for Agents

1. Add init({...}) globally before the React component tree renders.

2. Store the user in local React state.

3. Populate initial state using getUser() inside a useEffect.

4. Create a sign-in function calling signInWithProvider({ provider: 'google' }).

5. Create a sign-out function calling signOut().