Skip to content

Commit 99b8348

Browse files
ElasticBottleElasticBottle
committed
docs: add fresh email and phone number otp docs
1 parent 53dc696 commit 99b8348

File tree

5 files changed

+117
-3
lines changed

5 files changed

+117
-3
lines changed

‎apps/portal/src/app/connect/sidebar.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -130,7 +130,7 @@ export const sidebar: SideBar = {
130130
},
131131
{
132132
name: "Email & Phone",
133-
href: `${connectSlug}/methods/email-and-phone`,
133+
href: `${walletSlug}/sign-in-methods/email-and-phone`,
134134
},
135135
{
136136
name: "External Wallets",

‎apps/portal/src/app/connect/wallet/sign-in-methods/socials/social-config.png‎ renamed to ‎apps/portal/src/app/connect/wallet/sign-in-methods/assets/social-config.png‎

File renamed without changes.

‎apps/portal/src/app/connect/wallet/sign-in-methods/email-and-phone/page.mdx‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
import { ArticleIconCard,Callout, DocImage } from "@doc";
2+
import {
3+
ReactIcon,
4+
TypeScriptIcon,
5+
UnityIcon,
6+
DotNetIcon,
7+
ExternalLinkIcon,
8+
UnrealEngineIcon
9+
} from "@/icons"
10+
import EcosystemSocialConfig from '../assets/social-config.png'
11+
12+
# Email & Phone Number Logins
13+
14+
Users can sign in through Connect via a one-time password sent to their email or SMS.
15+
16+
For both OTP login methods, thirdweb generates a non-custodial wallet. The wallet will enable your users to interact with your application, as well as store tokens and assets they receive while interacting with your application.
17+
18+
## Add Email and Phone Number Login options
19+
20+
### In-App Wallets
21+
22+
To add email and phone number logins to your in-app wallet, refer to the following guides:
23+
24+
<div className="my-4 grid gap-2 md:grid-cols-2 lg:grid-cols-3">
25+
<ArticleIconCard
26+
title="TypeScript"
27+
icon={TypeScriptIcon}
28+
description="Implement in-app wallets in TypeScript"
29+
href="/typescript/v5/inAppWallet#example"
30+
/>
31+
<ArticleIconCard
32+
title="React"
33+
icon={ReactIcon}
34+
description="Implement in-app wallets in React"
35+
href="/react/v5/in-app-wallet/get-started#choose-authentication-methods"
36+
/>
37+
{/* TODO: Link to react native getting started for in appw allet */}
38+
<ArticleIconCard
39+
title="React Native"
40+
icon={ReactIcon}
41+
description="Implement in-app wallets in React Native"
42+
href="/react/v5/in-app-wallet/get-started#choose-authentication-methods"
43+
/>
44+
<ArticleIconCard
45+
title=".NET"
46+
icon={DotNetIcon}
47+
description="Connect in-app wallets in .NET"
48+
href="/dotnet/wallets/providers/in-app-wallet#otp-authentication-flow"
49+
/>
50+
<ArticleIconCard
51+
title="Unity"
52+
icon={UnityIcon}
53+
description="Implement in-app wallets in Unity"
54+
href="/unity/v5/wallets/in-app-wallet#login-with-email"
55+
/>
56+
<ArticleIconCard
57+
title="Unreal Engine"
58+
icon={UnrealEngineIcon}
59+
description="Implement in-app wallets in Unreal Engine"
60+
href="/unreal-engine/blueprints/in-app-wallet#otp"
61+
/>
62+
</div>
63+
64+
### Ecosystem Wallets
65+
66+
In order to use email and phone number logins within your ecosystem, first configurethe allowed social auth methods on [your dashboard](https://thirdweb.com/dashboard).
67+
68+
<DocImage src={EcosystemSocialConfig}/>
69+
70+
Once configured, refer to the following guides to use email and phone number logins within your ecosystem:
71+
72+
<div className="my-4 grid gap-2 md:grid-cols-2 lg:grid-cols-3">
73+
<ArticleIconCard
74+
title="TypeScript"
75+
icon={TypeScriptIcon}
76+
description="Connect ecosystem wallets in TypeScript"
77+
href="/typescript/v5/ecosystemWallet#example"
78+
/>
79+
<ArticleIconCard
80+
title="React"
81+
icon={ReactIcon}
82+
description="Connect ecosystem wallets in React"
83+
href="/react/v5/ecosystem-wallet/get-started#configuring-auth-strategies"
84+
/>
85+
{/* TODO: Add react native specific getting started for ecosystem wallets */}
86+
<ArticleIconCard
87+
title="React Native"
88+
icon={ReactIcon}
89+
description="Connect ecosystem wallets in React Native"
90+
href="/react/v5/ecosystem-wallet/get-started#configuring-auth-strategies"
91+
/>
92+
<ArticleIconCard
93+
title=".NET"
94+
icon={DotNetIcon}
95+
description="Connect ecosystem wallets in .NET"
96+
href="/dotnet/wallets/providers/ecosystem-wallet#otp-authentication-flow"
97+
/>
98+
<ArticleIconCard
99+
title="Unity"
100+
icon={UnityIcon}
101+
description="Connect ecosystem wallets in Unity"
102+
href="/unity/v5/wallets/ecosystem-wallet#login-with-email"
103+
/>
104+
</div>
105+
106+
## Interacting with your App
107+
108+
Once a user signed in and their wallet is generated, you can use the **[Wallet Connection functions](/typescript/v5/functions#wallets)** to get information about the connected wallet like getting the address, account, and more.

‎apps/portal/src/app/connect/wallet/sign-in-methods/socials/page.mdx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import {
77
ExternalLinkIcon,
88
UnrealEngineIcon
99
} from "@/icons"
10-
import EcosystemSocialConfig from './social-config.png'
10+
import EcosystemSocialConfig from '../assets/social-config.png'
1111

1212
# Social Logins
1313

@@ -105,4 +105,4 @@ Once configured, refer to the following guides to use social logins within your
105105

106106
## Interacting with your App
107107

108-
Once a user signed in and their wallet is generated, you can use the **[Wallet Connection hooks](/typescript/v5/functions#wallets)** to get information about the connected wallet like getting the address, account, and more.
108+
Once a user signed in and their wallet is generated, you can use the **[Wallet Connection functions](/typescript/v5/functions#wallets)** to get information about the connected wallet like getting the address, account, and more.

‎apps/portal/src/app/react/v5/in-app-wallet/get-started/page.mdx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import {
33
TabsList,
44
TabsTrigger,
55
TabsContent,
6+
Callout,
67
DocImage,
78
createMetadata,
89
} from "@doc";
@@ -46,6 +47,11 @@ export default function App() {
4647

4748
By default, the connect UI supports multiple social logins as well as email, phone and passkey authentication. You can customize which authentication methods to support which will be reflected in the UI.
4849

50+
<Callout variant="info" title="Authentication Order">
51+
By default, email login is displayed before phone number login. To display phone number first, add "phone" before "email" in the providers array
52+
</Callout>
53+
54+
4955
```tsx
5056
import { ThirdwebProvider, ConnectButton } from "thirdweb/react";
5157
import { inAppWallet } from "thirdweb/wallets";

0 commit comments

Comments
 (0)