> ## Documentation Index
> Fetch the complete documentation index at: https://docs.crossmint.com/llms.txt
> Use this file to discover all available pages before exploring further.
# React Native
> Create user wallets from your Expo app in under 5 minutes
**This page has been updated for Wallets SDK V1.** If you are using the previous version,
see the [previous version of this page](/wallets/v0/quickstarts/react-native) or the [V1 migration guide](/wallets/guides/migrate-to-v1).
See a full working example.
Run the following command to install the SDK:
Add the necessary Crossmint providers to your app. This example uses [Crossmint Auth](/authentication/introduction)
but you can use [any authentication provider of your choice](/wallets/guides/bring-your-own-auth).
With the current setup, a wallet will be created automatically on login.
See all supported chains [here](/introduction/supported-chains).
```tsx providers.tsx theme={null}
import {
CrossmintProvider,
CrossmintAuthProvider,
CrossmintWalletProvider,
} from "@crossmint/client-sdk-react-native-ui";
type ProvidersProps = {
children: React.ReactNode;
};
export default function CrossmintProviders(
{ children }: ProvidersProps
) {
return (
{children}
);
}
```
For detailed configuration options, see the [React Native SDK Reference](/sdk-reference/wallets/react-native/providers#crossmintwalletprovider).
Crossmint Auth in React Native is headless. You will need to implement your own login and logout buttons.
```tsx index.tsx theme={null}
import React, { useEffect, useState } from "react";
import {
View,
Text,
TextInput,
TouchableOpacity,
ActivityIndicator,
Alert,
} from "react-native";
import {
useCrossmintAuth,
useWallet,
} from "@crossmint/client-sdk-react-native-ui";
import * as Linking from "expo-linking";
export default function Index() {
const {
loginWithOAuth,
createAuthSession,
user,
crossmintAuth,
logout,
status,
} = useCrossmintAuth();
const { wallet } = useWallet();
// Login state
const [email, setEmail] = useState("");
const [emailId, setEmailId] = useState("");
const [otpSent, setOtpSent] = useState(false);
const [otp, setOtp] = useState("");
const [isPending, setIsPending] = useState(false);
// Handle OAuth callback
const url = Linking.useURL();
// Handle OAuth callback
useEffect(() => {
if (url != null) {
createAuthSession(url);
}
}, [url, createAuthSession]);
// Login functions
const sendOtp = async () => {
if (!email.trim()) {
Alert.alert("Error", "Please enter a valid email address");
return;
}
setIsPending(true);
try {
const res = await crossmintAuth?.sendEmailOtp(email);
setEmailId(res.emailId);
setOtpSent(true);
} catch (error) {
console.error("sendOtp error:", error);
const message =
error instanceof Error
? error.message
: "Failed to send OTP.";
Alert.alert("Error", message);
} finally {
setIsPending(false);
}
};
const verifyOtp = async () => {
if (!otp.trim()) {
Alert.alert("Error", "Please enter the OTP code");
return;
}
setIsPending(true);
try {
const oneTimeSecret =
await crossmintAuth?.confirmEmailOtp(
email,
emailId,
otp
);
await createAuthSession(oneTimeSecret);
} catch (error) {
console.error("verifyOtp error:", error);
const message =
error instanceof Error
? error.message
: "Invalid OTP. Try again.";
Alert.alert("Error", message);
} finally {
setIsPending(false);
}
};
const handleLogout = async () => {
try {
logout();
// Reset login state
setEmail("");
setEmailId("");
setOtpSent(false);
setOtp("");
} catch (error) {
Alert.alert("Error", "Failed to logout. Please try again.");
}
};
// Loading state
if (status === "initializing") {
return (
Initializing...
);
}
// Login screen
if (status === "logged-out") {
return (
Login
{!otpSent ? (
{isPending ? (
) : (
Send OTP
)}
) : (
<>
{isPending ? (
) : (
Verify OTP
)}
setOtpSent(false)}
disabled={isPending}
>
Back
)}
OR
loginWithOAuth("google")
}
>
Sign in with Google
);
}
// Main app screen (logged in)
return (
Welcome!
Logout
User Info:
Email: {user?.email}
User ID: {user?.id}
{wallet && (
Wallet Info:
Address: {wallet.address}
)}
App Content:
You are now logged in and can
access your wallet!
);
}
```
## Launching in Production
For production, some changes are required:
1. Create a developer account on the production console
2. Create a production client API key on the API Keys page with the API scopes `users.create`, `users.read`, `wallets.read`, `wallets.create`, `wallets:transactions.create`, `wallets:transactions.sign`, `wallets:balance.read`, `wallets.fund`
3. Replace your test API key with the production key
4. **Use your own authentication provider**: For production applications, Crossmint recommends using [third-party authentication](/wallets/guides/bring-your-own-auth) with providers like Auth0, Firebase, or Supabase, rather than Crossmint Auth. Configure JWT authentication in the Crossmint Console under API Keys > JWT Authentication.
## Learn More
Check the balance of a wallet.
Send tokens between wallets.
Register operational signers on a wallet.
## Other Links
Deep dive into API reference docs.
Contact our sales team for support.