🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
DemoInstallSign in
Socket

@crossmint/client-sdk-react-native-ui

Package Overview
Dependencies
Maintainers
7
Versions
41
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@crossmint/client-sdk-react-native-ui

This package provides a React Native UI for integrating Crossmint authentication and wallet functionality into your mobile apps.

0.5.4
latest
Source
npm
Version published
Weekly downloads
333
-35.84%
Maintainers
7
Weekly downloads
 
Created
Source

Crossmint React Native SDK

This package provides a React Native UI for integrating Crossmint authentication and wallet functionality into your mobile apps.

Installation

pnpm add @crossmint/client-sdk-react-native-ui expo-secure-store expo-web-browser

Authentication with Secure Storage

The React Native SDK uses Expo's SecureStore for secure, encrypted storage of authentication tokens. This provides a platform-native secure storage solution that encrypts sensitive data on the device.

Using the Default Secure Storage

The CrossmintAuthProvider uses SecureStorage by default:

import { CrossmintProvider, CrossmintAuthProvider } from "@crossmint/client-sdk-react-native-ui";

export default function App() {
  return (
    <CrossmintProvider
      apiKey="YOUR_API_KEY"
    >
      <CrossmintAuthProvider>
        {/* Your app content */}
      </CrossmintAuthProvider>
    </CrossmintProvider>
  );
}

Authentication Hooks

Once the providers are set up, you can use the authentication hooks in your components:

import { useCrossmintAuth } from "@crossmint/client-sdk-react-native-ui";

function ProfileScreen() {
  const { user, status, logout, login } = useCrossmintAuth();

  if (status === "logged-out") {
    return (
      <View>
        <Button
          title="Sign in with Google"
          onPress={() => login("google")}
        />
      </View>
    );
  }

  return (
    <View>
      <Text>Welcome, {user?.email}</Text>
      <Button title="Logout" onPress={logout} />
    </View>
  );
}

Custom Storage Provider

If you need to implement a custom storage solution, you can implement the StorageProvider interface and pass it to the CrossmintAuthProvider:

import { CrossmintAuthProvider, type StorageProvider } from "@crossmint/client-sdk-react-native-ui";

// Implement your custom storage provider
class CustomStorage implements StorageProvider {
  async get(key: string): Promise<string | undefined> {
    // Your implementation
  }

  async set(key: string, value: string, expiresAt?: string): Promise<void> {
    // Your implementation
  }

  async remove(key: string): Promise<void> {
    // Your implementation
  }
}

// Use your custom storage provider
function App() {
  const customStorage = new CustomStorage();

  return (
    <CrossmintProvider apiKey="YOUR_API_KEY">
      <CrossmintAuthProvider customStorageProvider={customStorage}>
        {/* Your app content */}
      </CrossmintAuthProvider>
    </CrossmintProvider>
  );
}

For more detailed documentation, please visit the Crossmint Developer Docs.

FAQs

Package last updated on 05 Jun 2025

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts