GuidesComponentsAuth Components

Sign-In

Add email, social, and MFA sign-in to a React Native app

  • Stable unknown
  • Release candidate since 1.16.1-rc.3
  • Development since 1.16.1-dev.2111+9796905

Use SignIn to compose an email sign-in screen from SDK components. The default email form calls client.auth.login() on the active native Ovok client and activates the returned login. Your app decides where a successful user goes and how sign-in errors are presented.

Add a patient sign-in screen

Render the screen below OvokProvider and the SDK ThemeProvider. Patient sign-in uses the tenant configured on the native client; pass the same tenant code to the existing form prop.

import { SignIn } from "@ovok/native";
import { useRouter } from "expo-router";
import { Alert } from "react-native";

export function SignInScreen() {
  const router = useRouter();
  const tenantCode = process.env.EXPO_PUBLIC_TENANT_CODE;

  if (!tenantCode) {
    throw new Error("Set EXPO_PUBLIC_TENANT_CODE for this app environment");
  }

  return (
    <SignIn>
      <SignIn.Header>
        <SignIn.Header.Title />
        <SignIn.Header.Description />
      </SignIn.Header>

      <SignIn.EmailForm
        loginType="Patient"
        tenantCode={tenantCode}
        onSuccess={() => router.replace("/home")}
        onError={() =>
          Alert.alert("Sign-in failed", "Check your details or try again.")
        }
      >
        <SignIn.EmailForm.Inputs />
        <SignIn.EmailForm.SigninButton />
      </SignIn.EmailForm>

      <SignIn.RegisterLink onPress={() => router.push("/register")} />
    </SignIn>
  );
}

Use your app's route names in place of /home and /register. For practitioner sign-in, set loginType="Practitioner"; the form's tenant code is optional for that variant. For carer (RelatedPerson) sign-in, set loginType="RelatedPerson" with the tenant code. Carers have no register route: their account is made when they accept a record-share invite (see Invites and carers).

Add MFA or social sign-in

With the default client-backed form, an MFA response changes SignIn.EmailForm.Inputs to the verification-code input. The SDK verifies that code, activates the login, and then calls onSuccess. Use a compatible @ovok/core release that supports MFA responses.

An onSubmit callback replaces the default submission path. If you provide one, your implementation owns credential verification, MFA, active-login storage, and session updates. The default onSuccess and onError callbacks cannot be combined with that custom submitter.

Google and Apple buttons are optional. Add them inside SignIn.SocialLogins only after completing the native provider setup in installation. See the social login reference for provider props, and Sign in on the web for React Native Web.

Last updated on

On this page