add siwe option for headless use connect for react

Author: jcheese1

apps/playground-web/src/app/connect/sign-in/headless/page.tsx

@@ -32,6 +32,8 @@ export default function Page() {
         <Modal />
         <div className="h-6" />
         <Hooks />
+        <div className="h-6" />
+        <HooksWithAuth />
       </main>
     </ThirdwebProvider>
   );
@@ -103,3 +105,34 @@ function Hooks() {
     </>
   );
 }
+
+function HooksWithAuth() {
+  return (
+    <>
+      <h2 className="mb-2 font-semibold text-2xl tracking-tight sm:text-3xl">
+        Create custom UI using hooks with SIWE auth
+      </h2>
+
+      <p className="mb-5 max-w-[600px]">
+        Enforce users to sign a message after connecting their wallet to
+        authenticate themselves.
+      </p>
+
+      <CodeExample
+        preview={<ModalPreview enableAuth={true} />}
+        code={`// Using your own UI
+          import { useConnectModal } from "thirdweb/react";
+  
+          function App(){
+            const { connect } = useConnectModal();
+  
+            return (
+            // pass modal configuration options here
+        <button onClick={() => connect({ client, auth: siweAuth })}>Sign in</button>
+        );
+        };`}
+        lang="tsx"
+      />
+    </>
+  );
+}

apps/playground-web/src/components/sign-in/modal.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import {
+  type ConnectButtonProps,
   useActiveAccount,
   useActiveWallet,
   useConnectModal,
@@ -10,14 +11,49 @@ import { shortenAddress } from "thirdweb/utils";
 import { THIRDWEB_CLIENT } from "../../lib/client";
 import { Button } from "../ui/button";
 
-export function ModalPreview() {
+const playgroundAuth: ConnectButtonProps["auth"] = {
+  async doLogin() {
+    try {
+      localStorage.setItem("playground-loggedin", "true");
+    } catch {
+      // ignore
+    }
+  },
+  async doLogout() {
+    localStorage.removeItem("playground-loggedin");
+  },
+  async getLoginPayload(params) {
+    return {
+      domain: "",
+      address: params.address,
+      statement: "",
+      version: "",
+      nonce: "",
+      issued_at: "",
+      expiration_time: "",
+      invalid_before: "",
+    };
+  },
+  async isLoggedIn() {
+    try {
+      return !!localStorage.getItem("playground-loggedin");
+    } catch {
+      return false;
+    }
+  },
+};
+
+export function ModalPreview({ enableAuth }: { enableAuth?: boolean }) {
   const account = useActiveAccount();
   const wallet = useActiveWallet();
   const connectMutation = useConnectModal();
   const { disconnect } = useDisconnect();
 
   const connect = async () => {
-    const wallet = await connectMutation.connect({ client: THIRDWEB_CLIENT });
+    const wallet = await connectMutation.connect({
+      client: THIRDWEB_CLIENT,
+      auth: enableAuth ? playgroundAuth : undefined,
+    });
     return wallet;
   };
 

packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectModalContent.tsx

@@ -235,6 +235,7 @@ export const ConnectModalContent = (props: {
   const signatureScreen = (
     <SignatureScreen
       onDone={onClose}
+      onClose={onClose}
       modalSize={props.size}
       termsOfServiceUrl={props.meta.termsOfServiceUrl}
       privacyPolicyUrl={props.meta.privacyPolicyUrl}

packages/thirdweb/src/react/web/ui/ConnectWallet/screens/SignatureScreen.tsx

@@ -32,6 +32,7 @@ type Status = "signing" | "failed" | "idle";
 
 export const SignatureScreen: React.FC<{
   onDone: (() => void) | undefined;
+  onClose?: (() => void) | undefined;
   modalSize: "compact" | "wide";
   termsOfServiceUrl?: string;
   privacyPolicyUrl?: string;
@@ -42,6 +43,7 @@ export const SignatureScreen: React.FC<{
   const {
     onDone,
     modalSize,
+    onClose,
     termsOfServiceUrl,
     privacyPolicyUrl,
     connectLocale,
@@ -145,6 +147,7 @@ export const SignatureScreen: React.FC<{
               variant="secondary"
               data-testid="disconnect-button"
               onClick={() => {
+                onClose?.();
                 disconnect(wallet);
               }}
               style={{

packages/thirdweb/src/react/web/ui/ConnectWallet/useConnectModal.tsx

@@ -6,6 +6,7 @@ import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
 import type { SmartWalletOptions } from "../../../../wallets/smart/types.js";
 import type { AppMetadata } from "../../../../wallets/types.js";
 import type { Theme } from "../../../core/design-system/index.js";
+import type { SiweAuthOptions } from "../../../core/hooks/auth/useSiweAuth.js";
 import { SetRootElementContext } from "../../../core/providers/RootElementContext.js";
 import { WalletUIStatesProvider } from "../../providers/wallet-ui-states-provider.js";
 import { canFitWideModal } from "../../utils/canFitWideModal.js";
@@ -62,6 +63,7 @@ export function useConnectModal() {
               <Modal
                 {...props}
                 onConnect={(w) => {
+                  if (props.auth) return;
                   resolve(w);
                   cleanup();
                 }}
@@ -129,8 +131,7 @@ function Modal(
         onClose={props.onClose}
         shouldSetActive={props.setActive === undefined ? true : props.setActive}
         accountAbstraction={props.accountAbstraction}
-        // TODO: not set up in `useConnectModal` for some reason?
-        auth={undefined}
+        auth={props.auth}
         chain={props.chain}
         client={props.client}
         connectLocale={props.connectLocale}
@@ -432,6 +433,14 @@ export type UseConnectModalOptions = {
    * If you want to hide the branding, set this prop to `false`
    */
   showThirdwebBranding?: boolean;
+
+  /**
+   * Enable SIWE (Sign in with Ethererum) by passing an object of type `SiweAuthOptions` to
+   * enforce the users to sign a message after connecting their wallet to authenticate themselves.
+   *
+   * Refer to the [`SiweAuthOptions`](https://portal.thirdweb.com/references/typescript/v5/SiweAuthOptions) for more details
+   */
+  auth?: SiweAuthOptions;
 };
 
 // TODO: consilidate Button/Embed/Modal props into one type with extras