Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions .claude/commands/docs-reviewer.md
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
---
description: Alchemy Documentation Reviewer
argument-hint: [file1.mdx] [file2.mdx] [...]
argument-hint: [file1.mdx] [file2.mdx] [...] OR [docs/pages/directory/]
---

# Alchemy Smart Wallets Documentation Reviewer

You are an AI assistant that automatically fixes documentation for Alchemy's Smart Wallets product. You systematically apply fixes to MDX files within the `/docs` directory to ensure compliance with contribution guidelines defined in [docs/CONTRIBUTING.md](/docs/CONTRIBUTING.md)
You are an AI assistant that automatically fixes documentation for Alchemy's Smart Wallets product. You systematically apply fixes to MDX files within the `/docs` directory to ensure compliance with contribution guidelines defined in [docs/CONTRIBUTING.md](/docs/CONTRIBUTING.md). Spend as much time as needed to ensure all fixes are applied for every file processed.
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Richard-Dang Im assuming these changes are intentional but want you to confirm

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't recall adding this but I assume someone else did. Should be fine to leave it

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do you think the AI bot itself added these lol? idt the instturction of take as much time as you need is great


**⚠️ CRITICAL**: Do not modify existing code snippets beyond formatting (indentation, language tags). Code changes can break functionality.

Expand Down Expand Up @@ -43,5 +43,6 @@ You are an AI assistant that automatically fixes documentation for Alchemy's Sma
- `/docs-reviewer` - Process all changed MDX files in current branch
- `/docs-reviewer docs/pages/core/quickstart.mdx` - Process single file
- `/docs-reviewer docs/pages/core/quickstart.mdx docs/pages/react/overview.mdx` - Process multiple files
- `/docs-reviewer docs/pages/authentication/` - Process all nested MDX files within the specified directory

**Note**: When processing specific files via arguments, they will be reviewed regardless of git status. When no arguments are provided, only changed files in the current branch are processed.
Original file line number Diff line number Diff line change
Expand Up @@ -67,12 +67,12 @@ Your JWTs must contain these claims:
**Important**: The `nonce` claim must be `toHex(sha256(targetPublicKey))` **without** the leading `0x`.

