From 5c5498e2b34975ac94ac0e32d4ab6bebe6bbcf1e Mon Sep 17 00:00:00 2001
From: Jonas Daniels <jonas.daniels@outlook.com>
Date: Tue, 23 Aug 2022 13:47:49 -0700
Subject: [PATCH 1/9] fix connect wallet behavior

---
 .../src/components/ConnectWallet/index.tsx    | 38 +++++++++----------
 .../src/hooks/connectors/useMetamask.ts       | 10 +----
 2 files changed, 21 insertions(+), 27 deletions(-)

diff --git a/packages/thirdweb-react/src/components/ConnectWallet/index.tsx b/packages/thirdweb-react/src/components/ConnectWallet/index.tsx
index f7018e4..27cc2c3 100644
--- a/packages/thirdweb-react/src/components/ConnectWallet/index.tsx
+++ b/packages/thirdweb-react/src/components/ConnectWallet/index.tsx
@@ -286,28 +286,28 @@ export const ConnectWallet: React.FC<ConnectWalletProps> = ({
                 </>
               ) : (
                 <>
-                  {supportedConnectors.findIndex((c) => c.name === "MetaMask") >
-                    -1 && (
-                    <MenuItem
-                      {...api.getItemProps({
-                        id: "metamask",
-                      })}
-                      onClick={async () => {
-                        if (!connecting) {
-                          connecting = true;
-                          await connectWithMetamask();
-                          connecting = false;
-                          api.close();
-                        }
-                      }}
-                      leftElement={<Icon boxSize="1.5em" name="metamask" />}
-                    >
-                      MetaMask
-                    </MenuItem>
-                  )}
+                  <MenuItem
+                    {...api.getItemProps({
+                      id: "metamask",
+                    })}
+                    onClick={async () => {
+                      if (!connecting) {
+                        connecting = true;
+                        await connectWithMetamask();
+                        connecting = false;
+                        api.close();
+                      }
+                    }}
+                    leftElement={<Icon boxSize="1.5em" name="metamask" />}
+                  >
+                    MetaMask
+                  </MenuItem>
                   {supportedConnectors
                     .filter((c) => c.name !== "MetaMask")
                     .map((c) => {
+                      if (!c.ready) {
+                        return null;
+                      }
                       return (
                         <MenuItem
                           key={c.id}
diff --git a/packages/thirdweb-react/src/hooks/connectors/useMetamask.ts b/packages/thirdweb-react/src/hooks/connectors/useMetamask.ts
index 61fbc03..69c650d 100644
--- a/packages/thirdweb-react/src/hooks/connectors/useMetamask.ts
+++ b/packages/thirdweb-react/src/hooks/connectors/useMetamask.ts
@@ -60,9 +60,7 @@ export function useMetamask() {
     // if we don't have an injected provider
     if (!isMetaMaskInjected) {
       // this is the fallback uri that should work no matter what
-      let uri = `https://metamask.app.link/dapp/${
-        window.location.host + window.location.pathname + window.location.search
-      }`;
+      let uri = `https://metamask.app.link/dapp/${window.location.toString()}`;
 
       // if we have walletconnect etc, we can try to use that
       if (shouldUseWalletConnect && connector.id === "walletConnect") {
@@ -72,11 +70,7 @@ export function useMetamask() {
           uri = isAndroid()
             ? uri
             : // otherwise we have to use /dapp link for now
-              `https://metamask.app.link/dapp/${
-                window.location.host +
-                window.location.pathname +
-                window.location.search
-              }`;
+              `https://metamask.app.link/dapp/${window.location.toString()}`;
         } catch (err) {
           console.warn("failed to get provider.connector.uri", err);
         }

From 5f89fd3b216b96e07bae4de5e9530950cf014d64 Mon Sep 17 00:00:00 2001
From: Jonas Daniels <jonas.daniels@outlook.com>
Date: Tue, 23 Aug 2022 13:59:08 -0700
Subject: [PATCH 2/9] further connect wallet improvements

---
 packages/thirdweb-react/src/components/ConnectWallet/index.tsx | 2 +-
 packages/thirdweb-react/src/components/shared/Button/index.tsx | 3 +++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/thirdweb-react/src/components/ConnectWallet/index.tsx b/packages/thirdweb-react/src/components/ConnectWallet/index.tsx
index 27cc2c3..e5b3947 100644
--- a/packages/thirdweb-react/src/components/ConnectWallet/index.tsx
+++ b/packages/thirdweb-react/src/components/ConnectWallet/index.tsx
@@ -159,7 +159,7 @@ export const ConnectWallet: React.FC<ConnectWalletProps> = ({
         }}
       >
         <Button
-          style={{ height: "50px" }}
+          style={{ height: "50px", minWidth: "200px" }}
           {...api.triggerProps}
           leftElement={
             mountedAddress && chainId && chainId in chainIdToCurrencyMap ? (
diff --git a/packages/thirdweb-react/src/components/shared/Button/index.tsx b/packages/thirdweb-react/src/components/shared/Button/index.tsx
index e7af432..b52c565 100644
--- a/packages/thirdweb-react/src/components/shared/Button/index.tsx
+++ b/packages/thirdweb-react/src/components/shared/Button/index.tsx
@@ -23,6 +23,7 @@ const BaseButton = styled.button<BaseButtonProps>`
   display: flex;
   gap: 0.5em;
   align-items: center;
+  justify-content: space-evenly;
   color: ${(props) =>
     computeTextColorBasedOnBackground(
       (props.theme as TwUiTheme).colors.accent,
@@ -148,6 +149,8 @@ export const Button: React.FC<PropsWithChildren<ButtonProps>> = ({
           display: "inherit",
           gap: "inherit",
           alignItems: "inherit",
+          justifyContent: "inherit",
+          width: "100%",
         }}
       >
         {leftElement}

From c30cbf690a4b1cdefd409164a5e6cc0f7c107761 Mon Sep 17 00:00:00 2001
From: Jonas Daniels <jonas.daniels@outlook.com>
Date: Tue, 23 Aug 2022 14:52:29 -0700
Subject: [PATCH 3/9] various additional updates

---
 apps/example/package.json                     |  1 +
 apps/example/pages/_app.tsx                   |  5 +-
 packages/thirdweb-react/docs/react.md         |  1 +
 packages/thirdweb-react/docs/react.useuser.md |  2 +-
 packages/thirdweb-react/etc/react.api.md      | 22 ++++++++-
 .../src/components/ConnectWallet/index.tsx    | 43 ++++++++++++++++-
 .../thirdweb-react/src/hooks/auth/index.ts    |  1 +
 .../thirdweb-react/src/hooks/auth/useUser.ts  |  2 +-
 yarn.lock                                     | 46 +++++++++++++------
 9 files changed, 102 insertions(+), 21 deletions(-)

diff --git a/apps/example/package.json b/apps/example/package.json
index acf56d9..4cdde65 100644
--- a/apps/example/package.json
+++ b/apps/example/package.json
@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@thirdweb-dev/auth": "^0.2.0",
     "@thirdweb-dev/react": "*",
     "@thirdweb-dev/sdk": "^2",
     "ethers": "^5.6.8",
diff --git a/apps/example/pages/_app.tsx b/apps/example/pages/_app.tsx
index d00a28f..2306b7f 100644
--- a/apps/example/pages/_app.tsx
+++ b/apps/example/pages/_app.tsx
@@ -6,7 +6,10 @@ const activeChainId = ChainId.Rinkeby;
 
 function MyApp({ Component, pageProps }: AppProps) {
   return (
-    <ThirdwebProvider desiredChainId={activeChainId}>
+    <ThirdwebProvider
+      desiredChainId={activeChainId}
+      authConfig={{ authUrl: "/api/auth", domain: "example.com" }}
+    >
       <Component {...pageProps} />
     </ThirdwebProvider>
   );
diff --git a/packages/thirdweb-react/docs/react.md b/packages/thirdweb-react/docs/react.md
index 7f520ba..ba90b77 100644
--- a/packages/thirdweb-react/docs/react.md
+++ b/packages/thirdweb-react/docs/react.md
@@ -147,6 +147,7 @@ import { useWalletConnect } from "@thirdweb-dev/react"
 |  [MediaType](./react.mediatype.md) |  |
 |  [SharedMediaProps](./react.sharedmediaprops.md) |  |
 |  [ThirdwebAuthConfig](./react.thirdwebauthconfig.md) | <b><i>(BETA)</i></b> The configuration to use the react SDK with an \[auth\](https://portal.thirdweb.com/auth) server. |
+|  [ThirdwebAuthUser](./react.thirdwebauthuser.md) |  |
 |  [ThirdwebNftMediaProps](./react.thirdwebnftmediaprops.md) | The props for the [ThirdwebNftMedia](./react.thirdwebnftmedia.md) component. |
 |  [ThirdwebProviderProps](./react.thirdwebproviderprops.md) | The possible props for the ThirdwebProvider. |
 |  [ThirdwebSDKProviderProps](./react.thirdwebsdkproviderprops.md) |  |
diff --git a/packages/thirdweb-react/docs/react.useuser.md b/packages/thirdweb-react/docs/react.useuser.md
index a7c4370..1f22cde 100644
--- a/packages/thirdweb-react/docs/react.useuser.md
+++ b/packages/thirdweb-react/docs/react.useuser.md
@@ -19,7 +19,7 @@ export declare function useUser(): {
 ```
 <b>Returns:</b>
 
-{ user: ThirdwebAuthUser \| undefined; isLoading: boolean; }
+{ user: [ThirdwebAuthUser](./react.thirdwebauthuser.md) \| undefined; isLoading: boolean; }
 
 - The currently logged in user or null if not logged in, as well as a loading state.
 
diff --git a/packages/thirdweb-react/etc/react.api.md b/packages/thirdweb-react/etc/react.api.md
index 5e4bbcf..2036c42 100644
--- a/packages/thirdweb-react/etc/react.api.md
+++ b/packages/thirdweb-react/etc/react.api.md
@@ -42,6 +42,7 @@ import { IStorage } from '@thirdweb-dev/sdk/dist/browser';
 import { Json } from '@thirdweb-dev/sdk/dist/browser';
 import { ListingType } from '@thirdweb-dev/sdk/dist/browser';
 import { LoginOptions } from '@thirdweb-dev/sdk/dist/src/schema';
+import { LoginOptions as LoginOptions_2 } from '@thirdweb-dev/sdk';
 import { LoginWithMagicLinkConfiguration } from 'magic-sdk';
 import type { MagicSDKAdditionalConfiguration } from 'magic-sdk';
 import { Marketplace } from '@thirdweb-dev/sdk/dist/browser';
@@ -318,6 +319,12 @@ export interface ThirdwebAuthConfig {
     loginRedirect?: string;
 }
 
+// @public (undocumented)
+export interface ThirdwebAuthUser {
+    // (undocumented)
+    address: string;
+}
+
 // @beta (undocumented)
 export const ThirdwebNftMedia: React_2.ForwardRefExoticComponent<ThirdwebNftMediaProps & React_2.RefAttributes<HTMLMediaElement>>;
 
@@ -447,6 +454,20 @@ export function useAllRoleMembers<TContract extends ContractWithRoles>(contract:
 // @beta
 export function useAuctionWinner(contract: RequiredParam<Marketplace>, listingId: RequiredParam<BigNumberish>): UseQueryResult<string | undefined, unknown>;
 
+// Warning: (ae-internal-missing-underscore) The name "useAuth" should be prefixed with an underscore because the declaration is marked as @internal
+//
+// @internal (undocumented)
+export function useAuth(loginConfig?: LoginConfig): {
+    login: (cfg?: {
+        chainId?: number | undefined;
+        nonce?: string | undefined;
+        expirationTime?: Date | undefined;
+    } | undefined) => Promise<void>;
+    logout: () => void;
+    user: ThirdwebAuthUser | undefined;
+    isLoading: boolean;
+};
+
 // @beta
 export function useBalance(tokenAddress?: ContractAddress): UseQueryResult<    {
 symbol: string;
@@ -1856,7 +1877,6 @@ export const Web3Button: React.FC<PropsWithChildren<Web3ButtonProps>>;
 // dist/declarations/dist/Provider.d.ts:45:5 - (ae-forgotten-export) The symbol "GnosisConnectorArguments" needs to be exported by the entry point thirdweb-dev-react.cjs.d.ts
 // dist/declarations/dist/hooks/async/roles.d.ts:126:5 - (ae-incompatible-release-tags) The symbol "role" is marked as @beta, but its signature references "RolesForContract" which is marked as @internal
 // dist/declarations/dist/hooks/async/roles.d.ts:161:5 - (ae-incompatible-release-tags) The symbol "role" is marked as @beta, but its signature references "RolesForContract" which is marked as @internal
-// dist/declarations/dist/hooks/auth/useUser.d.ts:12:5 - (ae-forgotten-export) The symbol "ThirdwebAuthUser" needs to be exported by the entry point thirdweb-dev-react.cjs.d.ts
 // dist/declarations/dist/hooks/useNetwork.d.ts:48:5 - (ae-forgotten-export) The symbol "SwitchChainError" needs to be exported by the entry point thirdweb-dev-react.cjs.d.ts
 // dist/declarations/dist/types.d.ts:215:5 - (ae-incompatible-release-tags) The symbol "buyForWallet" is marked as @public, but its signature references "WalletAddress" which is marked as @beta
 // dist/declarations/dist/types.d.ts:221:5 - (ae-incompatible-release-tags) The symbol "to" is marked as @public, but its signature references "WalletAddress" which is marked as @beta
diff --git a/packages/thirdweb-react/src/components/ConnectWallet/index.tsx b/packages/thirdweb-react/src/components/ConnectWallet/index.tsx
index e5b3947..6180a9a 100644
--- a/packages/thirdweb-react/src/components/ConnectWallet/index.tsx
+++ b/packages/thirdweb-react/src/components/ConnectWallet/index.tsx
@@ -1,4 +1,6 @@
+import { useThirdwebAuthConfig } from "../../contexts/thirdweb-auth";
 import { useBalance } from "../../hooks/async/wallet";
+import { LoginConfig, useAuth } from "../../hooks/auth";
 import { useMetamask } from "../../hooks/connectors/useMetamask";
 import { useAddress } from "../../hooks/useAddress";
 import { useChainId } from "../../hooks/useChainId";
@@ -18,7 +20,7 @@ import { ThemeProvider, ThemeProviderProps } from "../shared/ThemeProvider";
 import { fontFamily } from "../theme";
 import { SupportedNetworkSelect } from "./NetworkSelect";
 import { Portal } from "@reach/portal";
-import { ChainId, SUPPORTED_CHAIN_ID } from "@thirdweb-dev/sdk";
+import { ChainId, LoginOptions, SUPPORTED_CHAIN_ID } from "@thirdweb-dev/sdk";
 import * as menu from "@zag-js/menu";
 import { normalizeProps, useMachine } from "@zag-js/react";
 import React, { useId, useMemo } from "react";
@@ -26,6 +28,7 @@ import {
   FiCheck,
   FiChevronDown,
   FiCopy,
+  FiLock,
   FiWifi,
   FiXCircle,
 } from "react-icons/fi";
@@ -57,10 +60,16 @@ function getIconForConnector(connector: Connector) {
   }
 }
 
-interface ConnectWalletProps extends ThemeProviderProps {}
+interface ConnectWalletProps extends ThemeProviderProps {
+  auth?: {
+    loginOptions?: LoginOptions;
+    loginConfig?: LoginConfig;
+  };
+}
 
 let connecting = false;
 let switchingNetwork = false;
+let authing = false;
 
 const chainIdToCurrencyMap: Record<
   SUPPORTED_CHAIN_ID,
@@ -108,6 +117,7 @@ const chainIdToCurrencyMap: Record<
  * @beta
  */
 export const ConnectWallet: React.FC<ConnectWalletProps> = ({
+  auth,
   ...themeProps
 }) => {
   const id = useId();
@@ -151,6 +161,9 @@ export const ConnectWallet: React.FC<ConnectWalletProps> = ({
 
   const { onCopy, hasCopied } = useClipboard(mountedAddress || "");
 
+  const authConfig = useThirdwebAuthConfig();
+  const { user, isLoading, login, logout } = useAuth(auth?.loginConfig);
+
   return (
     <ThemeProvider {...themeProps}>
       <div
@@ -221,6 +234,29 @@ export const ConnectWallet: React.FC<ConnectWalletProps> = ({
             <Menu {...api.contentProps}>
               {!api.isOpen ? null : mountedAddress ? (
                 <>
+                  {authConfig?.authUrl && !user?.address ? (
+                    <MenuItem
+                      {...api.getItemProps({
+                        id: "auth",
+                        closeOnSelect: false,
+                      })}
+                      leftElement={isLoading ? <Spinner /> : <FiLock />}
+                      onClick={async () => {
+                        if (isLoading || authing || user?.address) {
+                          return;
+                        }
+                        authing = true;
+                        try {
+                          await login(auth?.loginOptions);
+                        } catch (err) {
+                          console.error("failed to log in", err);
+                        }
+                        authing = false;
+                      }}
+                    >
+                      Sign in with web3
+                    </MenuItem>
+                  ) : null}
                   <MenuItem
                     {...api.getItemProps({ id: "copy", closeOnSelect: false })}
                     leftElement={
@@ -278,6 +314,9 @@ export const ConnectWallet: React.FC<ConnectWalletProps> = ({
                     leftElement={<FiXCircle width="1em" height="1em" />}
                     onClick={() => {
                       disconnect();
+                      if (authConfig?.authUrl) {
+                        logout();
+                      }
                       api.close();
                     }}
                   >
diff --git a/packages/thirdweb-react/src/hooks/auth/index.ts b/packages/thirdweb-react/src/hooks/auth/index.ts
index 0699572..5e2dc52 100644
--- a/packages/thirdweb-react/src/hooks/auth/index.ts
+++ b/packages/thirdweb-react/src/hooks/auth/index.ts
@@ -1,3 +1,4 @@
 export * from "./useLogin";
 export * from "./useLogout";
 export * from "./useUser";
+export * from "./useAuth";
diff --git a/packages/thirdweb-react/src/hooks/auth/useUser.ts b/packages/thirdweb-react/src/hooks/auth/useUser.ts
index 7611ba2..28566a7 100644
--- a/packages/thirdweb-react/src/hooks/auth/useUser.ts
+++ b/packages/thirdweb-react/src/hooks/auth/useUser.ts
@@ -3,7 +3,7 @@ import { cacheKeys } from "../../utils/cache-keys";
 import { useQuery } from "@tanstack/react-query";
 import invariant from "tiny-invariant";
 
-interface ThirdwebAuthUser {
+export interface ThirdwebAuthUser {
   address: string;
 }
 
diff --git a/yarn.lock b/yarn.lock
index cb959fd..5f256a4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2128,26 +2128,19 @@
     "@types/use-sync-external-store" "^0.0.3"
     use-sync-external-store "^1.2.0"
 
+"@thirdweb-dev/auth@^0.2.0":
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/@thirdweb-dev/auth/-/auth-0.2.0.tgz#19859448b08a08efd4d0c551b4ad624c6a8739bc"
+  integrity sha512-hme+nJGp5MEMMsF4L3IRdHvEnODmRUYsp3w/PU+nkQ7doj4ZMgUN1PAxMyZ83Tlub2MaW7ClRFTyfyf0I39HEw==
+  dependencies:
+    cookie "^0.5.0"
+    cookie-parser "^1.4.6"
+
 "@thirdweb-dev/contracts@3.1.0-1":
   version "3.1.0-1"
   resolved "https://registry.yarnpkg.com/@thirdweb-dev/contracts/-/contracts-3.1.0-1.tgz#8c4d068f0548f780a90cc723636bcc358cb946eb"
   integrity sha512-v19UtKKIpd6ol7fXcAL24F7Jwew1jIAmxstogTw9MdX2k9McwaI0Ebxu/3SSkQq2AhmruwOPp+E2xq1SWKsBUw==
 
-"@thirdweb-dev/react@*":
-  version "2.6.5"
-  resolved "https://registry.yarnpkg.com/@thirdweb-dev/react/-/react-2.6.5.tgz#30bf45e8a78d9659ba5d512d6d772d4531c4634c"
-  integrity sha512-UEZdh6tVZKP4pqWBtYYPLKmmuuO30eXGpP2b1Ze5L4aUso4TIQ8uuNNWSSf87StnIGAPe3tJrK2p1/G8O6WBAA==
-  dependencies:
-    "@gnosis.pm/safe-core-sdk" "2.1.0"
-    "@gnosis.pm/safe-ethers-adapters" "0.1.0-alpha.9"
-    "@gnosis.pm/safe-ethers-lib" "1.1.0"
-    "@tanstack/react-query" "^4.0.10"
-    detect-browser "^5.3.0"
-    mime "^3.0.0"
-    react-cool-dimensions "^2.0.7"
-    tiny-invariant "^1.2.0"
-    wagmi "^0.2.28"
-
 "@thirdweb-dev/sdk@^2", "@thirdweb-dev/sdk@^2.3.35":
   version "2.3.38"
   resolved "https://registry.yarnpkg.com/@thirdweb-dev/sdk/-/sdk-2.3.38.tgz#785ef14e6a03c3816dd71c7f377192e1edeb4177"
@@ -3288,6 +3281,29 @@ convert-source-map@^1.5.0, convert-source-map@^1.7.0:
   dependencies:
     safe-buffer "~5.1.1"
 
+cookie-parser@^1.4.6:
+  version "1.4.6"
+  resolved "https://registry.yarnpkg.com/cookie-parser/-/cookie-parser-1.4.6.tgz#3ac3a7d35a7a03bbc7e365073a26074824214594"
+  integrity sha512-z3IzaNjdwUC2olLIB5/ITd0/setiaFMLYiZJle7xg5Fe9KWAceil7xszYfHHBtDFYLSgJduS2Ty0P1uJdPDJeA==
+  dependencies:
+    cookie "0.4.1"
+    cookie-signature "1.0.6"
+
+cookie-signature@1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/cookie-signature/-/cookie-signature-1.0.6.tgz#e303a882b342cc3ee8ca513a79999734dab3ae2c"
+  integrity sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==
+
+cookie@0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.4.1.tgz#afd713fe26ebd21ba95ceb61f9a8116e50a537d1"
+  integrity sha512-ZwrFkGJxUR3EIoXtO+yVE69Eb7KlixbaeAWfBQB9vVsNn/o+Yw69gBWSSDK825hQNdN+wF8zELf3dFNl/kxkUA==
+
+cookie@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.5.0.tgz#d1f5d71adec6558c58f389987c366aa47e994f8b"
+  integrity sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==
+
 cookiejar@^2.1.1:
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/cookiejar/-/cookiejar-2.1.3.tgz#fc7a6216e408e74414b90230050842dacda75acc"

From 5a1148deed5a9296589a83a7cb4a8b8a2b04da33 Mon Sep 17 00:00:00 2001
From: Jonas Daniels <jonas.daniels@outlook.com>
Date: Tue, 23 Aug 2022 14:54:44 -0700
Subject: [PATCH 4/9] add missing files

---
 apps/example/cfg/auth.ts                       |  9 +++++++++
 apps/example/pages/api/auth/[...thirdweb].tsx  |  3 +++
 .../docs/react.thirdwebauthuser.address.md     | 11 +++++++++++
 .../docs/react.thirdwebauthuser.md             | 18 ++++++++++++++++++
 .../thirdweb-react/src/hooks/auth/useAuth.ts   | 15 +++++++++++++++
 5 files changed, 56 insertions(+)
 create mode 100644 apps/example/cfg/auth.ts
 create mode 100644 apps/example/pages/api/auth/[...thirdweb].tsx
 create mode 100644 packages/thirdweb-react/docs/react.thirdwebauthuser.address.md
 create mode 100644 packages/thirdweb-react/docs/react.thirdwebauthuser.md
 create mode 100644 packages/thirdweb-react/src/hooks/auth/useAuth.ts

diff --git a/apps/example/cfg/auth.ts b/apps/example/cfg/auth.ts
new file mode 100644
index 0000000..2d14510
--- /dev/null
+++ b/apps/example/cfg/auth.ts
@@ -0,0 +1,9 @@
+import { ThirdwebAuth } from "@thirdweb-dev/auth/next";
+import { ethers } from "ethers";
+
+const privateKey = ethers.Wallet.createRandom().privateKey;
+
+export const { ThirdwebAuthHandler, getUser } = ThirdwebAuth({
+  domain: "example.com",
+  privateKey,
+});
diff --git a/apps/example/pages/api/auth/[...thirdweb].tsx b/apps/example/pages/api/auth/[...thirdweb].tsx
new file mode 100644
index 0000000..e31d2c8
--- /dev/null
+++ b/apps/example/pages/api/auth/[...thirdweb].tsx
@@ -0,0 +1,3 @@
+import { ThirdwebAuthHandler } from "../../../cfg/auth";
+
+export default ThirdwebAuthHandler();
diff --git a/packages/thirdweb-react/docs/react.thirdwebauthuser.address.md b/packages/thirdweb-react/docs/react.thirdwebauthuser.address.md
new file mode 100644
index 0000000..c2c3143
--- /dev/null
+++ b/packages/thirdweb-react/docs/react.thirdwebauthuser.address.md
@@ -0,0 +1,11 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@thirdweb-dev/react](./react.md) &gt; [ThirdwebAuthUser](./react.thirdwebauthuser.md) &gt; [address](./react.thirdwebauthuser.address.md)
+
+## ThirdwebAuthUser.address property
+
+<b>Signature:</b>
+
+```typescript
+address: string;
+```
diff --git a/packages/thirdweb-react/docs/react.thirdwebauthuser.md b/packages/thirdweb-react/docs/react.thirdwebauthuser.md
new file mode 100644
index 0000000..275586a
--- /dev/null
+++ b/packages/thirdweb-react/docs/react.thirdwebauthuser.md
@@ -0,0 +1,18 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@thirdweb-dev/react](./react.md) &gt; [ThirdwebAuthUser](./react.thirdwebauthuser.md)
+
+## ThirdwebAuthUser interface
+
+<b>Signature:</b>
+
+```typescript
+export interface ThirdwebAuthUser 
+```
+
+## Properties
+
+|  Property | Modifiers | Type | Description |
+|  --- | --- | --- | --- |
+|  [address](./react.thirdwebauthuser.address.md) |  | string |  |
+
diff --git a/packages/thirdweb-react/src/hooks/auth/useAuth.ts b/packages/thirdweb-react/src/hooks/auth/useAuth.ts
new file mode 100644
index 0000000..897f3b2
--- /dev/null
+++ b/packages/thirdweb-react/src/hooks/auth/useAuth.ts
@@ -0,0 +1,15 @@
+import { LoginConfig, useLogin } from "./useLogin";
+import { useLogout } from "./useLogout";
+import { useUser } from "./useUser";
+
+/**
+ *
+ * @returns
+ * @internal
+ */
+export function useAuth(loginConfig?: LoginConfig) {
+  const user = useUser();
+  const login = useLogin(loginConfig);
+  const logout = useLogout();
+  return { ...user, login, logout };
+}

From b007666e03a6af336029dedb7aada54576595fb4 Mon Sep 17 00:00:00 2001
From: Jonas Daniels <jonas.daniels@outlook.com>
Date: Tue, 23 Aug 2022 14:59:41 -0700
Subject: [PATCH 5/9] remove extra file

---
 packages/thirdweb-react/src/hooks/auth/index.ts | 17 ++++++++++++++++-
 .../thirdweb-react/src/hooks/auth/useAuth.ts    | 15 ---------------
 2 files changed, 16 insertions(+), 16 deletions(-)
 delete mode 100644 packages/thirdweb-react/src/hooks/auth/useAuth.ts

diff --git a/packages/thirdweb-react/src/hooks/auth/index.ts b/packages/thirdweb-react/src/hooks/auth/index.ts
index 5e2dc52..bc2c242 100644
--- a/packages/thirdweb-react/src/hooks/auth/index.ts
+++ b/packages/thirdweb-react/src/hooks/auth/index.ts
@@ -1,4 +1,19 @@
+import { LoginConfig, useLogin } from "./useLogin";
+import { useLogout } from "./useLogout";
+import { useUser } from "./useUser";
+
 export * from "./useLogin";
 export * from "./useLogout";
 export * from "./useUser";
-export * from "./useAuth";
+
+/**
+ *
+ * @returns
+ * @internal
+ */
+export function useAuth(loginConfig?: LoginConfig) {
+  const user = useUser();
+  const login = useLogin(loginConfig);
+  const logout = useLogout();
+  return { ...user, login, logout };
+}
diff --git a/packages/thirdweb-react/src/hooks/auth/useAuth.ts b/packages/thirdweb-react/src/hooks/auth/useAuth.ts
deleted file mode 100644
index 897f3b2..0000000
--- a/packages/thirdweb-react/src/hooks/auth/useAuth.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { LoginConfig, useLogin } from "./useLogin";
-import { useLogout } from "./useLogout";
-import { useUser } from "./useUser";
-
-/**
- *
- * @returns
- * @internal
- */
-export function useAuth(loginConfig?: LoginConfig) {
-  const user = useUser();
-  const login = useLogin(loginConfig);
-  const logout = useLogout();
-  return { ...user, login, logout };
-}

From bbc6c3fbe0d7bd11d398387dcd40c90563bbaa65 Mon Sep 17 00:00:00 2001
From: Jonas Daniels <jonas.daniels@outlook.com>
Date: Tue, 23 Aug 2022 15:16:44 -0700
Subject: [PATCH 6/9] add switch wallet capability for MM wallets

---
 packages/thirdweb-react/package.json          |  2 +-
 .../src/components/ConnectWallet/index.tsx    | 32 +++++++++++++++++++
 2 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/packages/thirdweb-react/package.json b/packages/thirdweb-react/package.json
index ab675a2..933caed 100644
--- a/packages/thirdweb-react/package.json
+++ b/packages/thirdweb-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@thirdweb-dev/react",
-  "version": "2.7.0",
+  "version": "2.7.1-0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com:thirdweb-dev/react.git"
diff --git a/packages/thirdweb-react/src/components/ConnectWallet/index.tsx b/packages/thirdweb-react/src/components/ConnectWallet/index.tsx
index 6180a9a..bdbf5a8 100644
--- a/packages/thirdweb-react/src/components/ConnectWallet/index.tsx
+++ b/packages/thirdweb-react/src/components/ConnectWallet/index.tsx
@@ -29,6 +29,7 @@ import {
   FiChevronDown,
   FiCopy,
   FiLock,
+  FiShuffle,
   FiWifi,
   FiXCircle,
 } from "react-icons/fi";
@@ -70,6 +71,7 @@ interface ConnectWalletProps extends ThemeProviderProps {
 let connecting = false;
 let switchingNetwork = false;
 let authing = false;
+let switchingWallet = false;
 
 const chainIdToCurrencyMap: Record<
   SUPPORTED_CHAIN_ID,
@@ -307,6 +309,36 @@ export const ConnectWallet: React.FC<ConnectWalletProps> = ({
                       }}
                     />
                   </MenuItem>
+                  {/* allow switching wallets for metamask */}
+                  {connector &&
+                  connector.name === "MetaMask" &&
+                  connector.id === "injected" ? (
+                    <MenuItem
+                      {...api.getItemProps({
+                        id: "switch-wallet",
+                      })}
+                      leftElement={<FiShuffle width="1em" height="1em" />}
+                      onClick={async () => {
+                        if (switchingWallet) {
+                          return;
+                        }
+                        switchingWallet = true;
+                        try {
+                          await connector.getProvider().request({
+                            method: "wallet_requestPermissions",
+                            params: [{ eth_accounts: {} }],
+                          });
+                          api.close();
+                        } catch (err) {
+                          console.error("failed to switch wallets", err);
+                        }
+                        switchingWallet = false;
+                      }}
+                    >
+                      Switch Account
+                    </MenuItem>
+                  ) : null}
+
                   <MenuItem
                     {...api.getItemProps({
                       id: "disconnect",

From de95fb40240ea64ad36a818163dbe0502b0a09f4 Mon Sep 17 00:00:00 2001
From: Jonas Daniels <jonas.daniels@outlook.com>
Date: Tue, 23 Aug 2022 15:21:18 -0700
Subject: [PATCH 7/9] push up version

---
 packages/thirdweb-react/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/thirdweb-react/package.json b/packages/thirdweb-react/package.json
index 933caed..ca3c8e7 100644
--- a/packages/thirdweb-react/package.json
+++ b/packages/thirdweb-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@thirdweb-dev/react",
-  "version": "2.7.1-0",
+  "version": "2.7.1-1",
   "repository": {
     "type": "git",
     "url": "git+https://github.com:thirdweb-dev/react.git"

From 4501a0a9596dc07ad534a8e5464bb828d194b6db Mon Sep 17 00:00:00 2001
From: Jonas Daniels <jonas.daniels@outlook.com>
Date: Tue, 23 Aug 2022 16:13:02 -0700
Subject: [PATCH 8/9] enable sign in force vs optional

---
 .../src/components/ConnectWallet/index.tsx    | 101 ++++++++++++------
 1 file changed, 66 insertions(+), 35 deletions(-)

diff --git a/packages/thirdweb-react/src/components/ConnectWallet/index.tsx b/packages/thirdweb-react/src/components/ConnectWallet/index.tsx
index bdbf5a8..389021f 100644
--- a/packages/thirdweb-react/src/components/ConnectWallet/index.tsx
+++ b/packages/thirdweb-react/src/components/ConnectWallet/index.tsx
@@ -65,6 +65,7 @@ interface ConnectWalletProps extends ThemeProviderProps {
   auth?: {
     loginOptions?: LoginOptions;
     loginConfig?: LoginConfig;
+    loginOptional?: boolean;
   };
 }
 
@@ -166,6 +167,10 @@ export const ConnectWallet: React.FC<ConnectWalletProps> = ({
   const authConfig = useThirdwebAuthConfig();
   const { user, isLoading, login, logout } = useAuth(auth?.loginConfig);
 
+  const requiresSignIn = auth?.loginOptional
+    ? false
+    : !!authConfig?.authUrl && !!mountedAddress && !user?.address;
+
   return (
     <ThemeProvider {...themeProps}>
       <div
@@ -175,9 +180,28 @@ export const ConnectWallet: React.FC<ConnectWalletProps> = ({
       >
         <Button
           style={{ height: "50px", minWidth: "200px" }}
-          {...api.triggerProps}
+          onClick={async (e) => {
+            if (requiresSignIn) {
+              e.preventDefault();
+              e.stopPropagation();
+              authing = true;
+              try {
+                await login(auth?.loginOptions);
+              } catch (err) {
+                console.error("failed to log in", err);
+              }
+              authing = false;
+            }
+          }}
+          {...(requiresSignIn ? {} : api.triggerProps)}
           leftElement={
-            mountedAddress && chainId && chainId in chainIdToCurrencyMap ? (
+            requiresSignIn ? (
+              isLoading ? (
+                <Spinner />
+              ) : (
+                <FiLock />
+              )
+            ) : mountedAddress && chainId && chainId in chainIdToCurrencyMap ? (
               <Icon
                 boxSize="1.5em"
                 name={chainIdToCurrencyMap[chainId as SUPPORTED_CHAIN_ID]}
@@ -185,41 +209,47 @@ export const ConnectWallet: React.FC<ConnectWalletProps> = ({
             ) : undefined
           }
           rightElement={
-            <>
-              {connector && getIconForConnector(connector)}
-              <FiChevronDown
-                style={{
-                  transition: "transform 150ms ease",
-                  transform: `rotate(${api.isOpen ? "-180deg" : "0deg"})`,
-                }}
-              />
-            </>
+            requiresSignIn ? undefined : (
+              <>
+                {connector && getIconForConnector(connector)}
+                <FiChevronDown
+                  style={{
+                    transition: "transform 150ms ease",
+                    transform: `rotate(${api.isOpen ? "-180deg" : "0deg"})`,
+                  }}
+                />
+              </>
+            )
           }
         >
           {mountedAddress ? (
-            <span
-              style={{
-                display: "flex",
-                flexDirection: "column",
-                fontWeight: 400,
-                alignItems: "flex-start",
-                fontSize: "0.8em",
-              }}
-            >
-              <span style={{ whiteSpace: "nowrap", fontWeight: 500 }}>
-                {balanceQuery.isLoading ? (
-                  "Loading..."
-                ) : (
-                  <>
-                    {balanceQuery.data?.displayValue.slice(0, 5)}{" "}
-                    {balanceQuery.data?.symbol}
-                  </>
-                )}
-              </span>
-              <span style={{ fontSize: "0.9em" }}>
-                {shortenIfAddress(mountedAddress)}
+            requiresSignIn ? (
+              <span style={{ whiteSpace: "nowrap" }}>Sign in</span>
+            ) : (
+              <span
+                style={{
+                  display: "flex",
+                  flexDirection: "column",
+                  fontWeight: 400,
+                  alignItems: "flex-start",
+                  fontSize: "0.8em",
+                }}
+              >
+                <span style={{ whiteSpace: "nowrap", fontWeight: 500 }}>
+                  {balanceQuery.isLoading ? (
+                    "Loading..."
+                  ) : (
+                    <>
+                      {balanceQuery.data?.displayValue.slice(0, 5)}{" "}
+                      {balanceQuery.data?.symbol}
+                    </>
+                  )}
+                </span>
+                <span style={{ fontSize: "0.9em" }}>
+                  {shortenIfAddress(mountedAddress)}
+                </span>
               </span>
-            </span>
+            )
           ) : (
             <span style={{ whiteSpace: "nowrap" }}>Connect Wallet</span>
           )}
@@ -236,7 +266,7 @@ export const ConnectWallet: React.FC<ConnectWalletProps> = ({
             <Menu {...api.contentProps}>
               {!api.isOpen ? null : mountedAddress ? (
                 <>
-                  {authConfig?.authUrl && !user?.address ? (
+                  {authConfig?.authUrl && !user?.address && !requiresSignIn ? (
                     <MenuItem
                       {...api.getItemProps({
                         id: "auth",
@@ -256,7 +286,7 @@ export const ConnectWallet: React.FC<ConnectWalletProps> = ({
                         authing = false;
                       }}
                     >
-                      Sign in with web3
+                      Sign in
                     </MenuItem>
                   ) : null}
                   <MenuItem
@@ -375,6 +405,7 @@ export const ConnectWallet: React.FC<ConnectWalletProps> = ({
                   </MenuItem>
                   {supportedConnectors
                     .filter((c) => c.name !== "MetaMask")
+                    .sort((a, b) => a.name.localeCompare(b.name))
                     .map((c) => {
                       if (!c.ready) {
                         return null;

From 5354533f7d375424e0a567bcb5266e9838604a3b Mon Sep 17 00:00:00 2001
From: Jonas Daniels <jonas.daniels@outlook.com>
Date: Tue, 23 Aug 2022 16:15:23 -0700
Subject: [PATCH 9/9] version

---
 packages/thirdweb-react/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/thirdweb-react/package.json b/packages/thirdweb-react/package.json
index ca3c8e7..7070ffc 100644
--- a/packages/thirdweb-react/package.json
+++ b/packages/thirdweb-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@thirdweb-dev/react",
-  "version": "2.7.1-1",
+  "version": "2.7.1-2",
   "repository": {
     "type": "git",
     "url": "git+https://github.com:thirdweb-dev/react.git"