|
| 1 | +import { ArticleIconCard, Callout } from "@doc"; |
| 2 | +import { |
| 3 | + WalletsAuthIcon, |
| 4 | + WalletsConnectIcon, |
| 5 | + ReactIcon, |
| 6 | + TypeScriptIcon, |
| 7 | + UnityIcon, |
| 8 | + DotNetIcon, |
| 9 | + ExternalLinkIcon, |
| 10 | + UnrealEngineIcon |
| 11 | +} from "@/icons" |
| 12 | + |
1 | 13 | # External wallets |
2 | 14 |
|
3 | | -thirdweb supports a number of first-party web3 wallets such as Metamask and Phantom. |
4 | | - |
5 | | -## Add externally owned wallets |
6 | | - |
7 | | -```tsx |
8 | | -import { ConnectButton } from "thirdweb/react"; |
9 | | -import { createWallet } from "thirdweb/wallets"; |
10 | | - |
11 | | -const wallets = [ |
12 | | - createWallet("io.metamask"), |
13 | | - createWallet("com.coinbase.wallet"), |
14 | | - createWallet("me.rainbow"), |
15 | | -]; |
16 | | - |
17 | | -function Example() { |
18 | | - return ( |
19 | | - <div> |
20 | | - <ConnectButton client={client} wallets={wallets} /> |
21 | | - </div> |
22 | | - ); |
23 | | -} |
24 | | -``` |
25 | | - |
26 | | -[View full list of supported wallets.](/typescript/v5/supported-wallets) |
| 15 | +thirdweb supports over 350+ first-party web3 wallets. For the full list, please consult [this list](/typescript/v5/supported-wallets). |
| 16 | + |
| 17 | +You can use an external wallet in many ways. We've outlined these different use cases below: |
| 18 | + |
| 19 | +| USAGE | BEST FOR | |
| 20 | +|----------|---------- | |
| 21 | +| Connect to site | Applications simply needing web3 wallet connectivity | |
| 22 | +| Authenticate into your site | Applications requiring authentication with existing web3 users | |
| 23 | +| Authenticate into a thirdweb wallet (either in-app or ecosystem) | Applications looking to provide a seamless web3 application with minimal disruptions and prompts | |
| 24 | + |
| 25 | +The good news is that thirdweb cover each and every one of this use case! |
| 26 | + |
| 27 | +Read on to find out how it's done: |
| 28 | + |
| 29 | +## Connecting External Wallets |
| 30 | + |
| 31 | +External wallets are perfect for applications that want to integrate with existing web3 users. These users typically already have wallets like MetaMask, Coinbase Wallet, or Rainbow installed and are familiar with web3 concepts. |
| 32 | + |
| 33 | +<Callout variant="info" title='Limitations'> |
| 34 | + Your backend will not know about the user's wallet. |
| 35 | + This is fine if the user's wallet is used to sign transactions and interact with the blockchain directly. |
| 36 | + |
| 37 | + If you need your backend to be aware of the user's wallet, see [SIWE](#authenticating-with-external-wallets). |
| 38 | +</Callout> |
| 39 | + |
| 40 | +### Implementation |
| 41 | + |
| 42 | +We have code snippets and guide for various wallet connecting options below: |
| 43 | + |
| 44 | +<ArticleIconCard |
| 45 | + icon={WalletsConnectIcon} |
| 46 | + title="Connecting to an external wallet" |
| 47 | + description="How to get started connecting your application to an external wallet." |
| 48 | + href="/typescript/v5/supported-wallets" |
| 49 | +/> |
| 50 | + |
| 51 | +## Authenticating with External Wallets |
| 52 | + |
| 53 | +Authentication with external wallets using Sign-In with Ethereum (SIWE) enables your backend to securely verify user wallet ownership. This is essential for applications requiring user-specific data or authenticated actions. |
| 54 | + |
| 55 | +<Callout variant="info" title='Key Difference'> |
| 56 | + Unlike simple wallet connections, SIWE authentication creates a session between your backend and the user's wallet, enabling secure, authenticated API calls. |
| 57 | + |
| 58 | + However, users will still require to sign prompts when interacting with the blockchain via their wallets. If you want an invisible web3 experience, consider using [thirdweb wallets](#authenticating-with-external-wallets-into-thirdweb-wallets). |
| 59 | +</Callout> |
| 60 | + |
| 61 | +### Implementation |
| 62 | + |
| 63 | +<ArticleIconCard |
| 64 | + icon={WalletsAuthIcon} |
| 65 | + title="Sign In With Ethereum" |
| 66 | + description="A whole dedicated guides covering everything you need to know about SIWE." |
| 67 | + href="/connect/auth" |
| 68 | +/> |
| 69 | + |
| 70 | +## Authenticating with External Wallets into thirdweb Wallets |
| 71 | + |
| 72 | +thirdweb wallets provide a seamless web3 experience with minimal prompts and disruptions. This will provide you, the developer with full control of how the user interacts with your application. |
| 73 | + |
| 74 | +Note, however, that the wallet interacting with your application will be a thirdweb wallet, not the user's external wallet. While we provide methods to export keys and see how the external wallet and thirdweb wallet are linked, if your app requires the user's external wallet, you should use [SIWE](#authenticating-with-external-wallets) instead. |
| 75 | + |
| 76 | +### Implementation |
| 77 | + |
| 78 | +#### In App Wallet |
| 79 | + |
| 80 | +<div className="my-4 grid gap-2 md:grid-cols-2 lg:grid-cols-3"> |
| 81 | + <ArticleIconCard |
| 82 | + title="TypeScript" |
| 83 | + icon={TypeScriptIcon} |
| 84 | + description="Configure logging in with an external wallet for ecosystem wallets in TypeScript" |
| 85 | + href="/typescript/v5/inAppWallet#login-with-siwe" |
| 86 | + /> |
| 87 | + <ArticleIconCard |
| 88 | + title="React" |
| 89 | + icon={ReactIcon} |
| 90 | + description="Configure logging in with an external wallet for ecosystem wallets in React" |
| 91 | + href="/react/v5/in-app-wallet/get-started#choose-authentication-methods" |
| 92 | + /> |
| 93 | + {/* TODO: Add react native specific getting started for ecosystem wallets */} |
| 94 | + <ArticleIconCard |
| 95 | + title="React Native" |
| 96 | + icon={ReactIcon} |
| 97 | + description="Configure logging in with an external wallet for ecosystem wallets in React Native" |
| 98 | + href="/react/v5/in-app-wallet/get-started#choose-authentication-methods" |
| 99 | + /> |
| 100 | + <ArticleIconCard |
| 101 | + title=".NET" |
| 102 | + icon={DotNetIcon} |
| 103 | + description="Connect ecosystem wallets in .NET" |
| 104 | + href="/dotnet/wallets/providers/in-app-wallet#login-methods" |
| 105 | + /> |
| 106 | + <ArticleIconCard |
| 107 | + title="Unity" |
| 108 | + icon={UnityIcon} |
| 109 | + description="Configure logging in with an external wallet for ecosystem wallets in Unity" |
| 110 | + href="/unity/v5/wallets/in-app-wallet#login-with-siwe" |
| 111 | + /> |
| 112 | +</div> |
| 113 | + |
| 114 | +#### Ecosystem Wallet |
| 115 | + |
| 116 | +<div className="my-4 grid gap-2 md:grid-cols-2 lg:grid-cols-3"> |
| 117 | + <ArticleIconCard |
| 118 | + title="TypeScript" |
| 119 | + icon={TypeScriptIcon} |
| 120 | + description="Configure logging in with an external wallet for ecosystem wallets in TypeScript" |
| 121 | + href="/typescript/v5/ecosystemWallet#logging-into-an-ecosystem-wallet" |
| 122 | + /> |
| 123 | + <ArticleIconCard |
| 124 | + title="React" |
| 125 | + icon={ReactIcon} |
| 126 | + description="Configure logging in with an external wallet for ecosystem wallets in React" |
| 127 | + href="/react/v5/ecosystem-wallet/get-started#configuring-auth-strategies" |
| 128 | + /> |
| 129 | + {/* TODO: Add react native specific getting started for ecosystem wallets */} |
| 130 | + <ArticleIconCard |
| 131 | + title="React Native" |
| 132 | + icon={ReactIcon} |
| 133 | + description="Configure logging in with an external wallet for ecosystem wallets in React Native" |
| 134 | + href="/react/v5/ecosystem-wallet/get-started#configuring-auth-strategies" |
| 135 | + /> |
| 136 | + <ArticleIconCard |
| 137 | + title=".NET" |
| 138 | + icon={DotNetIcon} |
| 139 | + description="Connect ecosystem wallets in .NET" |
| 140 | + href="/dotnet/wallets/providers/ecosystem-wallet#login-methods" |
| 141 | + /> |
| 142 | + <ArticleIconCard |
| 143 | + title="Unity" |
| 144 | + icon={UnityIcon} |
| 145 | + description="Configure logging in with an external wallet for ecosystem wallets in Unity" |
| 146 | + href="/unity/v5/wallets/ecosystem-wallet#login-with-siwe" |
| 147 | + /> |
| 148 | +</div> |
0 commit comments