Skip to content

Commit e8f66e2

Browse files
avarobinsonandrobwebbCopilot
authored
docs: adding sms docs (#2085)
* docs: adding sms docs * docs: removing new tag * docs: adding general country support * chore: fix to CR * chore: cr updates * Update docs/pages/authentication/login-methods/sms-login.mdx Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Update docs/pages/authentication/login-methods/sms-login.mdx Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Update docs/pages/authentication/login-methods/sms-login.mdx Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Update docs/pages/authentication/login-methods/sms-login.mdx Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * chore: update to CR --------- Co-authored-by: Andrew Webb <androbwebb@gmail.com> Co-authored-by: Andrew Webb <androbwebb@users.noreply.github.com> Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
1 parent 9cd10a7 commit e8f66e2

File tree

5 files changed

+235
-5
lines changed

5 files changed

+235
-5
lines changed

‎docs-site‎

‎docs/docs.yml‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,9 @@ navigation:
110110
path: wallets/pages/react/login-methods/passkey-login.mdx
111111
- page: Add passkey
112112
path: wallets/pages/react/add-passkey.mdx
113-
- page: "[NEW] On-chain passkeys"
113+
- page: SMS login
114+
path: wallets/pages/authentication/login-methods/sms-login.mdx
115+
- page: "On-chain passkeys"
114116
path: wallets/pages/react/login-methods/onchain-passkeys.mdx
115117
- page: Adding and removing login methods
116118
path: wallets/pages/react/login-methods/adding-and-removing-login-methods.mdx

‎docs/pages/authentication/login-methods/sms-login.mdx‎

Lines changed: 229 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,229 @@
1+
---
2+
title: SMS Authentication
3+
description: How to authenticate users with phone number and SMS OTP code
4+
slug: wallets/authentication/login-methods/sms-login
5+
---
6+
7+
<Info>
8+
SMS auth is currently in closed alpha. If you'd like early access please reach
9+
out to [wallets@alchemy.com](mailto:wallets@alchemy.com).
10+
</Info>
11+
12+
Authenticate users with their phone number by sending verification codes via SMS.
13+
14+
## How It Works
15+
16+
SMS authentication is a two-step process:
17+
18+
1. _Send the verification code:_ the user enters their phone number and requests a verification code.
19+
2. _Submit the verification code:_ the user enters the 6-digit code they receive via SMS to complete authentication.
20+
21+
The SDK will handle phone number validation, code generation, and delivery automatically.
22+
23+
We support all major countries across Europe, Asia, North and South America.
24+
25+
Pricing varies by country and requires specific area codes to be enabled for your account.
26+
27+
## Prerequisites
28+
29+
- Early access to SMS auth configured on your account: [Request early access!](mailto:wallets@alchemy.com)
30+
- A configured app with [smart wallets](/wallets/pages/react/quickstart.mdx) and a [gas sponsorship policy](https://dashboard.alchemy.com/gas-manager/policy/create).
31+
- SDK version ≥v4.53.0
32+
33+
## Implementation
34+
35+
<Tabs>
36+
<Tab title="React">
37+
<Info>
38+
SMS auth is not yet supported with pre-built UI components. Please follow [this guide](/wallets/pages/react/react-hooks) to set up custom UI and configure authentication with hooks.
39+
</Info>
40+
### Step 1: Send the SMS verification code
41+
Ensure you pass the phone number including the country code in the format `+<country code><phone number>` (i.e. `+15553219876).
42+
```tsx twoslash
43+
import { useAuthenticate } from "@account-kit/react"
44+
45+
const { authenticate } = useAuthenticate()
46+
47+
const handleSendCode = (phone: string) => {
48+
authenticate(
49+
{ type: "sms", phone: "+123456789" },
50+
{
51+
onSuccess: () => {
52+
// onSuccess only fires once the entire flow is done (SMS OTP + optional MFA).
53+
// It still runs even if the final step completes in another tab/window.
54+
},
55+
onError: (error) => {
56+
// Handle error
57+
},
58+
},
59+
);
60+
};
61+
```
62+
63+
### Step 2: Show OTP input on status change
64+
Use the `useSignerStatus` hook to show the otp input once the code is sent:
65+
66+
```tsx twoslash
67+
import React from "react";
68+
import { useSignerStatus } from "@account-kit/react";
69+
import { AlchemySignerStatus } from "@account-kit/signer";
70+
71+
const TrackStatus = () => {
72+
const { status } = useSignerStatus();
73+
74+
return (
75+
<>
76+
{status === AlchemySignerStatus.AWAITING_SMS_AUTH && (
77+
<div>Prompt the user to enter the OTP code received via SMS</div>
78+
)}
79+
</>
80+
);
81+
};
82+
```
83+
84+
### Step 3: Verify the OTP code
85+
```tsx twoslash
86+
import { useAuthenticate } from "@account-kit/react";
87+
88+
const { authenticate } = useAuthenticate();
89+
90+
// When the user submits the OTP code
91+
const handleVerifyCode = (otpCode: string) => {
92+
authenticate(
93+
{
94+
type: "otp",
95+
otpCode,
96+
},
97+
{
98+
onSuccess: () => {
99+
// onSuccess only fires once the entire flow is done (SMS OTP).
100+
},
101+
onError: (error) => {
102+
// Handle invalid code error
103+
},
104+
},
105+
);
106+
};
107+
```
108+
109+
### Step 4: Check authentication status
110+
111+
Use the `useSignerStatus` hook we set up before to wait until the user is authenticated:
112+
113+
```tsx twoslash
114+
import { useSignerStatus } from "@account-kit/react";
115+
116+
// Inside your component
117+
const { isConnected } = useSignerStatus();
118+
119+
// You can use isConnected to conditionally render UI
120+
```
121+
</Tab>
122+
<Tab title="React Native">
123+
<Info>
124+
SMS auth is not yet supported with pre-built UI components. Please follow
125+
[this guide](/wallets/pages/react-native/overview) to
126+
set up custom UI and configure authentication with hooks.
127+
</Info>
128+
### Step 1: Send the SMS verification code
129+
Ensure you pass the phone number including the country code in the format `+<country code><phone number>` (i.e. `+15553219876).
130+
```tsx twoslash
131+
import { useAuthenticate } from "@account-kit/react-native"
132+
133+
const { authenticate } = useAuthenticate()
134+
135+
const handleSendCode = (phone: string) => {
136+
authenticate(
137+
{ type: "sms", phone: "+123456789" },
138+
{
139+
onSuccess: () => {
140+
// onSuccess only fires once the entire flow is done (SMS OTP + optional MFA).
141+
// It still runs even if the final step completes in another tab/window.
142+
},
143+
onError: (error) => {
144+
// Handle error
145+
},
146+
},
147+
);
148+
};
149+
```
150+
151+
### Step 2: Show OTP input on status change
152+
Use the `useSignerStatus` hook to show the otp input once the code is sent:
153+
154+
```tsx twoslash
155+
import React from "react";
156+
import { useAuthenticate, useSignerStatus } from "@account-kit/react-native"
157+
import { AlchemySignerStatus } from "@account-kit/signer";
158+
import { View } from "react-native";
159+
160+
const TrackStatus = () => {
161+
const { status } = useSignerStatus();
162+
163+
return (
164+
<>
165+
{status === AlchemySignerStatus.AWAITING_SMS_AUTH && (
166+
<View>Prompt the user to enter the OTP code received via SMS</View>
167+
)}
168+
</>
169+
);
170+
};
171+
```
172+
173+
### Step 3: Verify the OTP code
174+
```tsx twoslash
175+
import { useAuthenticate } from "@account-kit/react-native"
176+
177+
const { authenticate } = useAuthenticate();
178+
179+
// When the user submits the OTP code
180+
const handleVerifyCode = (otpCode: string) => {
181+
authenticate(
182+
{
183+
type: "otp",
184+
otpCode,
185+
},
186+
{
187+
onSuccess: () => {
188+
// onSuccess only fires once the entire flow is done (SMS OTP).
189+
},
190+
onError: (error) => {
191+
// Handle invalid code error
192+
},
193+
},
194+
);
195+
};
196+
```
197+
198+
### Step 4: Check authentication status
199+
200+
Use the `useSignerStatus` hook we set up before to wait until the user is authenticated:
201+
202+
```tsx twoslash
203+
import { useAuthenticate, useSignerStatus } from "@account-kit/react-native"
204+
205+
// Inside your component
206+
const { isConnected } = useSignerStatus();
207+
208+
// You can use isConnected to conditionally render UI
209+
```
210+
</Tab>
211+
<Tab title="Javascript">
212+
<Info>Ensure you've set up your project by following [this](/wallets/pages/core/quickstart) guide first.</Info>
213+
```ts
214+
import { AlchemyWebSigner } from "@account-kit/signer"
215+
const signer = new AlchemyWebSigner(...)
216+
217+
// send sms verification code
218+
await signer.authenticate({ type: "sms", phone: "+123456789" })
219+
...
220+
// verify sms verification code
221+
await signer.authenticate({ type: "otp", otpCode: "123456" })
222+
```
223+
</Tab>
224+
225+
</Tabs>
226+
227+
## Next Steps
228+
229+
- Send [transactions](/wallets/pages/transactions/send-transactions/index.mdx)

‎docs/pages/low-level-infra/gas-manager/gas-sponsorship/using-sdk/pay-gas-with-any-erc20-token.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ You can get these fields through [`alchemy_requestGasAndPaymasterAndData`](/doc
5151

5252
### 4. Send the userOp
5353

54-
Once you get the `paymaster` and `paymasterData` fields, you can use them in your userOperation when you call [`eth_sendUserOperation`](https://www.alchemy.com/reference/eth-senduseroperation). You can find an example script below.
54+
Once you get the `paymaster` and `paymasterData` fields, you can use them in your userOperation when you call [`eth_sendUserOperation`](https://www.alchemy.com/docs/wallets/api-reference/bundler-api/bundler-api-endpoints/eth-send-user-operation). You can find an example script below.
5555

5656
## Example script
5757

‎docs/pages/signer/authentication/server-wallets.mdx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,7 @@ slug: wallets/authentication/login-methods/server-wallets
66

77
<Tip>
88
Server wallets are in early access and we'd love to hear how you're using
9-
them! Contact us at contact@alchemy.com or through your Slack channel if
10-
you're interested in using this feature- we'd love to help you get up and
9+
them! Contact us at wallets@alchemy.com - we'd love to help you get up and
1110
running.
1211
</Tip>
1312

0 commit comments

Comments
 (0)