Issue on docs
- Dominant language
- JavaScript
- Stars
- 337
- Forks
- 792
- Avg merge
- 17h 23m
- Merged PRs (30d)
- 49
Description
Path: /mini-apps/resou# Mini App Context
> Improve user experience by instantly displaying user profile data and customizing user flows based on where your mini app was opened
When your app is opened as a mini app, `sdk.context` provides 4 data objects:
* `user`: User profile data
* `location`: Where the mini app was opened
* `client`: Host platform (e.g. the Base app or another Farcaster client) and device data
* `features`: Availability and state of features in the current client
```ts MiniAppContextTypes.ts theme={null}
export type MiniAppPlatformType = 'web' | 'mobile';
export type MiniAppContext = {
user: {
fid: number;
username?: string;
displayName?: string;
pfpUrl?: string;
};
location?: MiniAppLocationContext;
client: {
platformType?: MiniAppPlatformType;
clientFid: number;
added: boolean;
safeAreaInsets?: SafeAreaInsets;
notificationDetails?: MiniAppNotificationDetails;
};
features?: {
haptics: boolean;
cameraAndMicrophoneAccess?: boolean;
};
};
```
## Implementation
1. Install and import `@farcaster/miniapp-sdk`
2. Check if opened as a mini app using `sdk.isInMiniApp();`
3. If in a mini app, load the context object using `sdk.context`
In the example below we detect if the app was opened as a mini app, and if so, we return the user's username, fid, display name, and profile image.
```typescript app/profile/page.tsx theme={null}
"use client";
import { sdk } from "@farcaster/miniapp-sdk";
import { useEffect, useState } from "react";
export default function Profile() {
const [user, setUser] = useState(null);
const [isInMiniApp, setIsInMiniApp] = useState(false);
useEffect(() => {
const loadUserData = async () => {
try {
// Check if we're in a Mini App
const miniAppStatus = await sdk.isInMiniApp();
setIsInMiniApp(miniAppStatus);
if (miniAppStatus) {
// Get context and extract user info
const context = await sdk.context;
setUser(context.user);
}
} catch (error) {
console.error("Error loading user data:", error);
}
};
loadUserData();
}, []);
// Show message if not in Mini App
if (!isInMiniApp) {
return (
Please open this app in a Farcaster or Base client to see your profile.
);
}
// Show user information
if (user) {
return (
Welcome, {user.displayName || user.username}!
FID: {user.fid}
Username: @{user.username}
{user.pfpUrl && (
)}
);
}
return
}
```
## Schema
### User Object
Contains the user's profile information. This data shouldn't be used for authentication or sensitive actions because its passed by the application.
Unique Farcaster identifier for the user.
Handle without @ symbol.
User's chosen display name.
Profile picture URL.
User's biography text.
User's location information.
Google Places ID.
Human-readable location description.
```json user.json theme={null}
{
"fid": 6841,
"username": "deodad",
"displayName": "Tony D'Addeo",
"pfpUrl": "https://i.imgur.com/dMoIan7.jpg",
"bio": "Building @warpcast and @farcaster",
"location": {
"placeId": "ChIJLwPMoJm1RIYRetVp1EtGm10",
"description": "Austin, TX, USA"
}
}
```
### Location Object
Contains information about the context from which the Mini App was launched. This helps you understand how users discovered and accessed your app.
**Location Types:**
* **`cast_embed`**: Launched from a cast where your app is embedded
* **`cast_share`**: Launched when a user shared a cast to your app
* **`notification`**: Launched from a notification triggered by your app
* **`launcher`**: Launched directly from the client app catalog
* **`channel`**: Launched from within a specific Farcaster channel
* **`open_miniapp`**: Launched from another Mini App
#### CastEmbedLocationContext
Indicates the Mini App was launched from a cast where it is an embed.
The embed URL.
Cast information containing the embed.
```json cast_embed.json theme={null}
{
"type": "cast_embed",
"embed": "https://myapp.example.com",
"cast": {
"author": {
"fid": 3621,
"username": "alice",
"displayName": "Alice",
"pfpUrl": "https://example.com/alice.jpg"
},
"hash": "0xa2fbef8c8e4d00d8f84ff45f9763b8bae2c5c544",
"timestamp": 1749160866000,
"text": "Check out this awesome mini app!",
"embeds": ["https://myapp.example.com"],
"channelKey": "farcaster"
}
}
```
#### CastShareLocationContext
Indicates the Mini App was launched when a user shared a cast to your app.
The cast that was shared to your app.
#### NotificationLocationContext
Indicates the Mini App was launched from a notification.
Notification details.
Unique notification identifier.
Notification title.
Notification body text.
```json notification.json theme={null}
{
"type": "notification",
"notification": {
"notificationId": "f7e9ebaf-92f0-43b9-a410-ad8c24f3333b",
"title": "Yoinked!",
"body": "horsefacts captured the flag from you."
}
}
```
#### LauncherLocationContext
Indicates the Mini App was launched directly by the client app outside of a context.
#### ChannelLocationContext
Indicates the Mini App was launched from within a specific Farcaster channel.
Channel details.
Channel key identifier.
Channel name.
Channel profile image URL.
#### OpenMiniAppLocationContext
Indicates the Mini App was launched from another Mini App.
The domain of the Mini App that opened the current app.
### Client Object
Contains details about the Farcaster client running your Mini App. This data should be considered untrusted.
#### ClientContext
Platform where the app is running.
Self-reported FID of the client (e.g., 9152 for Farcaster).
Whether the user has added your Mini App to their client.
Screen insets to avoid navigation elements that obscure the view.
Top safe area inset in pixels.
Bottom safe area inset in pixels.
Left safe area inset in pixels.
Right safe area inset in pixels.
Notification configuration if enabled.
Endpoint for sending notifications.
Authentication token for notifications.
```json client.json theme={null}
{
"platformType": "mobile",
"clientFid": 9152,
"added": true,
"safeAreaInsets": {
"top": 0,
"bottom": 20,
"left": 0,
"right": 0
},
"notificationDetails": {
"url": "https://api.farcaster.xyz/v1/frame-notifications",
"token": "a05059ef2415c67b08ecceb539201cbc6"
}
}
```
### Features Object
Indicates which platform features are available and their current state in the client.
Whether haptic feedback is supported on the current platform.
Whether camera and microphone permissions have been granted and stored for this mini app.
```json features.json theme={null}
{
"haptics": true,
"cameraAndMicrophoneAccess": true
}
```
For more detailed capability detection, use the `sdk.getCapabilities()` method which returns specific SDK methods supported by the host.
rces/design-resources
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.