<Note>
You can generate the `targetPublicKey` from the [Alchemy Signer
Generate the `targetPublicKey` from the [Alchemy Signer
SDK](/wallets/reference/account-kit/signer/classes/AlchemySignerWebClient/targetPublicKey)
</Note>

<Tip>
If your OAuth provider reserves the `nonce` claim, you can use `tknonce` as an
If your OAuth provider reserves the `nonce` claim, use `tknonce` as an
alternative. Only one of `nonce` or `tknonce` needs to be set.
</Tip>

Expand All @@ -83,7 +83,7 @@ Your JWTs must contain these claims:

### 4. Audience Claim

The `aud` claim must be set to your Alchemy-provided audience ID. You can obtain the audience claim from your Smart Wallet configuration in the [Alchemy Dashboard](https://dashboard.alchemy.com/accounts/config/create).
Set the `aud` claim to your Alchemy-provided audience ID. Obtain the audience claim from your Smart Wallet configuration in the [Alchemy Dashboard](https://dashboard.alchemy.com/accounts/config/create).

<img src="/images/wallets/bring-your-own-auth.png" alt="Audience Claim" />

Expand Down Expand Up @@ -276,10 +276,10 @@ Use [jwt.io](https://jwt.io/) to decode and validate your JWT structure before i

## Next Steps

### Sending a User Operation
### Sending Transactions
Comment thread
avarobinson marked this conversation as resolved.

Once your users have been authenticated, you can start [sending transactions](/wallets/transactions/send-transactions).
Once your users authenticate, start [sending transactions](/wallets/transactions/send/send-user-operations).

### Sponsor Gas for a User Operation
### Sponsor Gas for Transactions
Comment thread
avarobinson marked this conversation as resolved.

Start [sponsoring gas fees](/wallets/transactions/sponsor-gas) for transactions via the Gas Manager.
[Sponsor gas fees](/wallets/transactions/sponsor-gas/sponsor-gas) for transactions via the Gas Manager.
18 changes: 9 additions & 9 deletions docs/pages/authentication/login-methods/email-magic-link.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,8 @@ Email magic link authentication is a two-step process:
2. The user clicks the link in their email, which redirects them back to your application to complete authentication

<Tip>
Email OTP has been shown to have up to a 3x higher conversion rate and a
10-second faster flow compared to magic links. Consider using [Email
Email OTP has up to a 3x higher conversion rate and a 10-second faster flow
compared to magic links. Use [Email
OTP](/wallets/authentication/login-methods/email-otp) for better user
experience.
</Tip>
Expand All @@ -20,7 +20,7 @@ Email magic link authentication is a two-step process:
<Tab title="React">
## Implementation Options

You can implement Email Magic Link authentication in two ways:
Implement Email Magic Link authentication in two ways:

- [Pre-built UI Components](#pre-built-ui-components) - Quick implementation with minimal code
- [Custom UI](#custom-ui) - Complete control over the user experience
Expand All @@ -41,7 +41,7 @@ Email magic link authentication is a two-step process:

### Step 2: Configure Email Magic Link in UI Components

After adding the components, configure the Email Magic Link authentication in your application config:
After adding the components, configure Email Magic Link authentication in your application config:

```tsx twoslash
import { AlchemyAccountsUIConfig, createConfig } from "@account-kit/react";
Expand Down Expand Up @@ -75,7 +75,7 @@ Email magic link authentication is a two-step process:

## Custom UI

If you need complete control over the user experience, you can implement your own custom UI for Email Magic Link authentication using Smart Wallets hooks.
If you need complete control over the user experience, implement your own custom UI for Email Magic Link authentication using Smart Wallets hooks.

### Step 1: Send the Magic Link

Expand Down Expand Up @@ -110,7 +110,7 @@ Email magic link authentication is a two-step process:

### Step 2: Handle the Redirect

When the user clicks the magic link in their email, they'll be redirected back to your application. You need to extract the authentication bundle from the URL and complete the authentication:
When the user clicks the magic link in their email, they're redirected back to your application. Extract the authentication bundle from the URL and complete the authentication:

```tsx twoslash
import { useEffect } from "react";
Expand Down Expand Up @@ -195,7 +195,7 @@ Email magic link authentication is a two-step process:

### Send an Email Magic Link to a User

To send an email magic link to a user, you can use the `authenticate()` function from the `useAuthenticate()` hook with the `type` set to `email` and the `emailMode` set to `magicLink`.
To send an email magic link to a user, use the `authenticate()` function from the `useAuthenticate()` hook with the `type` set to `email` and the `emailMode` set to `magicLink`.

```tsx twoslash sign-in-with-magic-link.tsx
import { useAuthenticate } from "@account-kit/react-native";
Expand Down Expand Up @@ -256,7 +256,7 @@ Email magic link authentication is a two-step process:

### Authenticate User via Deep Link

When a user clicks on the magic link in their email, it should deep link to your app if this has been setup correctly.
When a user clicks the magic link in their email, it deep links to your app if configured correctly.

A `bundle` parameter present in the deep link url will be used to authenticate the user and save the user's session.

Expand Down Expand Up @@ -381,4 +381,4 @@ Email magic link authentication is a two-step process:

### Add Authenticator App (TOTP) Verification (Optional)

Consider enabling [Multi-Factor Authentication](/wallets/react/mfa/setup-mfa) to require users to enter a 6-digit TOTP code from their authenticator app after clicking the magic link. This extra layer of security protects user accounts if their email is compromised.
Enable [Multi-Factor Authentication](/wallets/react/mfa/setup-mfa) to require users to enter a 6-digit TOTP code from their authenticator app after clicking the magic link. This extra layer of security protects user accounts if their email is compromised.
12 changes: 6 additions & 6 deletions docs/pages/authentication/login-methods/email-otp.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ Email OTP (One-Time Password) authentication is a two-step process:
<Tab title="React">
## Overview

You can implement Email OTP authentication in two ways:
Implement Email OTP authentication in two ways:

- [Pre-built UI Components](#pre-built-ui-components) - Quick implementation with minimal code
- [Custom UI](#custom-ui) - Complete control over the user experience
Expand All @@ -34,7 +34,7 @@ Email OTP (One-Time Password) authentication is a two-step process:

### Step 2: Configure Email OTP in UI Components

After adding the components, configure the Email OTP authentication in your application config:
After adding the components, configure Email OTP authentication in your application config:

```tsx twoslash
import { AlchemyAccountsUIConfig, createConfig } from "@account-kit/react";
Expand Down Expand Up @@ -68,7 +68,7 @@ Email OTP (One-Time Password) authentication is a two-step process:

## Custom UI

If you need complete control over the user experience, you can implement your own custom UI for Email OTP authentication using Smart Wallets hooks.
If you need complete control over the user experience, implement your own custom UI for Email OTP authentication using Smart Wallets hooks.

### Step 1: Send the OTP

Expand Down Expand Up @@ -125,7 +125,7 @@ Email OTP (One-Time Password) authentication is a two-step process:

### Step 3: Verify the OTP

Once the user receives the code, they'll enter it in your application:
Once the user receives the code, they enter it in your application:

```tsx twoslash
import { useAuthenticate } from "@account-kit/react";
Expand Down Expand Up @@ -189,7 +189,7 @@ Email OTP (One-Time Password) authentication is a two-step process:

<Tip>
This is the default mode for email authentication. Only follow these steps if
you had previously set the email mode to `Magic Link`.
you previously set the email mode to Magic Link.
</Tip>

In your Alchemy Accounts Dashboard:
Expand Down Expand Up @@ -549,4 +549,4 @@ Email OTP (One-Time Password) authentication is a two-step process:

### Add Authenticator App (TOTP) Verification (Optional)

If you'd like to add a **second security step** to Email OTP, you can enable [Multi-Factor Authentication](/wallets/react/mfa/setup-mfa). This prompts users for a **6-digit TOTP code** from their authenticator app (e.g. Google Authenticator, Authy) after they verify their email.
Add a **second security step** to Email OTP by enabling [Multi-Factor Authentication](/wallets/react/mfa/setup-mfa). This prompts users for a **6-digit TOTP code** from their authenticator app (e.g. Google Authenticator, Authy) after they verify their email.
16 changes: 8 additions & 8 deletions docs/pages/authentication/login-methods/social-login.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ Social login authentication allows users to authenticate using OAuth providers l
<Tab title="React">
## Prerequisites

Before implementing social login in your application, you need to configure your Smart Wallets dashboard and application:
Before implementing social login in your application, configure your Smart Wallets dashboard and application:

1. **Follow the Setup Instructions in the Getting Started Guide**:
- See the [Getting Started with Authentication](/wallets/react/quickstart) page for complete setup instructions
Expand All @@ -26,7 +26,7 @@ Social login authentication allows users to authenticate using OAuth providers l

## Implementation Options

You can implement Social Login authentication in two ways:
Implement Social Login authentication in two ways:

- [Pre-built UI Components](#pre-built-ui-components) - Quick implementation with minimal code
- [Custom UI](#custom-ui) - Complete control over the user experience
Expand All @@ -47,7 +47,7 @@ Social login authentication allows users to authenticate using OAuth providers l

### Step 2: Configure Social Login in UI Components

After adding the components, configure the Social Login authentication in your application config:
After adding the components, configure Social Login authentication in your application config:

```tsx twoslash
import { AlchemyAccountsUIConfig, createConfig } from "@account-kit/react";
Expand Down Expand Up @@ -79,11 +79,11 @@ Social login authentication allows users to authenticate using OAuth providers l

## Custom UI

If you need complete control over the user experience, you can implement your own custom UI for Social Login authentication using Smart Wallets hooks.
If you need complete control over the user experience, implement your own custom UI for Social Login authentication using Smart Wallets hooks.

### Step 1: Configure Your Application

Before implementing social login, make sure you've:
Before implementing social login, complete these steps:

1. Set up your authentication providers in the Smart Wallets dashboard
2. If using popup flow, set `enablePopupOauth: true` in your Account Kit configuration
Expand Down Expand Up @@ -156,7 +156,7 @@ Social login authentication allows users to authenticate using OAuth providers l

## Authenticate a User via Social Auth

To authenticate a user via **social auth**, use the `authenticate()` function from the `useAuthenticate()` hook with the `type` set to `OAuth`, the `redirectUrl` set to your app's deep link, the `mode` set to `redirect` and the `authProviderId` set to the social auth provider you want to use.
To authenticate a user via **social auth**, use the `authenticate()` function from the `useAuthenticate()` hook with the `type` set to `OAuth`, the `redirectUrl` set to your app's deep link, the `mode` set to `redirect` and the `authProviderId` set to the social auth provider to use.

Here is an example, authenticating a user via Google:

Expand Down Expand Up @@ -195,7 +195,7 @@ Social login authentication allows users to authenticate using OAuth providers l
```

<Tip>
Ensure that you have added your app's scheme to your `Whitelisted Origins` in
Add your app's scheme to your Whitelisted Origins in
the [Alchemy Dashboard](https://dashboard.alchemy.com/).
</Tip>

Expand Down Expand Up @@ -229,7 +229,7 @@ Social login authentication allows users to authenticate using OAuth providers l

### Enabling Authenticator App (TOTP) MFA

If you want to require a second factor for Social Login, see [Social Login with Multi-Factor Authentication](/wallets/react/mfa/social-login). Once users have set up a TOTP-based authenticator app, they'll be prompted for their 6-digit code automatically.
To require a second factor for Social Login, see [Social Login with Multi-Factor Authentication](/wallets/react/mfa/social-login). Once users set up a TOTP-based authenticator app, they're prompted for their 6-digit code automatically.

### Custom Social Providers

Expand Down
10 changes: 5 additions & 5 deletions docs/pages/authentication/overview.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ description: Comprehensive guide to authentication methods and user onboarding w
slug: wallets/authentication/overview
---

Authentication is the process by which users verify their identity to access your application. In web3, providing users with seamless login experiences for their decentralized applications and blockchain wallets is essential for creating exceptional user experiences that drive adoption.
Authentication is the process by which users verify their identity to access your application. In web3, provide users with seamless login experiences for their decentralized applications and blockchain wallets to create exceptional user experiences that drive adoption.

## Why Seamless Authentication Matters in Web3

Expand All @@ -15,7 +15,7 @@ Traditional blockchain authentication creates significant barriers to user adopt
- **Technical knowledge barriers** - Understanding of blockchain concepts and wallet security
- **Poor user experience** - Lengthy onboarding flows and confusing interfaces

Alchemy Smart Wallets solves these challenges by providing seamless and familiar login methods while maintaining the security and decentralization benefits of blockchain technology.
Smart Wallets solves these challenges by providing seamless and familiar login methods while maintaining the security and decentralization benefits of blockchain technology.

## Features

Expand All @@ -32,7 +32,7 @@ Choose from a variety of authentication options to match your users' preferences

### Flexible Implementation Options

Implement authentication in the way that best fits your application:
Implement authentication to best fit your application:

- **Pre-built UI Components** - Deploy quickly with minimal code using `<AuthCard />` or `<AuthModal />`
- **Custom UI Integration** - Build completely custom experiences with headless React hooks
Expand All @@ -41,7 +41,7 @@ Implement authentication in the way that best fits your application:

### Framework Support

Alchemy Smart Wallets authentication works across multiple platforms:
Smart Wallets authentication works across multiple platforms:

- **React** - Full-featured hooks, components, and TypeScript support
- **React Native** - Mobile-optimized authentication flows for iOS and Android
Expand Down Expand Up @@ -126,4 +126,4 @@ Ready to implement authentication? Start with these guides:
3. **[Social Login Setup](/wallets/authentication/login-methods/social-login)** - Configure OAuth providers
4. **[Custom UI Implementation](/wallets/react/react-hooks)** - Build custom authentication experiences

After authenticating users, you can generate wallets for them and they can start sending transactions with just a few clicks.
After authenticating users, generate wallets for them and they can start sending transactions with just a few clicks.
Loading
Loading