Registration

Use Register to compose an account-creation screen. Its default email flow submits to the active native Ovok client, activates the returned login, and publishes a session change. Your app owns the next route and any onboarding that follows.

Add a registration screenCopy Anchor Link

Render the screen below OvokProvider and the SDK ThemeProvider. Pass a tenant code from public app configuration.

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

export function RegisterScreen() {
  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 (
    <Register>
      <Register.Header>
        <Register.Header.Title />
        <Register.Header.Description />
      </Register.Header>

      <Register.EmailForm
        tenantCode={tenantCode}
        onSuccess={() => router.replace("/welcome")}
        onError={() =>
          Alert.alert("Registration failed", "Review your details or try again.")
        }
      >
        <Register.EmailForm.Inputs />
        <Register.EmailForm.RegisterButton />
      </Register.EmailForm>

      <Register.LoginLink onPress={() => router.push("/sign-in")} />
    </Register>
  );
}

Change the paths to match your navigation. The default form collects name, surname, email, password, and password confirmation. defaultValues can prefill fields when your flow already knows some of those values.

Customize validation or submissionCopy Anchor Link

Pass customValidations to extend the built-in Yup validation. Use onSubmit when your app owns registration; it replaces the SDK's default client.auth.register request and automatic active-login setup. In that mode, handle errors, session updates, and navigation in your implementation. onSubmit cannot be combined with the default-flow onSuccess and onError callbacks.

The shared Google and Apple buttons are available through Register.SocialLogins. Configure the native provider packages before rendering them; see installation and the registration examples.

Related referencesCopy Anchor Link

• Registration form and props
• Inputs and submit button
• Authentication integration guide