From 66373d9abbab92d5da53df058b268a230a6049a7 Mon Sep 17 00:00:00 2001 From: Jonas Daniels Date: Tue, 16 Aug 2022 17:28:15 -0700 Subject: [PATCH 1/3] minor cleanups --- docs/react.md | 7 +++---- docs/react.thirdwebauthconfig.authurl.md | 13 ------------ docs/react.thirdwebauthconfig.domain.md | 13 ------------ .../react.thirdwebauthconfig.loginredirect.md | 13 ------------ docs/react.thirdwebauthconfig.md | 20 ------------------ docs/react.thirdwebproviderprops.md | 2 +- docs/react.thirdwebsdkproviderprops.md | 2 +- docs/react.thirdwebsdkproviderwagmiwrapper.md | 2 +- docs/react.uselogin.md | 3 +++ docs/react.uselogout.md | 3 +++ docs/react.useuser.md | 3 +++ etc/react.api.md | 19 +++++++---------- src/Provider.tsx | 21 +------------------ src/contexts/thirdweb-config.tsx | 20 +++++++++++++++++- src/hooks/auth/useLogin.ts | 6 ++++-- src/hooks/auth/useLogout.ts | 2 +- src/hooks/auth/useUser.ts | 2 +- 17 files changed, 48 insertions(+), 103 deletions(-) delete mode 100644 docs/react.thirdwebauthconfig.authurl.md delete mode 100644 docs/react.thirdwebauthconfig.domain.md delete mode 100644 docs/react.thirdwebauthconfig.loginredirect.md delete mode 100644 docs/react.thirdwebauthconfig.md diff --git a/docs/react.md b/docs/react.md index 20c78bf..2b16867 100644 --- a/docs/react.md +++ b/docs/react.md @@ -66,8 +66,8 @@ import { useGnosis } from "@thirdweb-dev/react" | [useLazyMint(contract, onProgress)](./react.uselazymint.md) | (BETA) Use this to lazy mint a batch of NFTs on your [DropContract](./react.dropcontract.md) | | [useListing(contract, listingId)](./react.uselisting.md) | (BETA) Use this to get a specific listing from the marketplace. | | [useListings(contract, filter)](./react.uselistings.md) | (BETA) 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) | (BETA) 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) | (BETA) Hook to logout the connected wallet from the backend. The backend logout URL must be configured on the ThirdwebProvider. | | [useMagic()](./react.usemagic.md) |

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.

