Skip to main content

useSecureStorage

The useSecureStorage hook provides functions to interact with secure storage for sensitive data. You can use this for authentication tokens or any sensitive data that requires hardware-backed encryption.

Caution

You can only store one secret per Mini.

Note

Use useSecureStorage for sensitive data like auth tokens, API keys, or PII. It provides hardware-backed encryption on both iOS and Android, ensuring data is protected even if the device is compromised. The tradeoff is slower performance and a limit of one secret per Mini. Use useAsyncStorage for non-sensitive data like preferences or cached content. It supports multiple key-value pairs and is ~3x faster, but stores data in plaintext.

Anchor to useSecureStorage
useSecureStorage()

Anchor to useSecureStorage-returnsReturns

Examples

tsx

import {useEffect} from 'react'

import {useSecureStorage} from '@shopify/shop-minis-react'

export default function MyComponent() {
const {getSecret, setSecret, removeSecret} = useSecureStorage()

useEffect(() => {
async function handleSecureStorageOperations() {
// Get a secret from secure storage
const secret = await getSecret()
console.log({secret})

// Set a secret in secure storage
await setSecret({value: 'Sensitive Data'})

// Remove a secret from secure storage
await removeSecret()
}

handleSecureStorageOperations()
}, [getSecret, setSecret, removeSecret])
}
Was this page helpful?