Subchapter 4.17
references/migrations/farcaster-miniapp-to-app.mdMarkdown26 KBView on GitHub
Convert a Farcaster miniapp into a normal app on Base. The default outcome is a regular web app that works in the Base app browser and on the open web, with Farcaster Mini App host coupling removed.
If some Farcaster functionality truly needs to survive, keep it separate from the main app surface. Prefer read-only data first. Only preserve Mini App-specific behavior when the user explicitly insists, and isolate it behind a dedicated route or page rather than carrying it through the whole app.
Always separate these decisions:
Do not automatically turn “keep some Farcaster functionality” into “migrate to Neynar.” If a project already uses Neynar and the user wants to keep an isolated Farcaster-only area, you may preserve that existing integration. Do not introduce new Neynar adoption as the default recommendation.
Follow these five phases sequentially:
The quiz should route the user into one of two paths:
| Path | Name | Who it’s for | What happens |
|---|---|---|---|
| A | Regular App Default | Most projects | Strip Farcaster Mini App coupling and become a normal Base/web app |
| B | Isolated Farcaster Surface | The app still needs a small Farcaster-specific area | Convert the main app into a normal app, then keep only a separate Farcaster route/page for the remaining functionality |
Path B is still biased toward removing complexity:
Run a lightweight scan before asking questions. Produce an internal tally:
package.json (next, vite, react-scripts, @remix-run/*)dependencies and devDependencies.ts, .tsx, .js, .jsx) for:
sdk.actions.* calls (count total)sdk.quickAuth usage (yes/no)sdk.context usage (yes/no).well-known/farcaster.json (yes/no)farcasterMiniApp / miniAppConnector connector (yes/no)@farcaster/ import@neynar/ imports or api.neynar.com fetch calls (yes/no)app/farcaster/, pages/farcaster/, or a small set of components?openMiniApp, or sdk.context.client?Use this tally to inform quiz suggestions. Do not dump raw scan output to the user before asking the quiz.
Ask these questions one at a time. Use the quick scan results to suggest the most likely answer.
Q1 (always ask):
Based on my scan, your project has [X] files using the Farcaster SDK with [summary of what is used].
Which outcome do you want?
- (a) Regular app everywhere — remove Farcaster-specific behavior and just keep a normal Base/web app
- (b) Regular app first, plus a separate Farcaster area — keep the main app clean, but preserve a small isolated route/page if really needed
Q2 (always ask):
How deeply is the Mini App SDK used today?
- (a) Minimal — mostly
sdk.actions.ready()and a few helpers- (b) Moderate — some
context,openUrl, profile links, or conditionalisInMiniApplogic- (c) Heavy — auth, wallet connector, notifications, compose flows, or host-specific behavior
Q3 (ask if Q1 = b):
What is the smallest Farcaster feature set you actually need to preserve?
- (a) Read-only only — profile or cast display, links out to Farcaster profiles, maybe a small social page
- (b) Some Farcaster-specific interactions — there is a separate page/path that still needs more than read-only behavior
- (c) Not sure — analyze what is isolated already and recommend the smallest keep-surface possible
Q4 (ask if Q1 = b and there is existing isolated Farcaster code or existing Neynar usage):
Does the project already have an isolated Farcaster-only route/page or integration that you want to keep as-is if possible?
- (a) Yes — preserve only that isolated surface
- (b) No — prefer removing it unless there is a very strong reason to keep it
Q5 (ask if quick auth or other Mini App auth is present):
After conversion, what should the main app use for authentication?
- (a) SIWE — wallet-based auth for the regular app
- (b) Existing non-Farcaster auth — keep whatever normal web auth already exists
- (c) No auth — remove auth entirely
Map answers to a path:
| Desired outcome | Typical result |
|---|---|
Q1 = regular app everywhere | Path A — Regular App Default |
Q1 = regular app first, plus separate Farcaster area | Path B — Isolated Farcaster Surface |
Then tighten the recommendation:
Path B, prefer read-only preservation unless they explicitly require something else.Path A, warn them that some features will be deleted rather than recreated.Announce the chosen path:
Based on your answers, I’ll use Path [X]: [Name]. This will [one-sentence description]. I’ll now do a detailed analysis of your project.
Record the quiz answers internally. They guide whether the agent should:
Proceed to Phase 1.
Read package.json:
next → Next.jsvite → Vitereact-scripts → Create React App@remix-run/* → RemixList all packages matching:
@farcaster/miniapp-sdk, @farcaster/miniapp-core, @farcaster/miniapp-wagmi-connector@farcaster/frame-sdk, @farcaster/frame-wagmi-connector@farcaster/quick-auth, @farcaster/auth-kit@neynar/* (compatibility only; do not assume it stays)Search source files (.ts, .tsx, .js, .jsx) for:
SDK imports:
@farcaster/miniapp-sdk
@farcaster/miniapp-core
@farcaster/miniapp-wagmi-connector
@farcaster/frame-sdk
@farcaster/frame-wagmi-connector
@farcaster/quick-auth
@farcaster/auth-kit
@neynar/SDK calls:
sdk.actions.ready
sdk.actions.openUrl
sdk.actions.close
sdk.actions.composeCast
sdk.actions.addMiniApp
sdk.actions.requestWalletAddress
sdk.actions.viewProfile
sdk.actions.viewToken
sdk.actions.sendToken
sdk.actions.swapToken
sdk.actions.signIn
sdk.actions.setPrimaryButton
sdk.actions.openMiniApp
sdk.quickAuth
sdk.context
sdk.isInMiniApp
sdk.getCapabilities
sdk.haptics
sdk.back
sdk.walletConnectors & providers:
farcasterMiniApp()
miniAppConnector()
farcasterFrame()
MiniAppProvider
MiniAppContext
useMiniApp
useMiniAppContextManifest & meta:
.well-known/farcaster.json
fc:miniapp
fc:frameEnvironment variables:
NEYNAR_API_KEY
NEXT_PUBLIC_NEYNAR_CLIENT_ID
FARCASTER_
FC_Look for:
coinbaseWallet connector in wagmi configsiwe package usageconnectkit, rainbowkit, or @coinbase/onchainkitMap where Farcaster logic currently lives:
app/farcaster/*Mark each location with one action:
Create a path-scoped summary.
All paths include:
## Conversion Analysis — Path [X]: [Name]
**Framework:** [detected]
**Farcaster packages:** [list]
**Files with Farcaster code:** [count]
### Wagmi Connector
- File: [path]
- Current connector: [farcasterMiniApp / miniAppConnector / farcasterFrame / none]
- Other connectors: [list]
- Action: [replace with coinbaseWallet / leave existing wallet setup / remove only]
### MiniApp Provider
- File: [path]
- Pattern: [simple / complex]
- Consumers: [files importing from this]
- Action: [stub / remove / isolate]
### SDK Action Calls
[list each: file, what it does, action]
### Manifest & Meta
- Manifest route: [path or N/A]
- Meta tags: [file or N/A]Path A additionally includes:
### Main App Outcome
- Action: remove Farcaster-specific UI and flows from the main app entirely
### Authentication
- Quick Auth used: [yes/no, file]
- Action: replace with SIWE / keep existing non-Farcaster auth / remove
### Existing Neynar Usage
- Package or files: [list or N/A]
- Action: remove entirely unless the user later re-scopes to Path B
### Environment Variables
[list all FC/Neynar vars that will be removed]Path B additionally includes:
### Main App Outcome
- Action: convert the main app into a normal web app first
### Isolated Farcaster Surface
- Route/page to keep: [path or proposed path]
- Scope: [read-only / mixed / host-specific]
- Recommended target scope: [prefer read-only / quarantine existing behavior / remove]
### Authentication
- Quick Auth used: [yes/no, file]
- Main app action: replace with SIWE / keep existing non-Farcaster auth / remove
- Isolated Farcaster surface action: [remove auth coupling / preserve existing isolated flow only if explicitly requested]
### Existing Neynar Usage
- Package or files: [list or N/A]
- Action: [remove / keep only inside isolated surface]
### Environment Variables
- Remove from main app: [FC_*, FARCASTER_*, etc.]
- Keep only if isolated surface truly still needs them: [NEYNAR_API_KEY, etc. or N/A]All paths end with:
### Potential Issues
- [ ] FID used as database primary key
- [ ] Farcaster colors in tailwind config
- [ ] `isInMiniApp` branches with unique else logic
- [ ] Components only meaningful inside Farcaster
- [ ] Farcaster code mixed into shared providers or root layoutAsk:
Does this analysis look correct? Ready to proceed with conversion?
STOP and wait for user confirmation before Phase 2.
Steps are organized by feature area. Each step notes which paths it applies to and what to do differently for Path B.
Find the wagmi config file (lib/wagmi.ts, config/wagmi.ts, providers/wagmi-provider.tsx, etc.):
farcasterMiniApp or miniAppConnector from @farcaster/miniapp-wagmi-connectorfarcasterMiniApp() / miniAppConnector() call from the connectors arrayimport { coinbaseWallet } from "wagmi/connectors";
coinbaseWallet({ appName: "<app name>" })coinbaseWallet already exists, leave it as-isSkip this step if wagmi is not in the project.
If the app has a shared Mini App provider, remove host/runtime assumptions from the main app.
Pattern A: simple provider
Replace with a safe stub:
'use client'
import React, { createContext, useContext, useMemo } from "react";
interface MiniAppContextType {
context: undefined;
ready: boolean;
isInMiniApp: boolean;
}
const MiniAppContext = createContext<MiniAppContextType | undefined>(undefined);
export function useMiniAppContext() {
const context = useContext(MiniAppContext);
if (context === undefined) {
throw new Error("useMiniAppContext must be used within a MiniAppProvider");
}
return context;
}
export default function MiniAppProvider({ children }: { children: React.ReactNode }) {
const value = useMemo(
() => ({
context: undefined,
ready: true,
isInMiniApp: false,
}),
[]
);
return <MiniAppContext.Provider value={value}>{children}</MiniAppContext.Provider>;
}Preserve export style and hook names so consumers do not break.
Pattern B: complex provider
Path B, do not let the isolated Farcaster surface keep this provider wired through the root app shell. If needed, make it local to the isolated route only.The main app should use normal web auth, not Mini App auth.
Default rule for both paths:
sdk.quickAuth.getToken() is used, replace it with SIWE or remove it.Client-side (e.g. useSignIn.ts):
import sdk from "@farcaster/miniapp-sdk"sdk.quickAuth.getToken()useAccount() (wagmi)siweuseSignMessage() (wagmi)Server-side (e.g. app/api/auth/sign-in/route.ts):
@farcaster/quick-auth verificationsiwe or viemIf FID is used as a database primary key:
Path B note:
| Original | Replacement |
|---|---|
sdk.actions.ready() | Remove entirely |
sdk.actions.openUrl(url) | window.open(url, "_blank") |
sdk.actions.close() | window.close() or remove |
sdk.actions.composeCast(...) | Remove from the main app |
sdk.actions.addMiniApp() | Remove call and UI |
sdk.actions.requestWalletAddress() | Remove; wagmi handles wallet access |
sdk.actions.viewProfile(fid) | window.open(\https://warpcast.com/~/profiles/${fid}\` (opens in a new tab), “_blank”)` |
sdk.actions.viewToken(opts) | window.open(\https://basescan.org/token/${opts.token}\` (opens in a new tab), “_blank”)` |
sdk.actions.sendToken(opts) | Replace with wagmi flow if the feature matters, otherwise remove |
sdk.actions.swapToken(opts) | Remove call and UI unless there is a real app-specific swap feature outside Farcaster |
sdk.actions.signIn(...) | Remove; auth handled by normal web auth |
sdk.actions.setPrimaryButton(...) | Remove entirely |
sdk.actions.openMiniApp(...) | Remove from the main app |
sdk.isInMiniApp() | Remove conditional and keep the non-Farcaster branch |
sdk.context | Remove from the main app |
sdk.getCapabilities() | Remove or replace with async () => [] |
sdk.haptics.* | Remove entirely |
sdk.back.* | Remove entirely |
sdk.wallet.* | Remove; wagmi handles wallet access |
For conditional isInMiniApp branches:
// BEFORE
if (isInMiniApp) {
sdk.actions.openUrl(url);
} else {
window.open(url, "_blank");
}
// AFTER
window.open(url, "_blank");Always keep the normal web branch.
Path B does not mean “recreate everything.” It means “keep the main app clean and preserve the smallest separate Farcaster surface possible.”
sdk.context
context.location, context.client, safe area, and other host-derived assumptions unless the user explicitly insists on preserving a host-specific pagesdk.actions.composeCast(...)
sdk.actions.openMiniApp(...)
notifications / haptics / host buttons
If the user wants an isolated Farcaster surface, prefer read-only data first.
Create lib/farcaster-readonly.ts (or equivalent) only if the app needs it:
const HUB_URL = "https://hub.farcaster.xyz";
export async function getUserData(fid: number) {
const res = await fetch(`${HUB_URL}/v1/userDataByFid?fid=${fid}`);
if (!res.ok) throw new Error(`Hub user data fetch failed: ${res.status}`);
return res.json();
}
export async function getCastsByFid(fid: number, pageSize = 25) {
const res = await fetch(`${HUB_URL}/v1/castsByFid?fid=${fid}&pageSize=${pageSize}`);
if (!res.ok) throw new Error(`Hub casts fetch failed: ${res.status}`);
return res.json();
}Then:
Delete .well-known/farcaster.json route:
app/.well-known/farcaster.json/route.tspublic/.well-known/farcaster.jsonapi/farcaster-manifest.ts or similar helpersIf the .well-known directory becomes empty, delete it.
In root layout or metadata files, remove:
<meta> tags with property="fc:miniapp*" or property="fc:frame*"Metadata.other entries that only exist for Farcaster tagsgenerateMetadata logic that only produces Mini App metadataAll paths — remove:
@farcaster/miniapp-sdk, @farcaster/miniapp-wagmi-connector, @farcaster/miniapp-core@farcaster/frame-sdk, @farcaster/frame-wagmi-connector@farcaster/quick-auth, @farcaster/auth-kitPath A — also remove:
@neynar/nodejs-sdk, @neynar/reactPath B — remove by default:
@neynar/nodejs-sdk, @neynar/react, and Neynar helpers unless they remain inside the intentionally isolated Farcaster surfaceAll paths — add only if truly needed:
siwe if SIWE auth is introduced and not already presentDo not add new Neynar packages as part of the default conversion.
Path A:
app/farcaster/, pages/farcaster/, and Farcaster-only components entirely/api/farcaster/* and /api/neynar/*Path B:
app/farcaster/ or app/social/ over spreading Farcaster logic throughout generic shared pagesAll paths — remove Mini App packages:
@farcaster/miniapp-sdk, @farcaster/miniapp-wagmi-connector, @farcaster/miniapp-core@farcaster/frame-sdk, @farcaster/frame-wagmi-connector@farcaster/quick-auth, @farcaster/auth-kitPath A — also remove:
@neynar/* packagesPath B — remove unless still isolated and intentionally preserved:
@neynar/*All paths — add if introduced:
siwePath A — remove from all .env* files:
NEYNAR_API_KEYNEXT_PUBLIC_NEYNAR_CLIENT_IDFARCASTER_*FC_*NEXT_PUBLIC_FC_*NEXT_PUBLIC_FARCASTER_*Path B — remove from the main app by default:
FARCASTER_*FC_*NEXT_PUBLIC_FC_*NEXT_PUBLIC_FARCASTER_*Only keep NEYNAR_* vars if the isolated surface explicitly still depends on existing Neynar integration.
Also update env validation schemas (env.ts, env.mjs, zod schemas, etc.).
If tailwind.config.ts or tailwind.config.js includes Farcaster brand colors such as farcaster: "#8B5CF6", remove them unless that branding is intentionally kept inside an isolated Farcaster-only surface.
Tell the user:
npm installAll paths — search for:
@farcaster
farcasterMiniApp
miniAppConnector
sdk.actions
sdk.quickAuth
sdk.context
fc:miniapp
fc:framePath A — also search for:
@neynar
NEYNAR_API_KEY
NEXT_PUBLIC_NEYNAR_CLIENT_ID
api.neynar.comPath B — if Neynar was intentionally preserved:
@neynar imports and env vars exist only inside the isolated Farcaster surface and its server helpersReport any source matches, ignoring node_modules, lock files, and git history.
npx tsc --noEmitReport and fix type errors.
npm run buildReport and fix build errors.
## Conversion Complete — Path [X]: [Name]
**Files modified:** [count]
**Files deleted:** [count]
**Files created:** [count, if any]
**Packages removed:** [list]
**Packages added:** [list, if any]
### What was done
- [x] Removed Farcaster Mini App wagmi connector
- [x] Stubbed or removed Mini App provider/context
- [x] Replaced Mini App auth with normal web auth or removed it
- [x] Removed or replaced SDK action calls
- [x] Deleted manifest route
- [x] Removed Farcaster meta tags
- [x] Cleaned up dependencies and env varsPath B summary additionally includes:
- [x] Kept the main app as a normal web app
- [x] Confined remaining Farcaster functionality to a dedicated route/page
- [x] Preferred read-only Farcaster data where possible
- [x] Removed Farcaster host/runtime coupling from shared app infrastructureAll paths end with:
### Manual steps
- [ ] Run `npm install`
- [ ] Test wallet connection flow
- [ ] If FID migration is needed, migrate from FID-based identity to wallet address
- [ ] If Path B preserves a Farcaster-only area, verify it stays isolated from the main app shell
### Verification
- TypeScript: [pass/fail]
- Build: [pass/fail]
- Remaining Farcaster references: [none / list]Skip Phase 2A. Do not introduce wagmi unless the app actually needs wallet connectivity.
Skip Phase 2C. Do not add SIWE unnecessarily.
Treat identically to @farcaster/miniapp-sdk.
Ask which workspace(s) to convert. Only modify those.
Do not change schema automatically. Flag it and warn in Phase 4.
Always keep the normal web branch and remove the Mini App branch.
Delete them entirely in Path A. In Path B, keep them only if they live inside the isolated Farcaster route/page.
If the project already uses Neynar:
Path APath B surfaceIf the user says they want to “keep Farcaster stuff,” bias toward:
Do not assume they want write access, notifications, or host/runtime behavior.
If the scan and quiz conflict, point it out and ask the user to confirm the smaller keep-surface first.
coinbaseWallet or the chosen wallet connector is configured correctlyThis file