Choose your approach
Pre-built components
Drop-in React UI with polished design. Best for most apps.
React hooks
Build custom UI with React. Required for SMS enrollment.
Core SDK
Direct API calls. For non-React apps.
Ready-to-use components (recommended)
@coinbase/cdp-react provides ready-to-use components with a polished UI.
Pre-built components support TOTP (authenticator apps). For SMS enrollment, use React hooks below.
For controlled modals, custom layouts, or embedding enrollment in non-modal containers, see the EnrollMfa component reference.
Custom UIs using React Hooks
For custom UI or SMS enrollment, use hooks from@coinbase/cdp-hooks.
Enrollment is a two-step process:
- Initiate — Call
useInitiateMfaEnrollmentto start enrollment (returns QR code for TOTP, sends SMS for text message) - Submit — Call
useSubmitMfaEnrollmentwith the 6-digit code to complete enrollment
- TOTP
- SMS
For complete UI implementations with error handling, loading states, and form validation, see the MFA section in the cdp-hooks reference.
Direct API calls for non-React
For non-React applications, use functions from@coinbase/cdp-core.
- TOTP
- SMS
For full API details, see the cdp-core reference.
Checking enrollment status
Before prompting users to enroll, check if they already have MFA enabled.- React
- Core SDK
Validating phone numbers
For SMS enrollment, validate phone numbers before submission:E.164 format requirements
E.164 format requirements
- Must start with
+followed by country code - No spaces, hyphens, or parentheses
- Examples:
+14155552671(US),+442071838750(UK),+81312345678(Japan)
Troubleshooting
Invalid TOTP code
Invalid TOTP code
Common causes:
- Time synchronization issues between device and server
- User entering an expired code (TOTP codes refresh every 30 seconds)
- Incorrect authenticator app setup
- Ensure device time is synchronized with network time
- Ask users to wait for a new code and try again
- Provide option to re-enroll in MFA
- Verify the QR code was scanned correctly during enrollment
SMS not received
SMS not received
Common causes:
- Invalid phone number format (not E.164)
- Carrier delays or filtering
- Phone number not capable of receiving SMS
- Rate limiting exceeded
- Validate phone number format before submission using
validatePhoneNumber() - Provide clear error messages for rate limiting
- Offer TOTP as alternative method
- Allow users to check and update their phone number
Invalid phone number format
Invalid phone number format
Error message:
Invalid phone number format. Phone number must be in E.164 format (e.g., +14155552671)Solutions:- Use E.164 format:
+[country code][subscriber number] - Examples:
- US:
+14155552671 - UK:
+442071838750 - Japan:
+81312345678
- US:
- Remove any spaces, hyphens, or parentheses
- Must start with
+and country code (never0) - Use
validatePhoneNumber()helper to validate before submission
Lost authenticator app or phone access
Lost authenticator app or phone access
Recovery options:
- If user has both TOTP and SMS enrolled, they can use the other method
- Implement account recovery through primary authentication method
- Allow MFA reset after verifying via email or other auth method
- Provide customer support flow for account recovery
- Consider implementing backup codes for recovery (future enhancement)