The following steps are intended to help you get a basic Miri integration up and running in your existing React Native application.

If you find that you would like to customize your MIri integration further, please refer to the UI Components section of this documentation for more details.

Miri Context and Hook

A context provider and hook is used to allow you to store and access important details at the global application level, such as the active miriUser, activeCoach as set by the user in the app (or set server-side for the user either directly or based on preferences defined by an administrator).

Wrap your application in a MiriAppProvider. There are some props that can be passed into the provider here. Your application will then be able to access the useMiriApp hook.

MiriAppProvider

<MiriAppProvider
apiKey="Miri API Key"
scheme="yourAppScheme://"
auth={{
token: 'SSO_TOKEN',
provider: 'firebase',
config: {
project_id: 'your-firebase-project-id',
},
}}
env="staging"
>
<MainApp />
</MiriAppProvider>


Props

| Prop | Type | Description || :------------------ | :--------------------------------------------------------------- | :-------------------------------------------------- || apiKey (required) | string | Registered API Key || scheme (required) | string | Your application scheme (e.g. myApp://) || auth (required) | MiriAuth | SSO Auth token, provider, and provider-specific config (see below) || env (optional) | string | staging or production (default is production). You must set this to staging if using a staging API key. |

Auth Provider Configuration

The auth prop requires a config object specific to your auth provider:

Firebase — if your app uses Firebase Authentication:

auth={{
token: idToken, // from user.getIdToken()
provider: 'firebase',
config: {
project_id: 'your-firebase-project-id', // from google-services.json or GoogleService-Info.plist
},
}}


Google — if your app uses Google Sign-In:

auth={{
token: googleIdToken,
provider: 'google',
config: {
client_id: 'your-google-ios-client-id',
issuer_url: 'https://www.googleapis.com/oauth2/v3/certs',
},
}}


Apple — if your app uses Apple Sign-In:

auth={{
token: appleIdToken,
provider: 'apple',
config: {
team_id: 'your-apple-team-id',
key_id: 'your-apple-key-id',
issuer_url: 'https://appleid.apple.com',
},
}}


Custom — if your app uses its own authentication:

auth={{
token: customToken,
provider: 'custom',
config: {
token_validation_url: 'https://your-domain.com/validate',
},
}}


Note: For Firebase, the project_id must be your Firebase project ID — not Miri's. You can verify by decoding your token at jwt.io and checking the aud claim matches your project_id.

Miri App Context Hook

Access the Miri App Context from components in your app, using the useMiriApp hook.

const { isLoading, miriUser, activeCoach } = useMiriApp();


Returned Props

This hook returns an object with the following props:| Prop | Type | Description || :---- | :----- | :---- ||isLoading | boolean | Whether the SDK is initializing || miriUser| CareSeeker \| null | The Miri User Object || activeCoach | Practitioner \| null | The currently active coach || selectedDate | Date | The currently selected data for which to display tracking progress || setSelectedDate | (date: Date) => void | A function to set the currently selected date || getMeals | (startDate: Date, endDate: Date) => Promise<Meal[]> | A function to retrieve a list of meals for a given date to display in the MealList component ||getTrackingItemsProgress | () => Promise<{ trackingItemProgress: TrackingItemProgress[]; streakCards: Streak[]; }> | A function to retrieve the tracking item progress and streaks for the past week || getWeightProgress | () => Promise<{ weightGoal: PlanArtifactWeight \| null; weightTracking: WeightTracking \| null; }> | A function to retrieve the Miri User's weight tracking progress. |

Initialize the Miri SDK

NOTE: you will only do this once in an application.

Before working with the Miri UI components you'll need to wrap your application in the MiriAppProvider and then initiate a client instance, which abstracts API calls into methods, handles state and real-time events.

You should only use the MiriAppProvider once in your application. If you need to access data and functions somewhere down in the component tree, use the useMiri hook to access it.

Usage Example

Here is an example of how to implement the MiriAppProvider and initialize Miri using initMiriApp.

AppAuthProvider.tsx

Your app will need to authenticate with a supported provider (Firebase, Google, Apple, or Custom). Once you authenticate and receive an idToken, make that available to MiriAppProvider. The token should include the following data:

{
"email": "user@email.com",
"name": "User Name",
"picture": "Avatar URL"
}


The token can be made available in a number of ways, including using a Context/Provider. E.g.:

const AppAuthContext = React.createContext({ idToken: null });

const useAppAuthProvider = () => React.useContext(AppAuthContext);

const AppAuthProvider = ({ children }) => {
const [idToken, setIdToken] = useState(null);

function getIdToken() {
// Using your authentication provider, obtain an idToken
setIDToken(idToken);
}

return <AppAuthContext.Provider value={{ idToken }}>{children}</AppAuthContext.Provider>;
};


App.tsx

Now you're ready to initialize MiriAppProvider

import { MiriAppProvider } from '@miri-ai/miri-react-native';

// Wrapping the app with your app's auth provider
const Main = () => {
<AppAuthProvider>
<App />
</AppAuthProvider>
}

const App = () => {
const { idToken } = useAppAuthProvider();
return (
<MiriAppProvider
apiKey="Miri API Key"
scheme="yourAppScheme://"
auth={{
token: idToken,
provider: 'firebase',
config: {
project_id: 'your-firebase-project-id',
},
}}
env="staging"
>
<MainApp />
</MiriAppProvider>
);
}


Note: If using a staging API key, you must pass env="staging". The SDK defaults to production, and a staging key will be rejected by the production server with a 400 error.

MainApp.tsx example that displays the Miri User name

import { useMiriApp } from "@miri-ai/miri-react-native";
import { Text } from "react-native";

const MainApp = () => {
const { miriUser } = useMiriApp();
return <Text>{miriUser.displayName}</Text>;
};