React Native

npm install modelence

npm install @react-native-async-storage/async-storage

import { configureClient } from 'modelence/client';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { Dimensions, Linking, PixelRatio } from 'react-native';

const AUTH_TOKEN_KEY = 'modelence_auth_token';

// getAuthToken is called synchronously on every request, so we keep the
// token in memory and mirror writes to AsyncStorage for persistence across
// app restarts. Load the persisted value before mounting your app (see
// the loadAuthToken helper below).
let authToken: string | undefined;

export async function loadAuthToken() {
  authToken = (await AsyncStorage.getItem(AUTH_TOKEN_KEY)) ?? undefined;
}

configureClient({
  baseUrl: 'https://your-modelence-app.com',

  getAuthToken: () => authToken,

  setAuthToken: (token) => {
    authToken = token ?? undefined;
    if (token === null) {
      AsyncStorage.removeItem(AUTH_TOKEN_KEY);
    } else {
      AsyncStorage.setItem(AUTH_TOKEN_KEY, token);
    }
  },

  getClientInfo: () => {
    const screen = Dimensions.get('screen');
    const window = Dimensions.get('window');
    return {
      screenWidth: screen.width,
      screenHeight: screen.height,
      windowWidth: window.width,
      windowHeight: window.height,
      pixelRatio: PixelRatio.get(),
      orientation: screen.width > screen.height ? 'landscape' : 'portrait',
    };
  },

  // Used for OAuth redirects — opens the URL in the device browser
  openUrl: (url) => Linking.openURL(url),
});

import { AppProvider } from 'modelence/client';
import { loadAuthToken } from './modelenceConfig'; // the file from the previous step
import { useEffect, useState } from 'react';

export default function App() {
  const [ready, setReady] = useState(false);

  useEffect(() => {
    loadAuthToken().then(() => setReady(true));
  }, []);

  if (!ready) return null;

  return (
    <AppProvider>
      <RootNavigator />
    </AppProvider>
  );
}

startApp({
  auth: {
    mobile: { redirectUrls: ['myapp://auth'] },
  },
});

MODELENCE_AUTH_MOBILE_REDIRECT_URLS=myapp://auth

import { signInWithOAuth } from 'modelence/client';

await signInWithOAuth({ provider: 'google', redirectUri: 'myapp://auth' });

import { loginWithOAuth, parseDeepLinkParams } from 'modelence/client';
import { Linking } from 'react-native';
import { useEffect } from 'react';

useEffect(() => {
  const subscription = Linking.addEventListener('url', async ({ url }) => {
    const { code, error, errorCode } = parseDeepLinkParams(url);

    if (error) {
      // Sign-in failed. `errorCode` is stable and safe to branch on
      // (e.g. 'missing_code', 'invalid_state'); `error` is display text.
      return;
    }
    if (code) {
      await loginWithOAuth({ code });
      // useSession() now reflects the signed-in user.
    }
  });

  return () => subscription.remove();
}, []);

useEffect(() => {
  // Codes are single-use, so guard against handling the same one twice —
  // getInitialURL and the url event can both deliver it.
  const handled = new Set<string>();

  async function completeSignIn(url: string) {
    const { code } = parseDeepLinkParams(url);
    if (!code || handled.has(code)) return;
    handled.add(code);
    await loginWithOAuth({ code });
  }

  // Cold start: the deep link launched the app.
  Linking.getInitialURL().then((url) => {
    if (url) completeSignIn(url);
  });

  // Warm start: the app was already running.
  const subscription = Linking.addEventListener('url', ({ url }) => {
    completeSignIn(url);
  });

  return () => subscription.remove();
}, []);