Overview
Leveraging Dynamicโs React package, this guide will help you create a sign in / sign up flow based on an sms login form.
We use the useConnectWithOtp
hook to expose two methods: connectWithSms
and verifyOneTimePassword
.
The first method will send an SMS to the userโs phone number, and the second will verify the OTP sent to the userโs phone.
Once thatโs done, the user will be authenticated and you can access their information through the useDynamicContext
hook!
Dashboard Setup
SMS Signup/Login
The first thing youโll want to do is create a new Dynamic organization and setup Dashboard.
- Sign up at app.dynamic.xyz
- Fill in the modal to create your organization and project.
- Under the Developer menu, go to SDK & APIs and fetch the Environment ID. Keep this as weโll need this key in a little bit.
Next weโll want to enable SMS signup/login:
For more information on how to configure SMS signup/login, check out our SMS Signup/Login guide.
Configuring the SDK
Letโs start by installing our packages. Follow our Quickstart guide for a detailed walkthrough.
When youโre done, weโll update our App.js to include our environment ID in the setup and import the DynamicContextProvider
and EthereumWalletConnectors
.
You app.js file should look like this (note that we are only importing the EthereumWalletConnectors for now):
import { DynamicContextProvider } from '@dynamic-labs/sdk-react-core';
import { EthereumWalletConnectors } from "@dynamic-labs/ethereum";
// Placeholder for our SMS signup/login form component
import ConnectWithSmsView from './ConnectWithSmsView';
function App() {
return (
<div className="App">
<DynamicContextProvider
settings={{
environmentId: "YOUR_ENVIRONMENT_ID_GOES_HERE",
walletConnectors: [ EthereumWalletConnectors ],
}}
>
<ConnectWithSmsView />
</DynamicContextProvider>
</div>
);
}
export default App;
SMS Signup/Login UI
Now that we have our environment, we can create our SMS signup/login form. We use the useConnectWithOtp
hook to handle the SMS setup.
import { FC, FormEventHandler } from 'react';
import { useConnectWithOtp, useDynamicContext } from '@dynamic-labs/sdk-react-core';
const ConnectWithSmsView: 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>
)
}
export default ConnectWithSmsView