This is a basic starter app that demonstrates how to sign into Medplum with React Native.

This only demonstrates React Native in "web" mode. Android and iOS are out of scope.

To clone and run this project:

git clone [email protected]:medplum/medplum-react-native-example.git
cd medplum-react-native-example
npm ci
npm run web

This app includes a very basic sign-in form that only supports email and password. Medplum authentication supports many additional features, which are out of scope of this project (multiple profiles, SMART scopes, federated identities, external auth providers, etc).

First, we setup MedplumClient which is the Medplum API client:

import { getDisplayString, MedplumClient } from "@medplum/core";

const medplum = new MedplumClient();

MedplumClient supports many configuration options which control the behavior. For example, you may want to specify a clientId and/or projectId to restrict access to specific Medplum projects. Or you may want to specify baseUrl to specify your self-hosted Medplum server.

Next, we define a very simple email and password login form:

const [email, setEmail] = useState("");
const [password, setPassword] = useState("");

// ...

return (
  <>
    <View>
      <TextInput
        style={styles.input}
        placeholder="Email"
        placeholderTextColor="#003f5c"
        onChangeText={(email) => setEmail(email)}
      />
    </View>
    <View>
      <TextInput
        style={styles.input}
        placeholder="Password"
        placeholderTextColor="#003f5c"
        secureTextEntry={true}
        onChangeText={(password) => setPassword(password)}
      />
    </View>
    <Button onPress={startLogin} title="Sign in" />
  </>
);

Clicking on the "Sign in" button will executes the startLogin function:

function startLogin() {
  medplum.startLogin({ email, password }).then(handleAuthResponse);
}

There are two successful response types from startLogin:

1. If the user only has one matching profile, the response includes code for OAuth token exchange.
2. If the user has multiple profiles, the response includes memberships with project membership and profile details.

In this example, we forcefully choose the first profile. In a real app, you would specify a projectId to force a single profile, or display a list of profiles to the user.

function handleAuthResponse(response) {
  if (response.code) {
    handleCode(response.code);
  }
  if (response.memberships) {
    // TODO: Handle multiple memberships
    // In a real app, you would present a list of memberships to the user
    // For this example, just use the first membership
    medplum
      .post("auth/profile", {
        login: response.login,
        profile: response.memberships[0].id,
      })
      .then(handleAuthResponse);
  }
}

Now that we have a code, we can follow OAuth token exchange. Call processCode to exchange the code for an access token:

function handleCode(code) {
  medplum.processCode(code).then(setProfile);
}

processCode sets the access token in MedplumClient and returns the user's profile resource.

Now that we have the user's profile, we can display it in the app:

<>
  <Text>Logged in as {getDisplayString(profile)}</Text>
  <Button onPress={signOut} title="Sign out" />
</>

This project was created by following the React Native docs on [Setting up the development environment](Setting up the development environment).

If you want to create a project like this from scratch, follow these instructions.

First, create a React Native project:

npx create-expo-app medplum-react-native-example
cd medplum-react-native-example

Next, add the web dependencies:

npx expo install react-native-web@~0.18.10 [email protected] @expo/webpack-config@^18.0.1

Then add Medplum:

npx expo install @medplum/core

And then start the app:

npx expo start