import React, { useState } from 'react';
import { Alert, View, TextInput, Button } from 'react-native';
import { MFAAction } from '@dynamic-labs/sdk-api-core';
import { useDynamic } from './path-to-your-client';
export function EnsureTotpMfaToken() {
const client = useDynamic();
const [code, setCode] = useState('');
const [loading, setLoading] = useState(false);
const promptForMfaIfRequired = async () => {
try {
setLoading(true);
// Check if MFA is required for this action
const required = await client.mfa.isRequiredForAction({
mfaAction: MFAAction.WalletWaasSign,
});
if (!required) {
// No MFA required, proceed with action
Alert.alert('Success', 'No MFA required for this action');
return;
}
if (!code.trim()) {
Alert.alert('Error', 'Please enter your 6-digit code');
return;
}
// Create MFA token with the TOTP code
await client.mfa.authenticateDevice({
code,
createMfaToken: { singleUse: true },
});
// Now perform the action that requires Action-Based MFA
// The token is automatically included in subsequent requests
Alert.alert('Success', 'MFA token created, proceed with action');
} catch (error) {
console.error('Failed to authenticate with MFA:', error);
Alert.alert('Error', 'Failed to authenticate with MFA');
} finally {
setLoading(false);
}
};
return (
<View>
<TextInput
placeholder="Enter 6-digit code"
value={code}
onChangeText={setCode}
keyboardType="numeric"
maxLength={6}
/>
<Button
title="Authenticate & Proceed"
onPress={performSensitiveAction}
disabled={loading}
/>
</View>
);
}