Skip to content

Commit 4e8f53d

Browse files
ElasticBottleElasticBottle
committed
docs: update thirdweb wallet auth usage docs
1 parent 30ca911 commit 4e8f53d

File tree

11 files changed

+337
-316
lines changed

11 files changed

+337
-316
lines changed

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

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -121,16 +121,12 @@ export const sidebar: SideBar = {
121121
name: "Sign-In Methods",
122122
links: [
123123
{
124-
name: "Guest Mode",
125-
href: `${walletSlug}/sign-in-methods/guest`,
126-
},
127-
{
128-
name: "Social Login",
129-
href: `${walletSlug}/sign-in-methods/socials`,
124+
name: "Overview",
125+
href: `${walletSlug}/sign-in-methods/overview`,
130126
},
131127
{
132-
name: "Email & Phone",
133-
href: `${walletSlug}/sign-in-methods/email-and-phone`,
128+
name: "Guest Mode",
129+
href: `${walletSlug}/sign-in-methods/guest`,
134130
},
135131
{
136132
name: "External Wallets",

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

Lines changed: 0 additions & 108 deletions
This file was deleted.

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

Lines changed: 153 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,12 @@
1-
import { createMetadata, Callout, CodeBlock, Tabs, TabsContent, TabsList, TabsTrigger, } from "@doc";
1+
import { createMetadata, ArticleIconCard, Callout } from "@doc";
2+
import {
3+
ReactIcon,
4+
TypeScriptIcon,
5+
UnityIcon,
6+
DotNetIcon,
7+
ExternalLinkIcon,
8+
UnrealEngineIcon
9+
} from "@/icons"
210

311
export const metadata = createMetadata({
412
image: {
@@ -20,61 +28,154 @@ Sometimes users want to get started using your app without signing in. You can n
2028
The examples below show how to use Guest Mode with In-App Wallets, but the same principles apply to Ecosystem Wallets.
2129
</Callout>
2230

23-
<Tabs defaultValue={"typescript"}>
24-
<TabsList>
25-
<TabsTrigger value="typescript">typescript</TabsTrigger>
26-
<TabsTrigger value="react">react/react native</TabsTrigger>
27-
<TabsTrigger value="dotnet">.NET</TabsTrigger>
28-
</TabsList>
29-
<TabsContent value="typescript">
30-
<CodeBlock code={`import { inAppWallet } from "thirdweb/wallets";
31-
const wallet = inAppWallet();
32-
33-
// Create the temporary guest account
34-
const account = await wallet.connect({
35-
client,
36-
strategy: "guest",
37-
});`} lang="typescript" />
38-
</TabsContent>
39-
<TabsContent value="react">
40-
<CodeBlock code={`
41-
import { ConnectButton } from "thirdweb/react";
42-
import { inAppWallet } from "thirdweb/wallets";
43-
44-
<ConnectButton
45-
wallets={[
46-
inAppWallet({
47-
auth: {
48-
options: ["google", "discord", "telegram", "email", "phone", "guest"],
49-
},
50-
}),
51-
]}
52-
/>;`} lang="jsx" />
53-
</TabsContent>
54-
<TabsContent value="dotnet">
55-
<CodeBlock code={`var wallet = await InAppWallet.Create(client: client, authProvider: AuthProvider.Guest);
56-
var address = await wallet.LoginWithGuest();`} lang="csharp" />
57-
</TabsContent>
58-
</Tabs>
31+
## Logging in with Guest Mode
5932

33+
In general, logging in with guest mode is the same as configuring any other login method in the platform of your choice. See the [login methods overview](/connect/wallet/sign-in-methods/overview) for more information on configuring your login options.
34+
35+
### In App Wallet
36+
<div className="my-4 grid gap-2 md:grid-cols-2 lg:grid-cols-3">
37+
<ArticleIconCard
38+
title="TypeScript"
39+
icon={TypeScriptIcon}
40+
description="Guest Login for in-app wallets in TypeScript"
41+
href="/typescript/v5/inAppWallet#connect-to-a-guest-account"
42+
/>
43+
<ArticleIconCard
44+
title="React"
45+
icon={ReactIcon}
46+
description="Guest Login for in-app wallets in React"
47+
href="/react/v5/in-app-wallet/get-started#choose-authentication-methods"
48+
/>
49+
{/* TODO: Link to react native getting started for in app wallet */}
50+
<ArticleIconCard
51+
title="React Native"
52+
icon={ReactIcon}
53+
description="Guest Login for in-app wallets in React Native"
54+
href="/react/v5/in-app-wallet/get-started#choose-authentication-methods"
55+
/>
56+
<ArticleIconCard
57+
title=".NET"
58+
icon={DotNetIcon}
59+
description="Guest Login for in-app wallets in .NET"
60+
href="/dotnet/wallets/providers/in-app-wallet#usage"
61+
/>
62+
<ArticleIconCard
63+
title="Unity"
64+
icon={UnityIcon}
65+
description="Guest Login for in-app wallets in Unity"
66+
href="/unity/v5/wallets/in-app-wallet#login-with-guest---onboard-easily-link-other-accounts-later"
67+
/>
68+
69+
</div>
70+
71+
### Ecosystem Wallet
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="Guest Login for ecosystem wallets in TypeScript"
77+
href="/typescript/v5/ecosystemWallet#example"
78+
/>
79+
<ArticleIconCard
80+
title="React"
81+
icon={ReactIcon}
82+
description="Guest Login for 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="Guest Login for 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="Guest Login for ecosystem wallets in .NET"
96+
href="/dotnet/wallets/providers/ecosystem-wallet#login-methods"
97+
/>
98+
<ArticleIconCard
99+
title="Unity"
100+
icon={UnityIcon}
101+
description="Guest Login for ecosystem wallets in Unity"
102+
href="/unity/v5/wallets/ecosystem-wallet#login-with-guest---onboard-easily-link-other-accounts-later"
103+
/>
104+
</div>
105+
106+
## Making the Guest Wallet Permanent
60107

61108
When your user is ready, [link any other auth method](/connect/in-app-wallet/guides/link-multiple-profiles) so they can access their account in the future.
62109

63-
<Tabs defaultValue={"typescript"}>
64-
<TabsList>
65-
<TabsTrigger value="typescript">typescript/react/react-native</TabsTrigger>
66-
<TabsTrigger value="dotnet">.NET</TabsTrigger>
67-
</TabsList>
68-
<TabsContent value="typescript">
69-
<CodeBlock code={`import { linkProfile } from "thirdweb/wallets";
70-
71-
await linkProfile(wallet, { strategy: "google" });`} lang="typescript" />
72-
</TabsContent>
73-
<TabsContent value="dotnet">
74-
<CodeBlock code={`var socialWallet = await InAppWallet.Create(client: client, authProvider: AuthProvider.Telegram);
75-
_ = await inAppWalletMain.LinkAccount(walletToLink: socialWallet,);`} lang="csharp" />
76-
</TabsContent>
77-
</Tabs>
110+
### In App Wallet
111+
<div className="my-4 grid gap-2 md:grid-cols-2 lg:grid-cols-3">
112+
<ArticleIconCard
113+
title="TypeScript"
114+
icon={TypeScriptIcon}
115+
description="Link identites in-app wallets in TypeScript"
116+
href="/typescript/v5/linkProfile"
117+
/>
118+
<ArticleIconCard
119+
title="React"
120+
icon={ReactIcon}
121+
description="Link identites in-app wallets in React"
122+
href="/react/v5/useLinkProfile"
123+
/>
124+
{/* TODO: Link to react native getting started for in app wallet */}
125+
<ArticleIconCard
126+
title="React Native"
127+
icon={ReactIcon}
128+
description="Link identites in-app wallets in React Native"
129+
href="/react/v5/useLinkProfile"
130+
/>
131+
<ArticleIconCard
132+
title=".NET"
133+
icon={DotNetIcon}
134+
description="Link identites in-app wallets in .NET"
135+
href="/dotnet/wallets/providers/in-app-wallet#unified-identity---account-linking"
136+
/>
137+
<ArticleIconCard
138+
title="Unity"
139+
icon={UnityIcon}
140+
description="Link identites in-app wallets in Unity"
141+
href="/unity/v5/wallets/in-app-wallet#account-linking"
142+
/>
143+
</div>
144+
145+
### Ecosystem Wallet
146+
<div className="my-4 grid gap-2 md:grid-cols-2 lg:grid-cols-3">
147+
<ArticleIconCard
148+
title="TypeScript"
149+
icon={TypeScriptIcon}
150+
description="Configure login options for ecosystem wallets in TypeScript"
151+
href="/typescript/v5/linkProfile"
152+
/>
153+
<ArticleIconCard
154+
title="React"
155+
icon={ReactIcon}
156+
description="Configure login options for ecosystem wallets in React"
157+
href="/react/v5/useLinkProfile"
158+
/>
159+
{/* TODO: Add react native specific getting started for ecosystem wallets */}
160+
<ArticleIconCard
161+
title="React Native"
162+
icon={ReactIcon}
163+
description="Configure login options for ecosystem wallets in React Native"
164+
href="/react/v5/useLinkProfile"
165+
/>
166+
<ArticleIconCard
167+
title=".NET"
168+
icon={DotNetIcon}
169+
description="Connect ecosystem wallets in .NET"
170+
href="/dotnet/wallets/providers/ecosystem-wallet#unified-identity---account-linking"
171+
/>
172+
<ArticleIconCard
173+
title="Unity"
174+
icon={UnityIcon}
175+
description="Configure login options for ecosystem wallets in Unity"
176+
href="/unity/v5/wallets/ecosystem-wallet#account-linking"
177+
/>
178+
</div>
78179

79180
Your user can now access this same wallet with their Google account.
80181

0 commit comments

Comments
 (0)