Skip to content

Commit a4a3121

Browse files
committed
Migrate additional information from previous section
1 parent 3fdcaa6 commit a4a3121

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+3172
-122
lines changed

docs/base-app/miniapps/debugging.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -327,7 +327,7 @@ await sdk.actions.ready({ disableNativeGestures: true });
327327

328328
1. **Local Testing**: Use ngrok or similar to expose localhost
329329
2. **Cast in DM**: Share your app URL in a DM to yourself
330-
3. **Test Different Clients**: Test in Warpcast mobile and other Farcaster clients
330+
3. **Test Different Clients**: Test in Farcaster mobile and other Farcaster clients
331331
4. **Check Different Devices**: Test on both iOS and Android if possible
332332

333333
<Info>

docs/base-app/miniapps/mini-apps.mdx

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ If you're already using MiniKit and experiencing issues, you can refer to our de
2121
## Authentication
2222

2323
<Warning>
24-
As a general rule of thumb, we recommend that you save authentication that requires an interaction for interactions that require it(eg. buying something, viewing personalized pages etc)
24+
Only authenticate when needed to talk to your backend. Do not block first load with auth prompts. Defer auth to the moment a protected action occurs (e.g., buy, personalize, post).
2525
</Warning>
2626

2727
Below we will quickly cover the different methods of authentication offered for mini apps and how well each of them work in Base App:
@@ -40,9 +40,9 @@ This is the expected flow for end-users to Sign In with Farcaster in your mini a
4040
</Tab>
4141

4242
<Tab title="Wallet Auth">
43-
Because users in Base App have an in-app smart wallet that doesn't require any app switching, we recommend wallet authentication as the primary method of authentication for developers looking to create a persisted session for the mini app user.
43+
Base App users already have a Base Account that is instantly available in-app. Prefer leveraging this auto-connected wallet; avoid showing an explicit "Connect Wallet" flow.
4444

45-
As described below, we don't think it's the best practice to prompt the user to log in before that authentication will allow them to do something else in your mini app, but for cases where do you want a secure, persisted session, using a wallet connection is a great option.
45+
Only present a connect/switch wallet UI if you intentionally support a different wallet. Never make this a blocking step—let users explore, and gate only at the point-of-need.
4646
</Tab>
4747

4848
<Tab title="Context Data">
@@ -57,6 +57,10 @@ Something important to note is that because of how the current mini app spec is
5757

5858
</Tabs>
5959

60+
<CardGroup cols={2}>
61+
<Card title="Feature: Authentication" icon="key" href="/mini-apps/features/authentication" />
62+
</CardGroup>
63+
6064
## Deeplinks and SDK Actions
6165

