feat(react): initial auth for <ConnectButton /> (#2793)

      Co-authored-by: Manan Tank <manantankm@gmail.com>

Author: jnsdls

.changeset/cuddly-rockets-study.md

@@ -0,0 +1,36 @@
+---
+"thirdweb": minor
+---
+**thirdweb/react**
+
+Add a new optional `auth` prop to `<ConnectButton />` to allow specifying a SIWE auth flow after users connect their wallets.
+
+```jsx
+<ConnectButton
+      client={client}
+      auth={{
+        isLoggedIn: async (address) => {
+          // check if the user is logged in by calling your server, etc.
+          // then return a boolean value
+          return true || false;
+        },
+        getLoginPayload: async ({ address, chainId }) => {
+          // send the address (and optional chainId) to your server to generate the login payload for the user to sign
+          // you can use the `generatePayload` function from `thirdweb/auth` to generate the payload
+          // once you have retrieved the payload return it from this function
+
+          return // <the login payload here>
+        },
+        doLogin: async (loginParams) => {
+          // send the login params to your server where you can validate them using the `verifyPayload` function
+          // from `thirdweb/auth`
+          // you can then set a cookie or return a token to save in local storage, etc
+          // `isLoggedIn` will automatically get called again after this function resolves
+        },
+        doLogout: async () => {
+          //  do anything you need to do such as clearing cookies, etc when the user should be logged out
+          // `isLoggedIn` will automatically get called again after this function resolves
+        },
+      }}
+    />
+```

packages/thirdweb/src/exports/react.ts

@@ -96,3 +96,6 @@ export {
   AutoConnect,
   type AutoConnectProps,
 } from "../react/core/hooks/connection/useAutoConnect.js";
+
+// auth
+export { type SiweAuthOptions } from "../react/core/hooks/auth/useSiweAuth.js";

packages/thirdweb/src/extensions/marketplace/english-auctions/write/executeSale.ts

@@ -35,7 +35,6 @@ export function executeSale(
         contract: options.contract,
         auctionId: options.auctionId,
       });
-      console.log("*** winning bid", winningBid);
       if (!winningBid) {
         throw new Error("Auction is still active");
       }

packages/thirdweb/src/react/core/hooks/auth/useSiweAuth.ts

@@ -0,0 +1,139 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import type { LoginPayload } from "../../../../auth/core/types.js";
+import type { VerifyLoginPayloadParams } from "../../../../auth/core/verify-login-payload.js";
+import { useActiveWallet } from "../../../core/hooks/wallets/wallet-hooks.js";
+
+/**
+ * Options for Setting up SIWE (Sign in with Ethereum) Authentication
+ * @auth
+ */
+export type SiweAuthOptions = {
+  // we pass address and chainId and retrieve a login payload (we do not care how)
+
+  /**
+   * Method to get the login payload for given address and chainId
+   * @param params - The parameters to get the login payload for.
+   */
+  getLoginPayload: (params: {
+    address: string;
+    chainId: number;
+  }) => Promise<LoginPayload>;
+
+  // we pass the login payload and signature and the developer passes this to the auth server however they want
+
+  /**
+   * Method to login with the signed login payload
+   * @param params
+   */
+  doLogin: (params: VerifyLoginPayloadParams) => Promise<void>;
+
+  // we call this internally when a user explicitly disconnects their wallet
+
+  /**
+   * Method to logout the user
+   */
+  doLogout: () => Promise<void>;
+
+  // the developer specifies how to check if the user is logged in, this is called internally by the component
+
+  /**
+   * Method to check if the user is logged in or not
+   * @param address
+   */
+  isLoggedIn: (address: string) => Promise<boolean>;
+};
+
+/**
+ * @internal
+ */
+export function useSiweAuth(authOptions?: SiweAuthOptions) {
+  const activeWallet = useActiveWallet();
+  const activeAccount = activeWallet?.getAccount();
+
+  const requiresAuth = !!authOptions;
+
+  const queryClient = useQueryClient();
+
+  const isLoggedInQuery = useQuery({
+    queryKey: ["siwe_auth", "isLoggedIn", activeAccount?.address],
+    enabled: requiresAuth && !!activeAccount?.address,
+    queryFn: () => {
+      // these cases should never be hit but just in case...
+      if (!authOptions || !activeAccount?.address) {
+        return false;
+      }
+      return authOptions.isLoggedIn(activeAccount.address);
+    },
+  });
+
+  const loginMutation = useMutation({
+    mutationFn: async () => {
+      if (!authOptions) {
+        throw new Error("No auth options provided");
+      }
+
+      if (!activeWallet) {
+        throw new Error("No active wallet");
+      }
+      const chain = activeWallet.getChain();
+      if (!chain) {
+        throw new Error("No active chain");
+      }
+      if (!activeAccount) {
+        throw new Error("No active account");
+      }
+      const [payload, { signLoginPayload }] = await Promise.all([
+        authOptions.getLoginPayload({
+          address: activeAccount.address,
+          chainId: chain.id,
+        }),
+        // we lazy-load this because it's only needed when logging in
+        import("../../../../auth/core/sign-login-payload.js"),
+      ]);
+
+      const signedPayload = await signLoginPayload({
+        payload,
+        account: activeAccount,
+      });
+
+      return await authOptions.doLogin(signedPayload);
+    },
+    onSettled: () => {
+      return queryClient.invalidateQueries({
+        queryKey: ["siwe_auth", "isLoggedIn"],
+      });
+    },
+  });
+
+  const logoutMutation = useMutation({
+    mutationFn: async () => {
+      if (!authOptions) {
+        throw new Error("No auth options provided");
+      }
+
+      return await authOptions.doLogout();
+    },
+    onSettled: () => {
+      return queryClient.invalidateQueries({
+        queryKey: ["siwe_auth", "isLoggedIn"],
+      });
+    },
+  });
+
+  return {
+    // is auth even enabled
+    requiresAuth,
+
+    // login
+    doLogin: loginMutation.mutateAsync,
+    isLoggingIn: loginMutation.isPending,
+
+    // logout
+    doLogout: logoutMutation.mutateAsync,
+    isLoggingOut: logoutMutation.isPending,
+
+    // checking if logged in
+    isLoggedIn: isLoggedInQuery.data,
+    isLoading: isLoggedInQuery.isLoading,
+  };
+}

