Summary
This hook allows for authenticating a user using email or sms OTP without the standard Dynamic SDK.
How it works
The useConnectWithOtp
hook exposes the connectWithEmail
, connectWithSms
and verifyOneTimePassword
functions, with these functions you can send an OTP to a user and then verify the OTP code the user received.
The hook works with Dynamic User Verification provider.
Method | Type | Description |
---|
connectWithEmail | (email: string) => Promise | Sends the OTP to the provided email |
connectWithSms | (phone: PhoneData) => Promise | Sends the OTP to the provided phone |
verifyOneTimePassword | (oneTimePassword: string) => Promise | Verify the provided OTP. The returned promise will be resolved if the OTP is valid or it will be rejected if the OTP is invalid |
Examples
Verify user with email OTP headless
import { FC, FormEventHandler } from 'react';
import { useConnectWithOtp, useDynamicContext } from '@dynamic-labs/sdk-react-core';
const ConnectWithOrpView: 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>
)
}
This will display a field to input the email when the user is not authenticated or a field to verify the OTP code if the user is already authenticated.
Once the OTP is verified, the Dynamic SDK will be authenticated and you can find the user object using the useDynamicContext hook.
Verify user with sms OTP headless
import { FC, FormEventHandler } from 'react';
import { useConnectWithOtp, useDynamicContext } from '@dynamic-labs/sdk-react-core';
const ConnectWithOrpView: FC = () => {
const { user } = useDynamicContext()
const { connectWithSms, verifyOneTimePassword } = useConnectWithOtp();
const onSubmitSmsHandler: FormEventHandler<HTMLFormElement> = async (
event,
) => {
event.preventDefault();
const phone = {
dialCode: event.currentTarget.dialCode.value,
iso2: event.currentTarget.iso2.value,
phone: event.currentTarget.phone.value,
};
await connectWithSms(phone);
};
const onSubmitOtpHandler: FormEventHandler<HTMLFormElement> = async (
event,
) => {
event.preventDefault();
const otp = event.currentTarget.otp.value;
await verifyOneTimePassword(otp);
};
return (
<div>
<form key='sms-form' onSubmit={onSubmitSmsHandler}>
<label htmlFor='iso2'>Country ISO Code:</label>
<input type='text' name='iso2' placeholder='US' />
<label htmlFor='dialCode'>Country Dial Code:</label>
<input type='text' name='dialCode' placeholder='1' />
<label htmlFor='phone'>Phone Number (without dial code):</label>
<input type='text' name='phone' placeholder='5555555555' />
<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>
)
}
This will display three fields to input the phone data when the user is not authenticated: country iso code (e.g: ‘US’), country dial code (e.g. ‘1’) and phone number (e.g. ‘5555555555’)
If user is already authenticated, it will display a field to verify the OTP code.
Once the OTP is verified, the Dynamic SDK will be authenticated and you can find the user object using the useDynamicContext hook.