11---
22description : Authenticate users with the SDK in your Wagmi or Vanilla JavaScript dapp.
3- toc_max_heading_level : 2
3+ keywords : [SDK, Wagmi, JavaScript, authenticate, connect, sign, accounts, wallet, dapp]
4+ toc_max_heading_level : 3
45---
56
67# Authenticate users
@@ -11,6 +12,7 @@ With the SDK, you can:
1112
1213- ** Connect users' wallets** to your dapp.
1314- ** Access user accounts** (addresses).
15+ - [ ** Connect and sign** ] ( #connect-and-sign ) in a single user interaction.
1416- ** Handle connection states** (connected/disconnected).
1517- ** Listen for account changes** in real time.
1618- ** Manage wallet sessions** (connect/disconnect).
@@ -125,6 +127,15 @@ async function connectWallet() {
125127 }
126128}
127129
130+ // Disconnect wallet
131+ async function disconnectWallet () {
132+ try {
133+ await MMSDK .terminate ()
134+ } catch (err) {
135+ console .error (" Error with disconnecting:" , err)
136+ }
137+ }
138+
128139// Handle account changes
129140provider .on (" accountsChanged" , (accounts ) => {
130141 if (accounts .length === 0 ) {
@@ -151,6 +162,43 @@ Display connect and disconnect buttons in HTML:
151162</div >
152163```
153164
165+ ### Connect and sign
166+
167+ If you're not using Wagmi, you can access MetaMask SDK's [ ` connectAndSign ` ] ( ../reference/sdk-methods.md#connectandsign ) method,
168+ which requests wallet access and signs the message in a single user interaction.
169+ For example:
170+
171+ ``` js
172+ import { MetaMaskSDK } from " @metamask/sdk"
173+
174+ const MMSDK = new MetaMaskSDK ()
175+ const provider = MMSDK .getProvider ()
176+
177+ async function handleConnectAndSign () {
178+ try {
179+ const signature = await MMSDK .connectAndSign ({ msg: " Hello in one go!" })
180+ console .log (" Signature:" , signature)
181+ } catch (err) {
182+ console .error (" Error with connectAndSign:" , err)
183+ }
184+ }
185+
186+ document
187+ .getElementById (" connectSignBtn" )
188+ .addEventListener (" click" , handleConnectAndSign)
189+ ```
190+
191+ The following HTML displays a ** Connect & Sign** button:
192+
193+ ``` html
194+ <button id =" connectSignBtn" >Connect & Sign</button >
195+ ```
196+
197+ ::: tip
198+ This one-step flow is unique to MetaMask SDK's ` connectAndSign ` method.
199+ It's not part of Wagmi or other wallet libraries.
200+ :::
201+
154202## Best practices
155203
156204Follow these best practices when authenticating users.
0 commit comments