Dashboard Configuration
Simply toggle on “Email” in the Log in & User Profile section of the dashboard.Using our UI
Once toggled on, these methods will be available in the Dynamic widget.Using your UI
- React
- React Native
- Javascript
- Swift
- Flutter
All we will need for this use case is the useConnectWithOtp hook. This exposes multiple methods, and we are interested primarily in the following:
- connectWithEmail
- verifyOneTimePassword
React
Copy
Ask AI
import { FC, FormEventHandler } from 'react';
import { useConnectWithOtp, useDynamicContext } from '@dynamic-labs/sdk-react-core';
const ConnectWithEmailView: FC = () => {
const { user } = useDynamicContext()
const { connectWithEmail, verifyOneTimePassword } = useConnectWithOtp();
const onSubmitEmailHandler: FormEventHandler<HTMLFormElement> = async (
event,
) => {
event.preventDefault();
const email = event.currentTarget.email.value;
await connectWithEmail(email);
};
const onSubmitOtpHandler: FormEventHandler<HTMLFormElement> = async (
event,
) => {
event.preventDefault();
const otp = event.currentTarget.otp.value;
await verifyOneTimePassword(otp);
};
return (
<div>
<form key='email-form' onSubmit={onSubmitEmailHandler}>
<input type='email' name='email' placeholder='Email' />
<button type='submit'>Submit</button>
</form>
<form key='otp-form' onSubmit={onSubmitOtpHandler}>
<input type='text' name='otp' placeholder='OTP' />
<button type='submit'>Submit</button>
</form>
{!!user && (
<p>Authenticated user:</p>
<pre>
{JSON.stringify(user, null, 2)}
</pre>
)}
</div>
)
}
React Native provides email authentication through the dynamic client’s auth methods, allowing you to send OTP codes and verify them.
React Native
Copy
Ask AI
import { dynamicClient } from '<path to client file>';
import { useState } from 'react';
import { View, TextInput, Button } from 'react-native';
const EmailSignIn = () => {
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 = async () => {
await 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>
);
};
Prerequisites
- You need to have the Dynamic Client initialized (See this guide on how to do that).
Usage
Copy
Ask AI
import {
sendEmailOTP,
verifyOTP
} from '@dynamic-labs-sdk/client';
// With the user's email, call sendEmailOTP to get the otpVerification
// Then, once the user inputs the OTP code, call verifyOTP to verify it and complete the authentication
let otpVerification = null
const singInWithEmail = async () => {
// Replace '[email protected]' with the user's email address
otpVerification = await sendEmailOTP({ email: '[email protected]' });
// Store the otpVerification for later use with the verifyOTP function
};
const verifyOTP = async () => {
// Use the same otpVerification object that you got from the sendEmailOTP function
// Replace '123456' with the OTP code entered by the user
await verifyOTP({ otpVerification, otp: '123456' });
};
Swift
Copy
Ask AI
import DynamicSwiftSDK
import UIKit
class AuthenticationViewController: UIViewController {
var dynamicClient: DynamicClient!
var currentOtpVerification: OTPVerification?
@IBAction func sendEmailOtpTapped(_ sender: UIButton) {
guard let email = emailTextField.text, !email.isEmpty else { return }
Task {
do {
let otpVerification = try await sendEmailOtp(
client: dynamicClient,
email: email
)
currentOtpVerification = otpVerification
} catch {
}
}
}
@IBAction func verifyOtpTapped(_ sender: UIButton) {
guard let otpCode = otpTextField.text, !otpCode.isEmpty,
let otpVerification = currentOtpVerification else { return }
Task {
do {
_ = try await verifyOtp(
otpVerification: otpVerification,
verificationToken: otpCode
)
} catch {
}
}
}
}
Copy
Ask AI
class EmailLoginButton extends StatelessWidget {
const EmailLoginButton({
super.key,
});
@override
Widget build(BuildContext context) {
return ElevatedButton(
onPressed: () async => await DynamicSDK.instance.auth.email.sendOTP(
'[email protected]'
),
child: const Text('Email Login'),
);
}
}
Rate Limits
Email verification is subject to the following rate limits:- 3 attempts per 10 minutes per email address