```javascript import { useMagic } from "@thirdweb-dev/react" @@ -122,7 +122,7 @@ import { useNetworkMistmatch } from "@thirdweb-dev/react" | [useUpdatePlatformFees(contract)](./react.useupdateplatformfees.md) | (BETA) Use this to update the platform fees settings of your | | [useUpdatePrimarySaleRecipient(contract)](./react.useupdateprimarysalerecipient.md) | (BETA) Use this to update the primary sales recipient of your | | [useUpdateRoyaltySettings(contract)](./react.useupdateroyaltysettings.md) | (BETA) 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) | (BETA) Hook to get the currently logged in user. | | [useVote(contractAddress)](./react.usevote.md) | Hook for getting an instance of an Vote contract. This contract enables fully featured voting-based decentralized governance systems. | | [useWalletConnect()](./react.usewalletconnect.md) |

Hook for connecting to a mobile wallet with Wallet Connect

```javascript @@ -140,7 +140,6 @@ 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) | | | [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/docs/react.thirdwebauthconfig.authurl.md b/docs/react.thirdwebauthconfig.authurl.md deleted file mode 100644 index 5f80957..0000000 --- a/docs/react.thirdwebauthconfig.authurl.md +++ /dev/null @@ -1,13 +0,0 @@ - - -[Home](./index.md) > [@thirdweb-dev/react](./react.md) > [ThirdwebAuthConfig](./react.thirdwebauthconfig.md) > [authUrl](./react.thirdwebauthconfig.authurl.md) - -## 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". - -Signature: - -```typescript -authUrl: string; -``` diff --git a/docs/react.thirdwebauthconfig.domain.md b/docs/react.thirdwebauthconfig.domain.md deleted file mode 100644 index 169e1ce..0000000 --- a/docs/react.thirdwebauthconfig.domain.md +++ /dev/null @@ -1,13 +0,0 @@ - - -[Home](./index.md) > [@thirdweb-dev/react](./react.md) > [ThirdwebAuthConfig](./react.thirdwebauthconfig.md) > [domain](./react.thirdwebauthconfig.domain.md) - -## ThirdwebAuthConfig.domain property - -The frontend domain used to generate the login payload. This domain should match the domain used on your auth backend. - -Signature: - -```typescript -domain: string; -``` diff --git a/docs/react.thirdwebauthconfig.loginredirect.md b/docs/react.thirdwebauthconfig.loginredirect.md deleted file mode 100644 index 8b41d4f..0000000 --- a/docs/react.thirdwebauthconfig.loginredirect.md +++ /dev/null @@ -1,13 +0,0 @@ - - -[Home](./index.md) > [@thirdweb-dev/react](./react.md) > [ThirdwebAuthConfig](./react.thirdwebauthconfig.md) > [loginRedirect](./react.thirdwebauthconfig.loginredirect.md) - -## ThirdwebAuthConfig.loginRedirect property - -The URL to redirect to after a succesful login. - -Signature: - -```typescript -loginRedirect?: string; -``` diff --git a/docs/react.thirdwebauthconfig.md b/docs/react.thirdwebauthconfig.md deleted file mode 100644 index 599c949..0000000 --- a/docs/react.thirdwebauthconfig.md +++ /dev/null @@ -1,20 +0,0 @@ - - -[Home](./index.md) > [@thirdweb-dev/react](./react.md) > [ThirdwebAuthConfig](./react.thirdwebauthconfig.md) - -## ThirdwebAuthConfig interface - -Signature: - -```typescript -export interface ThirdwebAuthConfig -``` - -## Properties - -| 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 | (Optional) The URL to redirect to after a succesful login. | - diff --git a/docs/react.thirdwebproviderprops.md b/docs/react.thirdwebproviderprops.md index 78223e4..0027a56 100644 --- a/docs/react.thirdwebproviderprops.md +++ b/docs/react.thirdwebproviderprops.md @@ -16,7 +16,7 @@ export interface ThirdwebProviderProps(BETA) (Optional) The configuration used for thirdweb auth usage. Enables users to login to backends with their wallet. | +| [authConfig?](./react.thirdwebproviderprops.authconfig.md) | | ThirdwebAuthConfig | (BETA) (Optional) The configuration used for thirdweb auth usage. Enables users to login to backends with their wallet. | | [autoConnect?](./react.thirdwebproviderprops.autoconnect.md) | | boolean | (Optional) Whether or not to attempt auto-connect to a wallet. | | [chainRpc?](./react.thirdwebproviderprops.chainrpc.md) | | Partial<ChainRpc<TSupportedChain>> | (Optional) A partial map of chainIds to rpc urls to use for certain chains If not provided, will default to the rpcUrls of the chain objects for the supported chains | | [dAppMeta?](./react.thirdwebproviderprops.dappmeta.md) | | [DAppMetaData](./react.dappmetadata.md) | (Optional) Metadata to pass to wallet connect and walletlink wallet connect. (Used to show \*which\* dApp is being connected to in mobile wallets that support it) Defaults to just the name being passed as thirdweb powered dApp. | diff --git a/docs/react.thirdwebsdkproviderprops.md b/docs/react.thirdwebsdkproviderprops.md index 90514a9..20a072e 100644 --- a/docs/react.thirdwebsdkproviderprops.md +++ b/docs/react.thirdwebsdkproviderprops.md @@ -9,7 +9,7 @@ ```typescript export interface ThirdwebSDKProviderProps extends Omit ``` -Extends: Omit<[ThirdwebSDKProviderWagmiWrapper](./react.thirdwebsdkproviderwagmiwrapper.md) +Extends: Omit<[ThirdwebSDKProviderWagmiWrapper](./react.thirdwebsdkproviderwagmiwrapper.md), "queryClient"> ## Properties diff --git a/docs/react.thirdwebsdkproviderwagmiwrapper.md b/docs/react.thirdwebsdkproviderwagmiwrapper.md index 137c4e6..d574401 100644 --- a/docs/react.thirdwebsdkproviderwagmiwrapper.md +++ b/docs/react.thirdwebsdkproviderwagmiwrapper.md @@ -9,7 +9,7 @@ ```typescript export interface ThirdwebSDKProviderWagmiWrapper extends Pick ``` -Extends: Pick<[ThirdwebProviderProps](./react.thirdwebproviderprops.md) +Extends: Pick<[ThirdwebProviderProps](./react.thirdwebproviderprops.md), "desiredChainId" \| "sdkOptions" \| "storageInterface"> ## Properties diff --git a/docs/react.uselogin.md b/docs/react.uselogin.md index e53526e..f7aaee6 100644 --- a/docs/react.uselogin.md +++ b/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. Signature: diff --git a/docs/react.uselogout.md b/docs/react.uselogout.md index 2107aa8..38ea3da 100644 --- a/docs/react.uselogout.md +++ 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. Signature: diff --git a/docs/react.useuser.md b/docs/react.useuser.md index 0aef5b8..a7c4370 100644 --- a/docs/react.useuser.md +++ 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. Signature: diff --git a/etc/react.api.md b/etc/react.api.md index 5aabb3a..de96135 100644 --- a/etc/react.api.md +++ b/etc/react.api.md @@ -281,13 +281,6 @@ export interface SharedMediaProps { width?: HTMLIFrameElement["width"]; } -// @public (undocumented) -export interface ThirdwebAuthConfig { - authUrl: string; - domain: string; - loginRedirect?: string; -} - // @beta (undocumented) export const ThirdwebNftMedia: React_2.ForwardRefExoticComponent>; @@ -301,6 +294,8 @@ export const ThirdwebProvider: { + // Warning: (ae-forgotten-export) The symbol "ThirdwebAuthConfig" needs to be exported by the entry point index.d.ts + // // @beta authConfig?: ThirdwebAuthConfig; autoConnect?: boolean; @@ -1442,10 +1437,10 @@ export function useListing(contract: RequiredParam, listingId: Requ // @beta export function useListings(contract: RequiredParam, filter?: MarketplaceFilter): UseQueryResult<(AuctionListing | DirectListing)[], unknown>; -// @public +// @beta export function useLogin(config?: LoginConfig): (cfg?: LoginOptions) => Promise; -// @public +// @beta export function useLogout(): () => void; // @public @@ -1740,7 +1735,7 @@ seller_fee_basis_points?: number | undefined; fee_recipient?: string | undefined; }, unknown>; -// @public +// @beta export function useUser(): { user: ThirdwebAuthUser | undefined; isLoading: boolean; @@ -1792,8 +1787,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 diff --git a/src/Provider.tsx b/src/Provider.tsx index aa7c2b2..2051426 100644 --- a/src/Provider.tsx +++ b/src/Provider.tsx @@ -9,6 +9,7 @@ import { defaultSupportedChains, } from "./constants/chain"; import { + ThirdwebAuthConfig, ThirdwebConfigProvider, defaultChainRpc, } from "./contexts/thirdweb-config"; @@ -99,26 +100,6 @@ export type ChainRpc = 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 diff --git a/src/contexts/thirdweb-config.tsx b/src/contexts/thirdweb-config.tsx index a280e24..4bb56a6 100644 --- a/src/contexts/thirdweb-config.tsx +++ b/src/contexts/thirdweb-config.tsx @@ -1,4 +1,3 @@ -import { ThirdwebAuthConfig } from "../Provider"; import { Chain, SupportedChainId, @@ -7,6 +6,25 @@ import { import { ChainId } from "@thirdweb-dev/sdk/dist/browser"; import React, { PropsWithChildren, createContext, useContext } from "react"; +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; +} + interface ThirdwebConfigContext { rpcUrlMap: Record; supportedChains: Chain[]; diff --git a/src/hooks/auth/useLogin.ts b/src/hooks/auth/useLogin.ts index 88cd6a4..7304127 100644 --- a/src/hooks/auth/useLogin.ts +++ b/src/hooks/auth/useLogin.ts @@ -24,7 +24,7 @@ export interface LoginConfig { * @param config - Configuration for the login. * @returns - A function to invoke to login with the connected wallet. * - * @public + * @beta */ export function useLogin(config?: LoginConfig) { const sdk = useSDK(); @@ -50,7 +50,9 @@ export function useLogin(config?: LoginConfig) { const encodedPayload = encodeURIComponent(btoa(JSON.stringify(payload))); const encodedRedirectTo = encodeURIComponent( - config?.redirectTo || authConfig.loginRedirect || window.location.href, + config?.redirectTo || + authConfig.loginRedirect || + window.location.toString(), ); queryClient.invalidateQueries(cacheKeys.auth.user()); diff --git a/src/hooks/auth/useLogout.ts b/src/hooks/auth/useLogout.ts index 69af49c..6ae1da2 100644 --- a/src/hooks/auth/useLogout.ts +++ b/src/hooks/auth/useLogout.ts @@ -9,7 +9,7 @@ import invariant from "tiny-invariant"; * * @returns - A function to invoke to logout. * - * @public + * @beta */ export function useLogout() { const queryClient = useQueryClient(); diff --git a/src/hooks/auth/useUser.ts b/src/hooks/auth/useUser.ts index 0bd4b7f..febc994 100644 --- a/src/hooks/auth/useUser.ts +++ b/src/hooks/auth/useUser.ts @@ -12,7 +12,7 @@ interface ThirdwebAuthUser { * * @returns - The currently logged in user or null if not logged in, as well as a loading state. * - * @public + * @beta */ export function useUser() { const { authConfig } = useThirdwebConfigContext(); From a4ca4807ce6bbd1c50df37c553bf1fd03a961ed8 Mon Sep 17 00:00:00 2001 From: Jonas Daniels Date: Tue, 16 Aug 2022 17:41:31 -0700 Subject: [PATCH 2/3] enable auth usage with raw provider --- docs/react.thirdwebsdkproviderwagmiwrapper.md | 4 +- etc/react.api.md | 2 +- src/Provider.tsx | 28 +++++------ src/contexts/thirdweb-auth.tsx | 49 +++++++++++++++++++ src/contexts/thirdweb-config.tsx | 22 +-------- src/hooks/auth/useLogin.ts | 4 +- src/hooks/auth/useLogout.ts | 4 +- src/hooks/auth/useUser.ts | 4 +- 8 files changed, 72 insertions(+), 45 deletions(-) create mode 100644 src/contexts/thirdweb-auth.tsx diff --git a/docs/react.thirdwebsdkproviderwagmiwrapper.md b/docs/react.thirdwebsdkproviderwagmiwrapper.md index d574401..5e56590 100644 --- a/docs/react.thirdwebsdkproviderwagmiwrapper.md +++ b/docs/react.thirdwebsdkproviderwagmiwrapper.md @@ -7,9 +7,9 @@ Signature: ```typescript -export interface ThirdwebSDKProviderWagmiWrapper extends Pick +export interface ThirdwebSDKProviderWagmiWrapper extends Pick ``` -Extends: Pick<[ThirdwebProviderProps](./react.thirdwebproviderprops.md), "desiredChainId" \| "sdkOptions" \| "storageInterface"> +Extends: Pick<[ThirdwebProviderProps](./react.thirdwebproviderprops.md), "desiredChainId" \| "sdkOptions" \| "storageInterface" \| "authConfig"> ## Properties diff --git a/etc/react.api.md b/etc/react.api.md index de96135..768ee7b 100644 --- a/etc/react.api.md +++ b/etc/react.api.md @@ -322,7 +322,7 @@ export interface ThirdwebSDKProviderProps extends Omit { +export interface ThirdwebSDKProviderWagmiWrapper extends Pick { // (undocumented) provider: ChainOrRpc | SignerOrProvider; // (undocumented) diff --git a/src/Provider.tsx b/src/Provider.tsx index 2051426..27daae1 100644 --- a/src/Provider.tsx +++ b/src/Provider.tsx @@ -10,6 +10,9 @@ import { } from "./constants/chain"; import { ThirdwebAuthConfig, + ThirdwebAuthConfigProvider, +} from "./contexts/thirdweb-auth"; +import { ThirdwebConfigProvider, defaultChainRpc, } from "./contexts/thirdweb-config"; @@ -267,14 +270,6 @@ export const ThirdwebProvider = < }, {} as Record); }, [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, @@ -424,7 +419,6 @@ export const ThirdwebProvider = < value={{ rpcUrlMap: _rpcUrlMap, supportedChains: _supporrtedChains, - authConfig: _authConfig, }} > @@ -433,6 +427,7 @@ export const ThirdwebProvider = < desiredChainId={desiredChainId} sdkOptions={sdkOptionsWithDefaults} storageInterface={storageInterface} + authConfig={authConfig} > {children} @@ -444,7 +439,7 @@ export const ThirdwebProvider = < export interface ThirdwebSDKProviderWagmiWrapper extends Pick< ThirdwebProviderProps, - "desiredChainId" | "sdkOptions" | "storageInterface" + "desiredChainId" | "sdkOptions" | "storageInterface" | "authConfig" > { signer?: Signer; provider: ChainOrRpc | SignerOrProvider; @@ -496,6 +491,7 @@ export const ThirdwebSDKProvider: React.FC< provider, signer, queryClient, + authConfig, children, }) => { const queryClientWithDefault: QueryClient = useMemo(() => { @@ -527,11 +523,13 @@ export const ThirdwebSDKProvider: React.FC< ); return ( - - - {children} - - + + + + {children} + + + ); }; diff --git a/src/contexts/thirdweb-auth.tsx b/src/contexts/thirdweb-auth.tsx new file mode 100644 index 0000000..124e6cb --- /dev/null +++ b/src/contexts/thirdweb-auth.tsx @@ -0,0 +1,49 @@ +import { PropsWithChildren, createContext, useContext, useMemo } from "react"; + +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( + 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 ( + + {children} + + ); +}; + +export function useThirdwebAuthConfig() { + return useContext(ThirdwebAuthConfigContext); +} diff --git a/src/contexts/thirdweb-config.tsx b/src/contexts/thirdweb-config.tsx index 4bb56a6..d20389b 100644 --- a/src/contexts/thirdweb-config.tsx +++ b/src/contexts/thirdweb-config.tsx @@ -6,29 +6,9 @@ import { import { ChainId } from "@thirdweb-dev/sdk/dist/browser"; import React, { PropsWithChildren, createContext, useContext } from "react"; -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; -} - interface ThirdwebConfigContext { rpcUrlMap: Record; supportedChains: Chain[]; - authConfig?: ThirdwebAuthConfig; } export const defaultChainRpc: Record = { @@ -41,7 +21,7 @@ export const defaultChainRpc: Record = { [ChainId.Avalanche]: "avalanche", }; -export const ThirdwebConfigContext = createContext({ +const ThirdwebConfigContext = createContext({ rpcUrlMap: defaultChainRpc, supportedChains: defaultSupportedChains, }); diff --git a/src/hooks/auth/useLogin.ts b/src/hooks/auth/useLogin.ts index 7304127..c9b7e6b 100644 --- a/src/hooks/auth/useLogin.ts +++ b/src/hooks/auth/useLogin.ts @@ -1,5 +1,5 @@ import { useSDK } from "../../Provider"; -import { useThirdwebConfigContext } from "../../contexts/thirdweb-config"; +import { useThirdwebAuthConfig } from "../../contexts/thirdweb-auth"; import { cacheKeys } from "../../utils/cache-keys"; import { useQueryClient } from "@tanstack/react-query"; import { LoginOptions } from "@thirdweb-dev/sdk/dist/src/schema"; @@ -29,7 +29,7 @@ export interface LoginConfig { export function useLogin(config?: LoginConfig) { const sdk = useSDK(); const queryClient = useQueryClient(); - const { authConfig } = useThirdwebConfigContext(); + const authConfig = useThirdwebAuthConfig(); React.useEffect(() => { const queryParams = new URLSearchParams(window.location.search); diff --git a/src/hooks/auth/useLogout.ts b/src/hooks/auth/useLogout.ts index 6ae1da2..980df11 100644 --- a/src/hooks/auth/useLogout.ts +++ b/src/hooks/auth/useLogout.ts @@ -1,4 +1,4 @@ -import { useThirdwebConfigContext } from "../../contexts/thirdweb-config"; +import { useThirdwebAuthConfig } from "../../contexts/thirdweb-auth"; import { cacheKeys } from "../../utils/cache-keys"; import { useQueryClient } from "@tanstack/react-query"; import invariant from "tiny-invariant"; @@ -13,7 +13,7 @@ import invariant from "tiny-invariant"; */ export function useLogout() { const queryClient = useQueryClient(); - const { authConfig } = useThirdwebConfigContext(); + const authConfig = useThirdwebAuthConfig(); function logout() { invariant( diff --git a/src/hooks/auth/useUser.ts b/src/hooks/auth/useUser.ts index febc994..7611ba2 100644 --- a/src/hooks/auth/useUser.ts +++ b/src/hooks/auth/useUser.ts @@ -1,4 +1,4 @@ -import { useThirdwebConfigContext } from "../../contexts/thirdweb-config"; +import { useThirdwebAuthConfig } from "../../contexts/thirdweb-auth"; import { cacheKeys } from "../../utils/cache-keys"; import { useQuery } from "@tanstack/react-query"; import invariant from "tiny-invariant"; @@ -15,7 +15,7 @@ interface ThirdwebAuthUser { * @beta */ export function useUser() { - const { authConfig } = useThirdwebConfigContext(); + const authConfig = useThirdwebAuthConfig(); const { data: user, isLoading } = useQuery( cacheKeys.auth.user(), From 615d4184c11b51430fc37dc94eb472b6dd957499 Mon Sep 17 00:00:00 2001 From: Jonas Daniels Date: Tue, 16 Aug 2022 18:17:08 -0700 Subject: [PATCH 3/3] cleanup exports --- docs/react.md | 1 + docs/react.thirdwebauthconfig.authurl.md | 16 ++++++++++++ docs/react.thirdwebauthconfig.domain.md | 16 ++++++++++++ .../react.thirdwebauthconfig.loginredirect.md | 16 ++++++++++++ docs/react.thirdwebauthconfig.md | 25 +++++++++++++++++++ docs/react.thirdwebproviderprops.md | 2 +- etc/react.api.md | 9 +++++-- src/contexts/thirdweb-auth.tsx | 7 +++++- src/index.ts | 1 + 9 files changed, 89 insertions(+), 4 deletions(-) create mode 100644 docs/react.thirdwebauthconfig.authurl.md create mode 100644 docs/react.thirdwebauthconfig.domain.md create mode 100644 docs/react.thirdwebauthconfig.loginredirect.md create mode 100644 docs/react.thirdwebauthconfig.md diff --git a/docs/react.md b/docs/react.md index 2b16867..15b729e 100644 --- a/docs/react.md +++ b/docs/react.md @@ -140,6 +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) | (BETA) 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) | | diff --git a/docs/react.thirdwebauthconfig.authurl.md b/docs/react.thirdwebauthconfig.authurl.md new file mode 100644 index 0000000..c936d23 --- /dev/null +++ b/docs/react.thirdwebauthconfig.authurl.md @@ -0,0 +1,16 @@ + + +[Home](./index.md) > [@thirdweb-dev/react](./react.md) > [ThirdwebAuthConfig](./react.thirdwebauthconfig.md) > [authUrl](./react.thirdwebauthconfig.authurl.md) + +## ThirdwebAuthConfig.authUrl 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 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`. + +Signature: + +```typescript +authUrl: string; +``` diff --git a/docs/react.thirdwebauthconfig.domain.md b/docs/react.thirdwebauthconfig.domain.md new file mode 100644 index 0000000..caa83a4 --- /dev/null +++ b/docs/react.thirdwebauthconfig.domain.md @@ -0,0 +1,16 @@ + + +[Home](./index.md) > [@thirdweb-dev/react](./react.md) > [ThirdwebAuthConfig](./react.thirdwebauthconfig.md) > [domain](./react.thirdwebauthconfig.domain.md) + +## 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. + +Signature: + +```typescript +domain: string; +``` diff --git a/docs/react.thirdwebauthconfig.loginredirect.md b/docs/react.thirdwebauthconfig.loginredirect.md new file mode 100644 index 0000000..605267a --- /dev/null +++ b/docs/react.thirdwebauthconfig.loginredirect.md @@ -0,0 +1,16 @@ + + +[Home](./index.md) > [@thirdweb-dev/react](./react.md) > [ThirdwebAuthConfig](./react.thirdwebauthconfig.md) > [loginRedirect](./react.thirdwebauthconfig.loginredirect.md) + +## 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. + +Signature: + +```typescript +loginRedirect?: string; +``` diff --git a/docs/react.thirdwebauthconfig.md b/docs/react.thirdwebauthconfig.md new file mode 100644 index 0000000..0972b70 --- /dev/null +++ b/docs/react.thirdwebauthconfig.md @@ -0,0 +1,25 @@ + + +[Home](./index.md) > [@thirdweb-dev/react](./react.md) > [ThirdwebAuthConfig](./react.thirdwebauthconfig.md) + +## 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. + +Signature: + +```typescript +export interface ThirdwebAuthConfig +``` + +## Properties + +| Property | Modifiers | Type | Description | +| --- | --- | --- | --- | +| [authUrl](./react.thirdwebauthconfig.authurl.md) | | string | (BETA) 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 | (BETA) 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 | (BETA) (Optional) The URL to redirect to after a succesful login. | + diff --git a/docs/react.thirdwebproviderprops.md b/docs/react.thirdwebproviderprops.md index 0027a56..78223e4 100644 --- a/docs/react.thirdwebproviderprops.md +++ b/docs/react.thirdwebproviderprops.md @@ -16,7 +16,7 @@ export interface ThirdwebProviderProps(BETA) (Optional) The configuration used for thirdweb auth usage. Enables users to login to backends with their wallet. | +| [authConfig?](./react.thirdwebproviderprops.authconfig.md) | | [ThirdwebAuthConfig](./react.thirdwebauthconfig.md) | (BETA) (Optional) The configuration used for thirdweb auth usage. Enables users to login to backends with their wallet. | | [autoConnect?](./react.thirdwebproviderprops.autoconnect.md) | | boolean | (Optional) Whether or not to attempt auto-connect to a wallet. | | [chainRpc?](./react.thirdwebproviderprops.chainrpc.md) | | Partial<ChainRpc<TSupportedChain>> | (Optional) A partial map of chainIds to rpc urls to use for certain chains If not provided, will default to the rpcUrls of the chain objects for the supported chains | | [dAppMeta?](./react.thirdwebproviderprops.dappmeta.md) | | [DAppMetaData](./react.dappmetadata.md) | (Optional) Metadata to pass to wallet connect and walletlink wallet connect. (Used to show \*which\* dApp is being connected to in mobile wallets that support it) Defaults to just the name being passed as thirdweb powered dApp. | diff --git a/etc/react.api.md b/etc/react.api.md index 768ee7b..2b3f283 100644 --- a/etc/react.api.md +++ b/etc/react.api.md @@ -281,6 +281,13 @@ export interface SharedMediaProps { width?: HTMLIFrameElement["width"]; } +// @beta +export interface ThirdwebAuthConfig { + authUrl: string; + domain: string; + loginRedirect?: string; +} + // @beta (undocumented) export const ThirdwebNftMedia: React_2.ForwardRefExoticComponent>; @@ -294,8 +301,6 @@ export const ThirdwebProvider: { - // Warning: (ae-forgotten-export) The symbol "ThirdwebAuthConfig" needs to be exported by the entry point index.d.ts - // // @beta authConfig?: ThirdwebAuthConfig; autoConnect?: boolean; diff --git a/src/contexts/thirdweb-auth.tsx b/src/contexts/thirdweb-auth.tsx index 124e6cb..b3944b7 100644 --- a/src/contexts/thirdweb-auth.tsx +++ b/src/contexts/thirdweb-auth.tsx @@ -1,9 +1,14 @@ 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". + * at `/api/auth/login`, `/api/auth/logout`, etc. then this should be set to `/api/auth`. */ authUrl: string; diff --git a/src/index.ts b/src/index.ts index 7455185..9668e80 100644 --- a/src/index.ts +++ b/src/index.ts @@ -36,3 +36,4 @@ export * from "./hooks/async/roles"; // types export * from "./types"; +export type { ThirdwebAuthConfig } from "./contexts/thirdweb-auth";