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
await dynamicClient.auth.email.sendOTP('someone@gmail.com')
await dynamicClient.auth.email.resendOTP()
await dynamicClient.auth.email.verifyOTP('received-token')
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.