packages/thirdweb/src/react/core/hooks/connection/useAutoConnect.tsx

@@ -268,7 +268,7 @@ export function AutoConnect(props: AutoConnectProps) {
 
     (async () => {
       isAutoConnecting.setValue(true);
-      startAutoConnect();
+      await startAutoConnect();
       isAutoConnecting.setValue(false);
     })();
   });

packages/thirdweb/src/react/core/providers/wallet-connection.tsx

@@ -7,6 +7,7 @@ import type { AppMetadata } from "../../../wallets/types.js";
 import type { ConnectButton_connectModalOptions } from "../../web/ui/ConnectWallet/ConnectWalletProps.js";
 import type { ConnectLocale } from "../../web/ui/ConnectWallet/locale/types.js";
 import type { LocaleId } from "../../web/ui/types.js";
+import type { SiweAuthOptions } from "../hooks/auth/useSiweAuth.js";
 
 export const ConnectUIContext = /* @__PURE__ */ createContext<{
   wallets: Wallet[];
@@ -27,4 +28,5 @@ export const ConnectUIContext = /* @__PURE__ */ createContext<{
   connectModal: Omit<ConnectButton_connectModalOptions, "size"> & {
     size: "compact" | "wide";
   };
+  auth?: SiweAuthOptions;
 } | null>(null);

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

@@ -1,5 +1,6 @@
 import styled from "@emotion/styled";
-import { useMemo } from "react";
+import { useEffect, useMemo, useState } from "react";
+import { useSiweAuth } from "../../../core/hooks/auth/useSiweAuth.js";
 import { AutoConnect } from "../../../core/hooks/connection/useAutoConnect.js";
 import {
   useActiveAccount,
@@ -12,15 +13,20 @@ import {
 } from "../../providers/wallet-ui-states-provider.js";
 import { canFitWideModal } from "../../utils/canFitWideModal.js";
 import { getDefaultWallets } from "../../wallets/defaultWallets.js";
+import { Modal } from "../components/Modal.js";
 import { Spinner } from "../components/Spinner.js";
+import { Container } from "../components/basic.js";
 import { Button } from "../components/buttons.js";
 import { fadeInAnimation } from "../design-system/animations.js";
+import { iconSize } from "../design-system/index.js";
 import type { ConnectButtonProps } from "./ConnectWalletProps.js";
 import { ConnectedWalletDetails } from "./Details.js";
 import ConnectModal from "./Modal/ConnectModal.js";
 import { defaultTokens } from "./defaultTokens.js";
+import { LockIcon } from "./icons/LockIcon.js";
 import { useConnectLocale } from "./locale/getConnectLocale.js";
 import type { ConnectLocale } from "./locale/types.js";
+import { SignatureScreen } from "./screens/SignatureScreen.js";
 
 const TW_CONNECT_WALLET = "tw-connect-wallet";
 
@@ -40,7 +46,10 @@ const TW_CONNECT_WALLET = "tw-connect-wallet";
  * @component
  */
 export function ConnectButton(props: ConnectButtonProps) {
-  const wallets = props.wallets || getDefaultWallets();
+  const wallets = useMemo(
+    () => props.wallets || getDefaultWallets(),
+    [props.wallets],
+  );
   const localeQuery = useConnectLocale(props.locale || "en_US");
 
   const autoConnectComp = props.autoConnect !== false && (
@@ -100,6 +109,7 @@ export function ConnectButton(props: ConnectButtonProps) {
               : props.connectModal?.size || "wide",
         },
         onConnect: props.onConnect,
+        auth: props.auth,
       }}
     >
       <WalletUIStatesProvider theme={props.theme}>
@@ -117,6 +127,16 @@ function ConnectButtonInner(
   },
 ) {
   const activeAccount = useActiveAccount();
+  const siweAuth = useSiweAuth(props.auth);
+  const [showSignatureModal, setShowSignatureModal] = useState(false);
+
+  // if wallet gets disconnected suddently, close the signature modal if it's open
+  useEffect(() => {
+    if (!activeAccount) {
+      setShowSignatureModal(false);
+    }
+  }, [activeAccount]);
+
   const theme = props.theme || "dark";
   const connectionStatus = useActiveWalletConnectionStatus();
   const locale = props.connectLocale;
@@ -180,14 +200,84 @@ function ConnectButtonInner(
     );
   }
 
+  if (siweAuth.requiresAuth) {
+    // loading state if loading
+    // TODO: figure out a way to consolidate the loading states with the ones from locale loading
+    if (siweAuth.isLoading) {
+      return (
+        <AnimatedButton
+          disabled={true}
+          className={`${
+            props.connectButton?.className || ""
+          } ${TW_CONNECT_WALLET}`}
+          variant="primary"
+          type="button"
+          style={{
+            minWidth: "140px",
+            ...props.connectButton?.style,
+          }}
+        >
+          <Spinner size="sm" color="primaryButtonText" />
+        </AnimatedButton>
+      );
+    }
+    // sign in button + modal if *not* loading and *not* logged in
+    if (!siweAuth.isLoggedIn) {
+      return (
+        <>
+          <Button
+            variant="primary"
+            type="button"
+            onClick={() => {
+              setShowSignatureModal(true);
+            }}
+            className={props.signInButton?.className}
+            style={{
+              minWidth: "140px",
+              ...props.signInButton?.style,
+            }}
+          >
+            {siweAuth.isLoggingIn ? (
+              <Spinner size="sm" color="primaryButtonText" />
+            ) : (
+              <Container flex="row" center="y" gap="sm">
+                <LockIcon size={iconSize.sm} />
+                <span> {props.signInButton?.label || locale.signIn} </span>
+              </Container>
+            )}
+          </Button>
+          <Modal
+            size="compact"
+            open={showSignatureModal}
+            setOpen={setShowSignatureModal}
+          >
+            <SignatureScreen
+              client={props.client}
+              connectLocale={locale}
+              modalSize="compact"
+              termsOfServiceUrl={props.connectModal?.termsOfServiceUrl}
+              privacyPolicyUrl={props.connectModal?.privacyPolicyUrl}
+              onDone={() => setShowSignatureModal(false)}
+              auth={props.auth}
+            />
+          </Modal>
+        </>
+      );
+    }
+    // otherwise, show the details button
+  }
+
   return (
     <ConnectedWalletDetails
       theme={theme}
       detailsButton={props.detailsButton}
       detailsModal={props.detailsModal}
       supportedTokens={supportedTokens}
       onDisconnect={() => {
-        // no op
+        // logout on explicit disconnect!
+        if (siweAuth.requiresAuth) {
+          siweAuth.doLogout();
+        }
       }}
       chains={props?.chains || []}
       chain={props.chain}