Skip to main content

Basic Usage

Learn how to implement basic user registration functionality with the Register component.

Simple Registration​

The most straightforward way to add registration to your app:

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

export const BasicRegistration = () => {
  const router = useRouter();

  const handleSuccess = (response) => {
    console.log("Registration successful:", response);
    // Navigate to welcome screen or dashboard
    router.push("/welcome");
  };

  const handleError = (error) => {
    console.error("Registration failed:", error);
    // Show error notification
  };

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

      <Register.EmailForm
        onSuccess={handleSuccess}
        onError={handleError}
        tenantCode="your-tenant-code"
      >
        <Register.EmailForm.Inputs />
        <Register.EmailForm.RegisterButton />
      </Register.EmailForm>

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

With Social Registration​

Add social login options to your registration flow:

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

export const SocialRegistration = () => {
  const router = useRouter();

  const handleEmailSuccess = (response) => {
    console.log("Email registration successful:", response);
    router.push("/welcome");
  };

  const handleSocialSuccess = (response) => {
    console.log("Social registration successful:", response);
    router.push("/welcome");
  };

  const handleError = (error) => {
    console.error("Registration failed:", error);
  };

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

      <Register.EmailForm
        onSuccess={handleEmailSuccess}
        onError={handleError}
        tenantCode="your-tenant-code"
      >
        <Register.EmailForm.Inputs />
        <Register.EmailForm.RegisterButton />
      </Register.EmailForm>

      <Register.RegisterWithSeparator />

      <Register.SocialLogins>
        <Register.SocialLogins.GoogleLogin
          googleIosClientId="your-ios-client-id"
          googleWebClientId="your-web-client-id"
          internalId="google"
          onSuccess={handleSocialSuccess}
          onError={handleError}
        >
          <Register.SocialLogins.GoogleLogin.Icon />
          <Register.SocialLogins.GoogleLogin.Text>Continue with Google</Register.SocialLogins.GoogleLogin.Text>
        </Register.SocialLogins.GoogleLogin>
        <Register.SocialLogins.AppleLogin
          internalId="apple"
          onSuccess={handleSocialSuccess}
          onError={handleError}
        >
          <Register.SocialLogins.AppleLogin.Icon />
          <Register.SocialLogins.AppleLogin.Text>Continue with Apple</Register.SocialLogins.AppleLogin.Text>
        </Register.SocialLogins.AppleLogin>
      </Register.SocialLogins>

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

Minimal Registration​

A compact registration form with just the essentials:

import React from "react";
import { Register } from "@ovok/native";

export const MinimalRegistration = () => {
  const handleSuccess = (response) => {
    // Handle registration success
  };

  const handleError = (error) => {
    // Handle registration error
  };

  return (
    <Register>
      <Register.Header>
        <Register.Header.Title>Sign Up</Register.Header.Title>
      </Register.Header>

      <Register.EmailForm
        onSuccess={handleSuccess}
        onError={handleError}
        tenantCode="your-tenant-code"
      >
        <Register.EmailForm.Inputs />
        <Register.EmailForm.RegisterButton />
      </Register.EmailForm>
    </Register>
  );
};

Registration with Navigation​

Integration with navigation libraries:

import React from "react";
import { Register } from "@ovok/native";
import { useNavigation } from "@react-navigation/native";

export const NavigationRegistration = () => {
  const navigation = useNavigation();

  const handleSuccess = (response) => {
    // Store user data
    // Navigate to main app
    navigation.navigate("Dashboard");
  };

  const handleError = (error) => {
    // Show error message
    Alert.alert("Registration Failed", error.message);
  };

  const navigateToSignIn = () => {
    navigation.navigate("SignIn");
  };

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

      <Register.EmailForm
        onSuccess={handleSuccess}
        onError={handleError}
        tenantCode="your-tenant-code"
      >
        <Register.EmailForm.Inputs />
        <Register.EmailForm.Spacing percentage={3} />
        <Register.EmailForm.RegisterButton />
      </Register.EmailForm>

      <Register.Footer />
      <Register.LoginLink onPress={navigateToSignIn} />
    </Register>
  );
};

Error Handling​

Comprehensive error handling for registration:

import React from "react";
import { Alert } from "react-native";
import { Register } from "@ovok/native";

export const ErrorHandlingRegistration = () => {
  const handleSuccess = (response) => {
    Alert.alert("Success", "Account created successfully!");
  };

  const handleError = (error) => {
    let errorMessage = "Registration failed. Please try again.";

    // Handle specific error types
    if (error.message?.includes("email")) {
      errorMessage = "This email is already registered.";
    } else if (error.message?.includes("network")) {
      errorMessage = "Network error. Check your connection.";
    } else if (error.message?.includes("validation")) {
      errorMessage = "Please check your input and try again.";
    }

    Alert.alert("Registration Failed", errorMessage);
  };

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

      <Register.EmailForm
        onSuccess={handleSuccess}
        onError={handleError}
        tenantCode="your-tenant-code"
      >
        <Register.EmailForm.Inputs />
        <Register.EmailForm.RegisterButton />
      </Register.EmailForm>
    </Register>
  );
};

Key Features​

  • Auto Validation: Built-in form validation with real-time feedback
  • Loading States: Automatic loading indicators during submission
  • Error Handling: Comprehensive error display and handling
  • Accessibility: Add app-owned labels, hints, roles, and announcements for the screen-reader experience required by your product
  • Theme Integration: Consistent styling with your app theme
  • Social Auth: Optional Google and Apple registration
  • Navigation: Easy integration with navigation libraries

Next Steps​