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 client.auth.email.sendOTP('[e-mail]')
await client.auth.email.resendOTP()
await client.auth.email.verifyOTP('received-token')

// Send, retry and then verify OTP to a phone number
await client.auth.sms.sendOTP({
  dialCode: '1',
  iso2: 'us',
  phone: '2793334444',
})
await client.auth.sms.resendOTP()
await client.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.

const EmailSignIn: FC = () => {
  const [email, setEmail] = useState('')
  const [otp, setOtp] = useState('')
  const [otpSent, setOtpSent] = useState(false)

  const handleSendOTP = async () => {
    await client.auth.email.sendOTP(email)
    setOtpSent(true)
  }

  const handleResendOTP = () => {
    client.auth.email.resendOTP()
  }

  const handleVerifyOTP = () => {
    client.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.