feat(react): add UI components to v5

Author: dphilipson

docs-site

@@ -1083,6 +1083,8 @@ navigation:
             contents:
               - section: Functions
                 contents:
+                  - page: addPasskey
+                    path: wallets/pages/reference/alchemy/wagmi-core/functions/addPasskey.mdx
                   - page: createConfig
                     path: wallets/pages/reference/alchemy/wagmi-core/functions/createConfig.mdx
                   - page: getAuthClient
@@ -1097,6 +1099,8 @@ navigation:
                     path: wallets/pages/reference/alchemy/wagmi-core/functions/listAuthMethods.mdx
                   - page: loginWithOauth
                     path: wallets/pages/reference/alchemy/wagmi-core/functions/loginWithOauth.mdx
+                  - page: loginWithPasskey
+                    path: wallets/pages/reference/alchemy/wagmi-core/functions/loginWithPasskey.mdx
                   - page: prepareCalls
                     path: wallets/pages/reference/alchemy/wagmi-core/functions/prepareCalls.mdx
                   - page: prepareSwap

docs/docs.yml

@@ -0,0 +1,72 @@
+---
+# This file is autogenerated
+title: AlchemyUiProvider
+description: Overview of the AlchemyUiProvider method
+slug: wallets/reference/alchemy/react/components/AlchemyUiProvider
+---
+
+Provider for for Alchemy UI components. `AuthCard` and `AuthModal` can only be rendered within this provider.
+
+## Import
+
+```ts
+import { AlchemyUiProvider } from "@alchemy/react";
+```
+
+## Usage
+
+```tsx
+import { AlchemyUiProvider, createConfig } from "@account-kit/react";
+import { sepolia } from "@account-kit/infra";
+import { QueryClient } from "@tanstack/react-query";
+import { wagmiConfig } from "./wagmiConfig";
+
+const ui: AlchemyAccountsUIConfig = {
+  illustrationStyle: "linear",
+  auth: {
+    sections: [
+      [{ type: "email" }],
+      [{ type: "social", authProviderId: "google", mode: "popup" }],
+    ],
+  },
+};
+
+const queryClient = new QueryClient();
+
+function App({ children }: React.PropsWithChildren) {
+  return (
+    <WagmiProvider config={wagmiConfig}>
+      <AlchemyAccountProvider queryClient={queryClient} ui={ui}>
+        {children}
+      </AlchemyAccountProvider>
+    </WagmiProvider>
+  );
+}
+```
+
+## Parameters
+
+### props
+
+`React.PropsWithChildren<AlchemyUiProviderProps>`
+alchemy accounts provider props
+
+### props.queryClient
+
+`QueryClient`
+the react-query query client to use
+
+### props.ui
+
+`AlchemyAccountsUIConfig`
+ui configuration to use
+
+### props.children
+
+`React.ReactNode | undefined`
+react components that should have this accounts context
+
+## Returns
+
+`React.JSX.Element`
+The element to wrap your application in for Alchemy UI context.

docs/pages/reference/alchemy/react/components/AlchemyUiProvider.mdx

@@ -0,0 +1,41 @@
+---
+# This file is autogenerated
+title: AuthCard
+description: Overview of the AuthCard method
+slug: wallets/reference/alchemy/react/components/AuthCard
+---
+
+React component containing an Auth view with configured auth methods
+and options based on the config passed to the AlchemyAccountProvider
+
+## Import
+
+```ts
+import { AuthCard } from "@alchemy/react";
+```
+
+## Usage
+
+```tsx
+import { AuthCard, useAlchemyAccountContext } from "@account-kit/react";
+
+function ComponentWithAuthCard() {
+  // assumes you've passed in a UI config to the Account Provider
+  // you can also directly set the properties on the AuthCard component
+  const { uiConfig } = useAlchemyAccountContext();
+
+  return <AuthCard {...uiConfig!.auth} />;
+}
+```
+
+## Parameters
+
+### props
+
+`AuthCardProps`
+Card Props
+
+## Returns
+
+`JSX.Element`
+a react component containing the AuthCard

docs/pages/reference/alchemy/react/components/AuthCard.mdx

@@ -0,0 +1,19 @@
+---
+# This file is autogenerated
+title: AuthModal
+description: Overview of the AuthModal method
+slug: wallets/reference/alchemy/react/components/AuthModal
+---
+
+Renders the Auth Modal component. Must be rendered within an `AlchemyUiProvider`. To customize this modal, use the `ui` prop of the `AlchemyUiProvider`.
+
+## Import
+
+```ts
+import { AuthModal } from "@alchemy/react";
+```
+
+## Returns
+
+`React.JSX.Element`
+The rendered Auth Modal component.

docs/pages/reference/alchemy/react/components/AuthModal.mdx

@@ -0,0 +1,39 @@
+---
+# This file is autogenerated
+title: useAddPasskey
+description: Overview of the useAddPasskey method
+slug: wallets/reference/alchemy/react/hooks/useAddPasskey
+---
+
+React hook for adding a passkey to an already authenticated account.
+
+This hook uses the `addPasskey` mutation to add a passkey to the authenticated account.
+
+## Import
+
+```ts
+import { useAddPasskey } from "@alchemy/react";
+```
+
+## Usage
+
+```tsx twoslash
+import { useAddPasskey } from "@alchemy/react";
+
+function AddPasskeyForm() {
+  const { addPasskey, isPending } = useAddPasskey();
+}
+```
+
+## Parameters
+
+### parameters
+
+`UseAddPasskeyParameters`
+
+- Configuration options for the hook
+
+## Returns
+
+`UseAddPasskeyReturnType`
+TanStack Query mutation object

docs/pages/reference/alchemy/react/hooks/useAddPasskey.mdx

