enable auth usage with <ThirdwebSDKProvider/>

docs/react.md

@@ -66,8 +66,8 @@ import { useGnosis } from "@thirdweb-dev/react"
 |  [useLazyMint(contract, onProgress)](./react.uselazymint.md) | <b><i>(BETA)</i></b> Use this to lazy mint a batch of NFTs on your [DropContract](./react.dropcontract.md) |
 |  [useListing(contract, listingId)](./react.uselisting.md) | <b><i>(BETA)</i></b> Use this to get a specific listing from the marketplace. |
 |  [useListings(contract, filter)](./react.uselistings.md) | <b><i>(BETA)</i></b> Use this to get a list all listings from your marketplace contract. |
-|  [useLogin(config)](./react.uselogin.md) | Hook to securely login to a backend with the connected wallet. The backend authentication URL must be configured on the ThirdwebProvider. |
-|  [useLogout()](./react.uselogout.md) | Hook to logout the connected wallet from the backend. The backend logout URL must be configured on the ThirdwebProvider. |
+|  [useLogin(config)](./react.uselogin.md) | <b><i>(BETA)</i></b> Hook to securely login to a backend with the connected wallet. The backend authentication URL must be configured on the ThirdwebProvider. |
+|  [useLogout()](./react.uselogout.md) | <b><i>(BETA)</i></b> Hook to logout the connected wallet from the backend. The backend logout URL must be configured on the ThirdwebProvider. |
 |  [useMagic()](./react.usemagic.md) | <p>Hook for connecting to an email wallet using magic link. This enables users without their own wallets to connect to your application and sign transactions securely using their email.</p>
 ```javascript
 import { useMagic } from "@thirdweb-dev/react"
@@ -122,7 +122,7 @@ import { useNetworkMistmatch } from "@thirdweb-dev/react"
 |  [useUpdatePlatformFees(contract)](./react.useupdateplatformfees.md) | <b><i>(BETA)</i></b> Use this to update the platform fees settings of your  |
 |  [useUpdatePrimarySaleRecipient(contract)](./react.useupdateprimarysalerecipient.md) | <b><i>(BETA)</i></b> Use this to update the primary sales recipient of your  |
 |  [useUpdateRoyaltySettings(contract)](./react.useupdateroyaltysettings.md) | <b><i>(BETA)</i></b> Use this to update the royalty settings of your  |
-|  [useUser()](./react.useuser.md) | Hook to get the currently logged in user. |
+|  [useUser()](./react.useuser.md) | <b><i>(BETA)</i></b> Hook to get the currently logged in user. |
 |  [useVote(contractAddress)](./react.usevote.md) | Hook for getting an instance of an <code>Vote</code> contract. This contract enables fully featured voting-based decentralized governance systems. |
 |  [useWalletConnect()](./react.usewalletconnect.md) | <p>Hook for connecting to a mobile wallet with Wallet Connect</p>
 ```javascript
@@ -140,7 +140,7 @@ import { useWalletConnect } from "@thirdweb-dev/react"
 |  [MediaRendererProps](./react.mediarendererprops.md) | The props for the [MediaRenderer](./react.mediarenderer.md) component. |
 |  [MediaType](./react.mediatype.md) |  |
 |  [SharedMediaProps](./react.sharedmediaprops.md) |  |
