<MoonPayAuth />

Inline auth frame for headless and Customer API integrations.

<MoonPayAuth> renders the MoonPay auth frame inline in your layout. It is the declarative alternative to client.setupAuth().

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 Customer API integrations.

Precondition: a clientToken must be present in the client context before mounting this component. The token is populated automatically when client.getConnection() or <MoonPayConnectionCheck> 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.

AuthScreen.tsx

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.
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.

"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.