<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 or pending 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":
        // Check the status: unavailable carries no credentials.
        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	The flow finished. status is active, pending, termsAcceptanceRequired, or unavailable. Credentials are applied only for active and pending.
"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.

Check event.payload.status before you treat "complete" as a successful sign-in. An unavailable connection carries no credentials and can’t be used: show your own message or offer another payment option instead of continuing.