# Basic Usage

Canonical page: https://docs.ovok.com/native-sdk/guide/components/auth/register/examples/basic-usage

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

## Simple Registration [#simple-registration]

The most straightforward way to add registration to your app:

```tsx
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 [#with-social-registration]

Add social login options to your registration flow:

```tsx
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 [#minimal-registration]

A compact registration form with just the essentials:

```tsx
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 [#registration-with-navigation]

Integration with navigation libraries:

```tsx
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 [#error-handling]

Comprehensive error handling for registration:

```tsx
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 [#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 [#next-steps]

- [Custom Styling](/native-sdk/guide/components/auth/register/examples/custom-styling) - Learn how to customize the appearance
- [Custom Validation](/native-sdk/guide/components/auth/register/examples/custom-validation) - Add custom validation rules
- [Pre-filled Data](/native-sdk/guide/components/auth/register/examples/pre-filled-data) - Handle registration with existing data