> ## Documentation Index
> Fetch the complete documentation index at: https://dev.moonpay.com/llms.txt
> Use this file to discover all available pages before exploring further.

# <MoonPayAuth />

> Inline auth frame for headless and Identity API integrations.

`<MoonPayAuth>` renders the MoonPay auth frame inline in your layout. It is
the declarative alternative to
[`client.setupAuth()`](/platform/sdk-reference/react-native/setup-auth).

The auth frame is a lighter-weight counterpart to the connect flow. It drives
the customer through email/OTP authentication only, without the full connect
UI. This makes it a good fit for headless and Identity API integrations.

**Precondition:** a `clientToken` must be present in the client context before
mounting this component. The token is populated automatically when
[`client.getConnection()`](/platform/sdk-reference/react-native/get-connection)
or [`<MoonPayConnectionCheck>`](/platform/sdk-reference/react-native/components/moonpay-connection-check)
resolves with `status: "connectionRequired"`. If no token is present, the
component emits an `"error"` event.

When the customer completes the flow with an active connection, credentials are
decrypted and stored on the shared client automatically.

```tsx AuthScreen.tsx theme={null}
import {
  MoonPayAuth,
  type AuthEvent,
} from "@moonpay/platform-sdk-react-native";
import { StyleSheet, View } from "react-native";

export function AuthScreen() {
  const handleEvent = (event: AuthEvent) => {
    switch (event.kind) {
      case "ready":
        break;
      case "complete":
        // Emitted only for active or termsAcceptanceRequired connections.
        console.log(event.payload.status);
        break;
      case "error":
        console.error(event.payload.code, event.payload.message);
        break;
    }
  };

  return (
    <View style={styles.container}>
      <MoonPayAuth onEvent={handleEvent} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1 },
});
```

***

## Props

| Prop      | Type                         | Required | Default   | Description                                                        |
| --------- | ---------------------------- | -------- | --------- | ------------------------------------------------------------------ |
| `onEvent` | `(event: AuthEvent) => void` |          | —         | Callback for auth lifecycle events. See [`AuthEvent`](#authevent). |
| `style`   | `ViewStyle`                  |          | `flex: 1` | Container style.                                                   |

### `AuthEvent`

Use `event.kind` to handle each event.

| kind         | Payload           | When you receive it                                                                                         |
| ------------ | ----------------- | ----------------------------------------------------------------------------------------------------------- |
| `"ready"`    | —                 | The auth UI is rendered and ready.                                                                          |
| `"complete"` | `Connection`      | Emitted only when the connection is `active` or `termsAcceptanceRequired`. Credentials are already applied. |
| `"error"`    | `ConnectionError` | The flow encountered an error.                                                                              |

**`ConnectionError`** is discriminated by `code`:

| `code`              | Extra fields                           | Description                                               |
| ------------------- | -------------------------------------- | --------------------------------------------------------- |
| `"validationError"` | `errors: ConfigValidationFieldError[]` | One or more session/client/public-key fields are invalid. |
| `"generic"`         | `message?: string`                     | A generic connection failure.                             |

`ConfigValidationFieldError` entries have `code:
"invalidSessionToken" | "invalidClientToken" | "invalidPublicKey"` and a
developer-facing `message`.

<Callout icon="triangle-exclamation" iconType="regular">
  `"complete"` is emitted only for `active` and `termsAcceptanceRequired`
  connection statuses. If the customer's connection resolves to another status
  (such as `pending` or `unavailable`), no `"complete"` event fires.
</Callout>