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

UseSecureStorageReturns

getSecret
Get the secret from the secure storage.
```
() => Promise<string>
```
removeSecret
Remove the secret from the secure storage.
```
() => Promise<void>
```
setSecret
Set a secret in the secure storage.
```
(params: SetSecretParams) => Promise<void>
```

SetSecretParams

value
```
string
```

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])

}

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?

Anchor to useSecureStorageuseSecureStorage()

Anchor to useSecureStorage-returnsReturns

UseSecureStorageReturns

SetSecretParams

Anchor to useSecureStorage
useSecureStorage()