6266
The official mini apps SDK offers a [set of actions](https://miniapps.farcaster.xyz/docs/specification#actions) (which MiniKit offers as well) so that users of your mini app can be led to do things back in clients like Base App (e.g. compose a cast, view a profile, etc).
@@ -80,7 +84,7 @@ As a mini app host, we expose an [EIP-1193 Ethereum Provider](https://eips.ether
8084
By using the [Wallet](https://docs.base.org/builderkits/onchainkit/wallet/wallet) component offered in OnchainKit/MiniKit
8185

8286
<Note>
83-
If you run `npm create onchain --mini`, your mini app will have a "Connect Wallet" button already set up
87+
If you run `npm create onchain --mini`, the template includes a "Connect Wallet" button. In Base App, you typically don't need to show a connect button because the Base Account is already available. Show connect/switch only if you support alternate wallets—and do not gate first use behind it.
8488
</Note>
8589
</Tab>
8690

@@ -321,7 +325,7 @@ The following Mini App SDK features are **not currently supported** in Base App:
321325

322326
* Direct HTML links to third-party websites (`<a href=`, `<Link href=`)
323327
* Note: You can instead use `sdk.actions.openUrl()` to safely open a third-party website in our in-app browser
324-
* Warpcast/Farcaster composer intent URLs (`warpcast.com/~/compose`, `farcaster.com/~/compose`)
328+
* Warpcast/Farcaster composer intent URLs (`farcaster.com/~/compose`, `farcaster.com/~/compose`)
325329
* Note: You can instead use `sdk.actions.composeCast()` to compose a cast directly in Base App
326330

327331
#### Notifications are not yet supported
@@ -350,7 +354,7 @@ The following Mini App SDK features are **not currently supported** in Base App:
350354
### Development Notes
351355

352356
* Use `sdk.actions.openUrl()` for external navigation instead of direct HTML links
353-
* Use `sdk.actions.composeCast()` instead of Warpcast composer URLs
357+
* Use `sdk.actions.composeCast()` instead of Farcaster composer URLs
354358
* Implement visual feedback alternatives for haptic feedback
355359
* Avoid relying on location context for core functionality
356360
* To conditionally render functionality based on the user's client, check `context.client.clientFid` (Base App returns `309857`)

docs/docs.json

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -458,16 +458,15 @@
458458
"group": "Growth Playbook",
459459
"pages": [
460460
"mini-apps/growth/optimize-onboarding",
461-
"mini-apps/growth/build-viral-mini-apps",
462-
"mini-apps/growth/add-analytics"
461+
"mini-apps/growth/build-viral-mini-apps"
463462
]
464463
},
465464
{
466-
"group": "Mini App Features",
465+
"group": "Features",
467466
"pages": [
468467
"mini-apps/features/overview",
469468
"mini-apps/features/manifest",
470-
"mini-apps/features/authentication",
469+
"mini-apps/features/Authentication",
471470
"mini-apps/features/embeds-and-previews",
472471
"mini-apps/features/search-and-discovery",
473472
"mini-apps/features/sharing-and-social-graph",
@@ -488,20 +487,21 @@
488487
{
489488
"group": "MiniKit",
490489
"pages": [
490+
"mini-apps/technical-reference/minikit/overview",
491491
"mini-apps/technical-reference/minikit/provider-and-initialization",
492492
{
493493
"group": "Hooks",
494494
"pages": [
495495
"mini-apps/technical-reference/minikit/hooks/useMiniKit",
496-
"mini-apps/technical-reference/minikit/hooks/useAddFrame",
497-
"mini-apps/technical-reference/minikit/hooks/useNotification",
498496
"mini-apps/technical-reference/minikit/hooks/useOpenUrl",
499497
"mini-apps/technical-reference/minikit/hooks/useClose",
500498
"mini-apps/technical-reference/minikit/hooks/usePrimaryButton",
501499
"mini-apps/technical-reference/minikit/hooks/useViewProfile",
502500
"mini-apps/technical-reference/minikit/hooks/useComposeCast",
503501
"mini-apps/technical-reference/minikit/hooks/useViewCast",
504-
"mini-apps/technical-reference/minikit/hooks/useAuthenticate"
502+
"mini-apps/technical-reference/minikit/hooks/useAuthenticate",
503+
"mini-apps/technical-reference/minikit/hooks/useAddFrame",
504+
"mini-apps/technical-reference/minikit/hooks/useNotification"
505505
]
506506
}
507507
]
3.76 MB
Loading
326 KB
Loading
Lines changed: 25 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,34 @@
11
---
22
title: Design Patterns
3-
description: Principles and patterns to build social, repeat-use experiences
3+
description: Design best practices for Mini Apps
44
---
55

6-
Importing core content from Thinking Social.
6+
### Mobile-first
7+
- Use legible font sizes, line heights, and adequate contrast for small screens.
8+
- Help people concentrate on primary tasks and content by limiting the number of onscreen controls while making secondary details and actions discoverable with minimal interaction.
9+
- Use tab navigation to simplify movement within the app.
10+
- Ensure layouts adjust smoothly to various screen sizes and orientations.
11+
- Design for vertical scrolling rather than horizontal, as it’s more natural on mobile.
712

8-
<Note>
9-
This page will summarize design principles and link to the detailed guide below.
10-
</Note>
13+
![Metadata Guidelines](/images/minikit/mobile-first.png)
1114

12-
<Card title="Build Viral Mini Apps (detailed guide)" icon="users" href="/base-app/build-with-minikit/thinking-social" />
15+
### Onboarding and guest experiences
16+
- Your app metadata will be the first thing a new user will see, and is what they’ll base their first impression on. Aim for your metadata to provide helpful context, and properly set expectations with new users on what your app does.
17+
Consider the experience for new users opening your app for the first time. Include your value props, a light onboarding flow, or easy access to guides / FAQs from your homepage to help new users orient themselves
18+
- No technical jargon - language is user-friendly
19+
- Value is immediately apparent to new users
20+
- Defer auth until needed. Triggering the auth tray as the first thing a user sees on app open can create a jarring experience, and asks users to take an action they may not be confident in before demonstrating the value of your app.
21+
- Include a splash page for sign-in if needed.
22+
- Consider adding a “guest” mode, allowing users to explore your app before asking them to sign in.
1323

14-
TODO: Add condensed patterns and examples tailored to Mini Apps (identity, co‑creation, rituals).
24+
![Metadata Guidelines](/images/minikit/metadata-guidelines.png)
1525

1626

27+
### Gasless transactions
28+
Enable users to transact on your apps without needing gas by using wallet solutions that support gas sponsorship like [Base Account and Paymaster](/base-account/improve-ux/sponsor-gas/paymasters).
29+
30+
### Legible identity
31+
Never use wallet addresses. Instead, leverage identity solutions like ENS and [Basenames](/base-account/basenames/basenames-onchainkit-tutorial).
32+
33+
### Localization
34+
Many of our users are located around the world. Apps that are localised for each region will perform significantly better. For next.js apps, you can use Next.js Internationalization to localize your app.
Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,16 @@
11
---
2-
title: OnchainKit
3-
description: How to leverage OnchainKit components and MiniKit together
2+
title: 'OnchainKit'
3+
description: 'Ready-to-use components to accelerate the development of your mini apps.'
44
---
55

6-
TODO: Document recommended OnchainKit components for Mini Apps, integration tips, and examples.
6+
OnchainKit is a React-based design system for accelerating the development your apps. It provides pre-built, reusable full-stack components that follow Base's design guidelines, ensuring consistency and high-quality user experience.
77

8+
## Get Started
89

10+
Install the UI Kit with NPM:
11+
12+
```bash Terminal
13+
npx create-onchain@latest --mini
14+
```
15+
16+
Explore the full component library and usage examples in the [OnchainKit docs](/onchainkit/getting-started).

docs/mini-apps/features/Authentication.mdx

Lines changed: 36 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,23 +13,55 @@ Supported approaches:
1313

1414
<Tabs>
1515
<Tab title="Sign In with Farcaster / Quick Auth">
16-
Base App supports SIWF in‑app, enabling social identity without leaving the app. Quick Auth can issue a JWT to persist session state.
16+
Base App natively supports SIWF in-app, enabling social identity without leaving the app. Quick Auth can issue a JWT to persist session state.
17+
18+
**User Experience in Base App:**
19+
- **Create Account Users** (new Farcaster accounts created during Base App onboarding): Users see a "Login request" tray with the SIWF message and can sign it directly with their passkey
20+
- **Connect Account Users** (existing Farcaster accounts connected during onboarding): Users are prompted to deeplink to Farcaster one-time only to register their wallet as an auth address, then enjoy seamless in-app sign-in thereafter
1721
</Tab>
1822

1923
<Tab title="Wallet Auth">
20-
Base App provides an in‑app smart wallet. Use wallet auth for a persisted session when necessary, but avoid gating initial exploration behind connect.
24+
Base App provides an in‑app smart wallet that doesn't require app switching. Use wallet auth for a persisted session when necessary, but avoid gating initial exploration behind connect.
2125
</Tab>
2226

2327
<Tab title="Context Data">
24-
All hosts return context data (including user). Use it for analytics or lightweight session hints, but do not treat as primary auth.
28+
All hosts return context data (including user). Use it for analytics or lightweight session hints, but **do not treat as primary auth** since context data can be spoofed by developers who create their own mini app hosts.
2529
</Tab>
2630
</Tabs>
2731

28-
Best practices:
32+
## Implementation Example
33+
34+
```tsx
35+
import { useMiniKit, useAuthenticate } from '@coinbase/onchainkit/minikit';
36+
37+
function MyComponent() {
38+
const { context } = useMiniKit();
39+
const { user } = useAuthenticate();
40+
41+
// ✅ Safe: Use context for analytics only
42+
const userFid = context.user.fid; // For analytics tracking
43+
44+
// ✅ Safe: Use cryptographic verification for auth
45+
const verifiedUser = user; // From SIWF or wallet auth
46+
47+
// ❌ Unsafe: Don't rely on context for primary auth
48+
// const isAuthenticated = !!context.user.fid; // Can be spoofed!
49+
50+
return (
51+
<div>
52+
{/* Use verified user data for secure operations */}
53+
</div>
54+
);
55+
}
56+
```
57+
58+
## Best practices
2959

3060
- Gate wallet only at the point of onchain action
3161
- Prefer SIWF/Quick Auth for low‑friction identity
3262
- Use context for analytics; avoid using it as primary auth
63+
- Handle Base App's different authentication flows gracefully
64+
- Always use cryptographic verification for security-critical operations
3365

3466
Further reading:
3567

docs/mini-apps/features/manifest.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ If your Mini App does not show in search, follow the debugging guide [here](/min
8383
```
8484

8585
<Note>
86-
For a visual mapping of how fields render, see the [Mini App specification reference](/mini-apps/features/search-and-discovery#how-metadata-works).
86+
For a visual mapping of how fields render, see the [Mini App specification reference](/mini-apps/features/search-and-discovery#visual-specifications).
8787
</Note>
8888

8989

docs/mini-apps/features/notifications.mdx

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,12 @@ title: Notifications (coming soon)
33
description: Send relevant, rate‑limited notifications to users who saved your Mini App
44
---
55

6-
TODO: Add guidance for `useAddFrame` + `useNotification`, proxy route, and rate limiting.
6+
<Info>
7+
Notifications are not yet available in Base App but are planned for a future release.
8+
</Info>
9+
10+
Push notifications will allow you to re-engage users who have saved your Mini App, driving retention and bringing users back at key moments like new content releases, achievements, or time-sensitive events.
11+
12+
When available, notifications will be rate-limited and only sent to users who have explicitly saved your Mini App to their collection.
713

814

0 commit comments

Comments
 (0)