use
hook
The hook provides functions to interact with secure storage. It allows you to store, retrieve, and manage sensitive data that requires encryption and secure handling. You can currently only set one secret per Mini.
Anchor to useSecureStorageuse
use
- getSecret() => Promise<string>
Get the secret from the secure storage.
- removeSecret() => Promise<void>
Remove the secret from the secure storage.
- setSecret(params: SetSecretParams) => Promise<void>
Set a secret in the secure storage.
UseSecureStorageReturns
UseSecureStorageReturns
UseSecureStorageGeneratedType
UseSecureStorageReturnsexport function useSecureStorage(): UseSecureStorageReturns {
const {getSecret, setSecret, removeSecret} = useShopActions()
return {
getSecret: useHandleAction(getSecret),
setSecret: useHandleAction(setSecret),
removeSecret: useHandleAction(removeSecret),
}
}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>
interface UseSecureStorageReturns {
/**
* Get the secret from the secure storage.
*/
getSecret: () => Promise<string | null>
/**
* Set a secret in the secure storage.
*/
setSecret: (params: SetSecretParams) => Promise<void>
/**
* Remove the secret from the secure storage.
*/
removeSecret: () => Promise<void>
}SetSecretParams
- value
string
export interface SetSecretParams {
value: string
}Was this section helpful?
Example code
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
Example code
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]) }