React Native
Email and SMS verification
The dynamic client authentication module enables user authentication via email or SMS.
Notice that email and SMS login methods must be respectively enabled in your environment’s dashboard settings first!
Sending and verifying OTPs
The methods below can be used to send/resend and verify one time passwords
// Send, retry and then verify OTP to an email
await dynamicClient.auth.email.sendOTP('[email protected]')
await dynamicClient.auth.email.resendOTP()
await dynamicClient.auth.email.verifyOTP('received-token')
// Send, retry and then verify OTP to a phone number
await dynamicClient.auth.sms.sendOTP({
dialCode: '1',
iso2: 'us',
phone: '2793334444',
})
await dynamicClient.auth.sms.resendOTP()
await dynamicClient.auth.sms.verifyOTP('received-token')
Example
The example below demonstrates a React component that can send, resend and verify OTPs through email.
You can follow the same pattern for phone numbers but collect phone number, iso2 and dial code instead of email address.
import { dynamicClient } from '<path to client file>';
const EmailSignIn: FC = () => {
const [email, setEmail] = useState('')
const [otp, setOtp] = useState('')
const [otpSent, setOtpSent] = useState(false)
const handleSendOTP = async () => {
await dynamicClient.auth.email.sendOTP(email)
setOtpSent(true)
}
const handleResendOTP = () => {
dynamicClient.auth.email.resendOTP()
}
const handleVerifyOTP = () => {
dynamicClient.auth.email.verifyOTP(otp)
}
return (
<View>
{!otpSent ? (
<View>
<TextInput
value={email}
onChangeText={setEmail}
placeholder="Enter your email"
/>
<Button onPress={handleSendOTP}>Send OTP</Button>
</View>
) : (
<View>
<TextInput
value={otp}
onChangeText={setOtp}
placeholder="Enter OTP"
/>
<Button onPress={handleVerifyOTP}>Verify OTP</Button>
<Button onPress={handleResendOTP}>Resend OTP</Button>
</View>
)}
</View>
)
}
You can read more about these modules here.
Was this page helpful?