@@ -0,0 +1,37 @@
+---
+# This file is autogenerated
+title: useAuthModal
+description: Overview of the useAuthModal method
+slug: wallets/reference/alchemy/react/hooks/useAuthModal
+---
+
+A [hook](https://github.com/alchemyplatform/aa-sdk/blob/main/account-kit/react/src/hooks/useAuthModal.ts) that returns the open and close functions for the Auth Modal if uiConfig
+is enabled on the Account Provider
+
+## Import
+
+```ts
+import { useAuthModal } from "@alchemy/react";
+```
+
+## Usage
+
+```tsx twoslash
+import React from "react";
+import { useAuthModal } from "@account-kit/react";
+
+const ComponentWithAuthModal = () => {
+  const { openAuthModal } = useAuthModal();
+
+  return (
+    <div>
+      <button onClick={openAuthModal}>Login</button>
+    </div>
+  );
+};
+```
+
+## Returns
+
+`UseAuthModalResult`
+an object containing methods for opening or closing the auth modal. [ref](https://github.com/alchemyplatform/aa-sdk/blob/main/account-kit/react/src/hooks/useAuthModal.ts#L4)

docs/pages/reference/alchemy/react/hooks/useAuthModal.mdx

@@ -0,0 +1,81 @@
+---
+# This file is autogenerated
+title: useLoginWithPasskey
+description: Overview of the useLoginWithPasskey method
+slug: wallets/reference/alchemy/react/hooks/useLoginWithPasskey
+---
+
+React hook for Passkey authentication - initiates authentication flow with the specified options.
+
+This hook wraps the `loginWithPasskey` action with React Query mutation functionality,
+providing loading states, error handling, and mutation management for the OAuth authentication flow.
+
+## Import
+
+```ts
+import { useLoginWithPasskey } from "@alchemy/react";
+```
+
+## Usage
+
+```tsx twoslash
+import { useLoginWithPasskey } from "@alchemy/react";
+
+function LoginForm() {
+  const { loginWithPasskey, isPending, error } = useLoginWithPasskey();
+
+  const handleGoogleLogin = () => {
+    loginWithPasskey({
+      provider: "google",
+      mode: "popup", // or 'redirect'
+    });
+  };
+
+  return (
+    <button onClick={handleGoogleLogin} disabled={isPending}>
+      {isPending ? "Logging in..." : "Login with Google"}
+    </button>
+  );
+}
+```
+
+## Parameters
+
+### parameters
+
+`UseLoginWithPasskeyParameters`
+
+- Configuration options for the hook
+
+### parameters.config
+
+`Config`
+
+- Optional wagmi config override
+
+### parameters.mutation
+
+`UseMutationParameters`
+
+- Optional React Query mutation configuration
+
+## Returns
+
+`UseLoginWithPasskeyReturnType`
+TanStack Query mutation object with the following properties:
+
+- `loginWithPasskey`: `(variables: LoginWithPasskeyParameters, options?) => void` - Mutation function to initiate OAuth login
+- `loginWithPasskeyAsync`: `(variables: LoginWithPasskeyParameters, options?) => Promise<LoginWithPasskeyReturnType>` - Async mutation function that returns a promise
+- `data`: `LoginWithPasskeyReturnType | undefined` - The last successfully resolved data (void)
+- `error`: `Error | null` - The error object for the mutation, if an error was encountered
+- `isError`: `boolean` - True if the mutation is in an error state
+- `isIdle`: `boolean` - True if the mutation is in its initial idle state
+- `isPending`: `boolean` - True if the mutation is currently executing
+- `isSuccess`: `boolean` - True if the last mutation attempt was successful
+- `failureCount`: `number` - The failure count for the mutation
+- `failureReason`: `Error | null` - The failure reason for the mutation retry
+- `isPaused`: `boolean` - True if the mutation has been paused
+- `reset`: `() => void` - Function to reset the mutation to its initial state
+- `status`: `'idle' | 'pending' | 'error' | 'success'` - Current status of the mutation
+- `submittedAt`: `number` - Timestamp for when the mutation was submitted
+- `variables`: `LoginWithPasskeyParameters | undefined` - The variables object passed to the mutation

docs/pages/reference/alchemy/react/hooks/useLoginWithPasskey.mdx

@@ -0,0 +1,33 @@
+---
+# This file is autogenerated
+title: addPasskey
+description: Overview of the addPasskey method
+slug: wallets/reference/alchemy/wagmi-core/functions/addPasskey
+---
+
+Adds a passkey to the authenticated user's account.
+
+## Import
+
+```ts
+import { addPasskey } from "@alchemy/wagmi-core";
+```
+
+## Parameters
+
+### config
+
+`Config`
+
+- The shared Wagmi/Alchemy config
+
+### parameters
+
+`AddPasskeyParameters`
+
+- The parameters for the passkey creation
+
+## Returns
+
+`Promise<AddPasskeyReturnType>`
+Promise that resolves when the passkey is added

docs/pages/reference/alchemy/wagmi-core/functions/addPasskey.mdx

@@ -0,0 +1,33 @@
+---
+# This file is autogenerated
+title: loginWithPasskey
+description: Overview of the loginWithPasskey method
+slug: wallets/reference/alchemy/wagmi-core/functions/loginWithPasskey
+---
+
+Initiates Passkey authentication flow with the specified parameters.
+
+## Import
+
+```ts
+import { loginWithPasskey } from "@alchemy/wagmi-core";
+```
+
+## Parameters
+
+### config
+
+`Config`
+
+- The shared Wagmi/Alchemy config
+
+### parameters
+
+`LoginWithPasskeyParameters`
+
+- Passkey authentication parameters
+
+## Returns
+
+`Promise<LoginWithPasskeyReturnType>`
+Promise that resolves when authentication completes and connection is established