-|  [ThirdwebAuthConfig](./react.thirdwebauthconfig.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. |
 |  [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) |  |

docs/react.thirdwebauthconfig.authurl.md

@@ -4,7 +4,10 @@
 
 ## ThirdwebAuthConfig.authUrl property
 
-The backend URL of the authentication endoints. For example, if your endpoints are at /api/auth/login, /api/auth/logout, etc. then this should be set to "/api/auth".
+> This API is provided as a preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
+> 
+
+The backend URL of the authentication endoints. For example, if your endpoints are at `/api/auth/login`<!-- -->, `/api/auth/logout`<!-- -->, etc. then this should be set to `/api/auth`<!-- -->.
 
 <b>Signature:</b>
 

docs/react.thirdwebauthconfig.domain.md

@@ -4,6 +4,9 @@
 
 ## ThirdwebAuthConfig.domain property
 
+> This API is provided as a preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
+> 
+
 The frontend domain used to generate the login payload. This domain should match the domain used on your auth backend.
 
 <b>Signature:</b>

docs/react.thirdwebauthconfig.loginredirect.md

@@ -4,6 +4,9 @@
 
 ## ThirdwebAuthConfig.loginRedirect property
 
+> This API is provided as a preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
+> 
+
 The URL to redirect to after a succesful login.
 
 <b>Signature:</b>

docs/react.thirdwebauthconfig.md

@@ -4,6 +4,11 @@
 
 ## ThirdwebAuthConfig interface
 
+> This API is provided as a preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
+> 
+
+The configuration to use the react SDK with an \[auth\](https://portal.thirdweb.com/auth) server.
+
 <b>Signature:</b>
 
 ```typescript
@@ -14,7 +19,7 @@ export interface ThirdwebAuthConfig
 
 |  Property | Modifiers | Type | Description |
 |  --- | --- | --- | --- |
-|  [authUrl](./react.thirdwebauthconfig.authurl.md) |  | string | The backend URL of the authentication endoints. For example, if your endpoints are at /api/auth/login, /api/auth/logout, etc. then this should be set to "/api/auth". |
-|  [domain](./react.thirdwebauthconfig.domain.md) |  | string | The frontend domain used to generate the login payload. This domain should match the domain used on your auth backend. |
-|  [loginRedirect?](./react.thirdwebauthconfig.loginredirect.md) |  | string | <i>(Optional)</i> The URL to redirect to after a succesful login. |
+|  [authUrl](./react.thirdwebauthconfig.authurl.md) |  | string | <b><i>(BETA)</i></b> The backend URL of the authentication endoints. For example, if your endpoints are at <code>/api/auth/login</code>, <code>/api/auth/logout</code>, etc. then this should be set to <code>/api/auth</code>. |
+|  [domain](./react.thirdwebauthconfig.domain.md) |  | string | <b><i>(BETA)</i></b> The frontend domain used to generate the login payload. This domain should match the domain used on your auth backend. |
+|  [loginRedirect?](./react.thirdwebauthconfig.loginredirect.md) |  | string | <b><i>(BETA)</i></b> <i>(Optional)</i> The URL to redirect to after a succesful login. |
 

docs/react.thirdwebsdkproviderprops.md

@@ -9,7 +9,7 @@
 ```typescript
 export interface ThirdwebSDKProviderProps extends Omit<ThirdwebSDKProviderWagmiWrapper, "queryClient"> 
 ```
-<b>Extends:</b> Omit&lt;[ThirdwebSDKProviderWagmiWrapper](./react.thirdwebsdkproviderwagmiwrapper.md)
+<b>Extends:</b> Omit&lt;[ThirdwebSDKProviderWagmiWrapper](./react.thirdwebsdkproviderwagmiwrapper.md)<!-- -->, "queryClient"&gt;
 
 ## Properties
 

docs/react.thirdwebsdkproviderwagmiwrapper.md

@@ -7,9 +7,9 @@
 <b>Signature:</b>
 
 ```typescript
-export interface ThirdwebSDKProviderWagmiWrapper extends Pick<ThirdwebProviderProps, "desiredChainId" | "sdkOptions" | "storageInterface"> 
+export interface ThirdwebSDKProviderWagmiWrapper extends Pick<ThirdwebProviderProps, "desiredChainId" | "sdkOptions" | "storageInterface" | "authConfig"> 
 ```
-<b>Extends:</b> Pick&lt;[ThirdwebProviderProps](./react.thirdwebproviderprops.md)
+<b>Extends:</b> Pick&lt;[ThirdwebProviderProps](./react.thirdwebproviderprops.md)<!-- -->, "desiredChainId" \| "sdkOptions" \| "storageInterface" \| "authConfig"&gt;
 
 ## Properties
 

docs/react.uselogin.md

@@ -4,6 +4,9 @@
 
 ## useLogin() function
 
+> This API is provided as a preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
+> 
+
 Hook to securely login to a backend with the connected wallet. The backend authentication URL must be configured on the ThirdwebProvider.
 
 <b>Signature:</b>

docs/react.uselogout.md

@@ -4,6 +4,9 @@
 
 ## useLogout() function
 
+> This API is provided as a preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
+> 
+
 Hook to logout the connected wallet from the backend. The backend logout URL must be configured on the ThirdwebProvider.
 
 <b>Signature:</b>

docs/react.useuser.md

@@ -4,6 +4,9 @@
 
 ## useUser() function
 
+> This API is provided as a preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
+> 
+
 Hook to get the currently logged in user.
 
 <b>Signature:</b>

etc/react.api.md

@@ -281,7 +281,7 @@ export interface SharedMediaProps {
     width?: HTMLIFrameElement["width"];
 }
 
-// @public (undocumented)
+// @beta
 export interface ThirdwebAuthConfig {
     authUrl: string;
     domain: string;
@@ -327,7 +327,7 @@ export interface ThirdwebSDKProviderProps extends Omit<ThirdwebSDKProviderWagmiW
 }
 
 // @public (undocumented)
-export interface ThirdwebSDKProviderWagmiWrapper extends Pick<ThirdwebProviderProps, "desiredChainId" | "sdkOptions" | "storageInterface"> {
+export interface ThirdwebSDKProviderWagmiWrapper extends Pick<ThirdwebProviderProps, "desiredChainId" | "sdkOptions" | "storageInterface" | "authConfig"> {
     // (undocumented)
     provider: ChainOrRpc | SignerOrProvider;
     // (undocumented)
@@ -1442,10 +1442,10 @@ export function useListing(contract: RequiredParam<Marketplace>, listingId: Requ
 // @beta
 export function useListings(contract: RequiredParam<Marketplace>, filter?: MarketplaceFilter): UseQueryResult<(AuctionListing | DirectListing)[], unknown>;
 
-// @public
+// @beta
 export function useLogin(config?: LoginConfig): (cfg?: LoginOptions) => Promise<void>;
 
-// @public
+// @beta
 export function useLogout(): () => void;
 
 // @public
@@ -1740,7 +1740,7 @@ seller_fee_basis_points?: number | undefined;
 fee_recipient?: string | undefined;
 }, unknown>;
 
-// @public
+// @beta
 export function useUser(): {
     user: ThirdwebAuthUser | undefined;
     isLoading: boolean;
@@ -1792,8 +1792,8 @@ export type WalletLinkConnectorType = "walletLink" | "coinbase" | {
 
 // Warnings were encountered during analysis:
 //
-// dist/Provider.d.ts:37:5 - (ae-forgotten-export) The symbol "MagicConnectorArguments" needs to be exported by the entry point index.d.ts
-// dist/Provider.d.ts:44:5 - (ae-forgotten-export) The symbol "GnosisConnectorArguments" needs to be exported by the entry point index.d.ts
+// dist/Provider.d.ts:38:5 - (ae-forgotten-export) The symbol "MagicConnectorArguments" needs to be exported by the entry point index.d.ts
+// dist/Provider.d.ts:45:5 - (ae-forgotten-export) The symbol "GnosisConnectorArguments" needs to be exported by the entry point index.d.ts
 // 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/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/hooks/auth/useUser.d.ts:12:5 - (ae-forgotten-export) The symbol "ThirdwebAuthUser" needs to be exported by the entry point index.d.ts

src/Provider.tsx

@@ -8,6 +8,10 @@ import {
   SupportedChain,
   defaultSupportedChains,
 } from "./constants/chain";
+import {
+  ThirdwebAuthConfig,
+  ThirdwebAuthConfigProvider,
+} from "./contexts/thirdweb-auth";
 import {
   ThirdwebConfigProvider,
   defaultChainRpc,
@@ -99,26 +103,6 @@ export type ChainRpc<TSupportedChain extends SupportedChain> = Record<
   TSupportedChain extends Chain ? TSupportedChain["id"] : TSupportedChain,
   string
 >;
-
-export interface ThirdwebAuthConfig {
-  /**
-   * The backend URL of the authentication endoints. For example, if your endpoints are
-   * at /api/auth/login, /api/auth/logout, etc. then this should be set to "/api/auth".
-   */
-  authUrl: string;
-
-  /**
-   * The frontend domain used to generate the login payload.
-   * This domain should match the domain used on your auth backend.
-   */
-  domain: string;
-
-  /**
-   * The URL to redirect to after a succesful login.
-   */
-  loginRedirect?: string;
-}
-
 /**
  * the metadata to pass to wallet connection dialog (may show up during the wallet-connection process)
  * @remarks this is only used for wallet connect and wallet link, metamask does not support it
@@ -286,14 +270,6 @@ export const ThirdwebProvider = <
     }, {} as Record<number, string>);
   }, [chainRpc, _supporrtedChains]);
 
-  // Remove trailing slash from URL if present
-  const _authConfig = authConfig
-    ? {
-        ...authConfig,
-        authUrl: authConfig.authUrl.replace(/\/$/, ""),
-      }
-    : undefined;
-
   const wagmiProps: WagmiproviderProps = useMemo(() => {
     const walletConnectClientMeta = {
       name: dAppMeta.name,
@@ -443,7 +419,6 @@ export const ThirdwebProvider = <
       value={{
         rpcUrlMap: _rpcUrlMap,
         supportedChains: _supporrtedChains,
-        authConfig: _authConfig,
       }}
     >
       <WagmiProvider {...wagmiProps}>
@@ -452,6 +427,7 @@ export const ThirdwebProvider = <
           desiredChainId={desiredChainId}
           sdkOptions={sdkOptionsWithDefaults}
           storageInterface={storageInterface}
+          authConfig={authConfig}
         >
           {children}
         </ThirdwebSDKProviderWagmiWrapper>
@@ -463,7 +439,7 @@ export const ThirdwebProvider = <
 export interface ThirdwebSDKProviderWagmiWrapper
   extends Pick<
     ThirdwebProviderProps,
-    "desiredChainId" | "sdkOptions" | "storageInterface"
+    "desiredChainId" | "sdkOptions" | "storageInterface" | "authConfig"
   > {
   signer?: Signer;
   provider: ChainOrRpc | SignerOrProvider;
@@ -515,6 +491,7 @@ export const ThirdwebSDKProvider: React.FC<
   provider,
   signer,
   queryClient,
+  authConfig,
   children,
 }) => {
   const queryClientWithDefault: QueryClient = useMemo(() => {
@@ -546,11 +523,13 @@ export const ThirdwebSDKProvider: React.FC<
   );
 
   return (
-    <QueryClientProvider client={queryClientWithDefault}>
-      <ThirdwebSDKContext.Provider value={ctxValue}>
-        {children}
-      </ThirdwebSDKContext.Provider>
-    </QueryClientProvider>
+    <ThirdwebAuthConfigProvider value={authConfig}>
+      <QueryClientProvider client={queryClientWithDefault}>
+        <ThirdwebSDKContext.Provider value={ctxValue}>
+          {children}
+        </ThirdwebSDKContext.Provider>
+      </QueryClientProvider>
+    </ThirdwebAuthConfigProvider>
   );
 };
 

src/contexts/thirdweb-auth.tsx

@@ -0,0 +1,54 @@
+import { PropsWithChildren, createContext, useContext, useMemo } from "react";
+
+/**
+ * The configuration to use the react SDK with an [auth](https://portal.thirdweb.com/auth) server.
+ *
+ * @beta
+ */
+export interface ThirdwebAuthConfig {
+  /**
+   * The backend URL of the authentication endoints. For example, if your endpoints are
+   * at `/api/auth/login`, `/api/auth/logout`, etc. then this should be set to `/api/auth`.
+   */
+  authUrl: string;
+
+  /**
+   * The frontend domain used to generate the login payload.
+   * This domain should match the domain used on your auth backend.
+   */
+  domain: string;
+
+  /**
+   * The URL to redirect to after a succesful login.
+   */
+  loginRedirect?: string;
+}
+
+const ThirdwebAuthConfigContext = createContext<ThirdwebAuthConfig | undefined>(
+  undefined,
+);
+
+export const ThirdwebAuthConfigProvider: React.FC<
+  PropsWithChildren<{ value?: ThirdwebAuthConfig }>
+> = ({ value, children }) => {
+  // Remove trailing slash from URL if present
+  const authConfig = useMemo(
+    () =>
+      value
+        ? {
+            ...value,
+            authUrl: value.authUrl.replace(/\/$/, ""),
+          }
+        : undefined,
+    [value],
+  );
+  return (
+    <ThirdwebAuthConfigContext.Provider value={authConfig}>
+      {children}
+    </ThirdwebAuthConfigContext.Provider>
+  );
+};
+
+export function useThirdwebAuthConfig() {
+  return useContext(ThirdwebAuthConfigContext);
+}

src/contexts/thirdweb-config.tsx

@@ -1,4 +1,3 @@
-import { ThirdwebAuthConfig } from "../Provider";
 import {
   Chain,
   SupportedChainId,
@@ -10,7 +9,6 @@ import React, { PropsWithChildren, createContext, useContext } from "react";
 interface ThirdwebConfigContext {
   rpcUrlMap: Record<SupportedChainId | number, string>;
   supportedChains: Chain[];
-  authConfig?: ThirdwebAuthConfig;
 }
 
 export const defaultChainRpc: Record<SupportedChainId | number, string> = {
@@ -23,7 +21,7 @@ export const defaultChainRpc: Record<SupportedChainId | number, string> = {
   [ChainId.Avalanche]: "avalanche",
 };
 
-export const ThirdwebConfigContext = createContext<ThirdwebConfigContext>({
+const ThirdwebConfigContext = createContext<ThirdwebConfigContext>({
   rpcUrlMap: defaultChainRpc,
   supportedChains: defaultSupportedChains,
 });