base / base/docs

Issue on docs

Open
#635 0 comments 0 reactions 0 assignees View on GitHub
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 && (
Profile
)}

);
}

return

Loading user profile...
;
}
```

## 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.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.