​
Import

import { useStorage, useStorageItem } from '@0xsequence/connect'

​
Usage

import { useStorage, signEthAuthProof, validateEthProof } from '@0xsequence/connect'
import { useWalletClient, usePublicClient } from 'wagmi'

function App() {
  const { data: walletClient } = useWalletClient()
  const publicClient = usePublicClient()
  const storage = useStorage()
  
  const generateEthAuthProof = async () => {
    if (!walletClient || !publicClient || !storage) {
      return
    }
    
    try {
      // Use storage to generate an auth proof
      const proof = await signEthAuthProof(walletClient, storage)
      console.log('proof:', proof)
      
      const isValid = await validateEthProof(walletClient, publicClient, proof)
      console.log('isValid?:', isValid)
    } catch (e) {
      console.error(e)
    }
  }
  
  return (
    <button onClick={generateEthAuthProof}>
      Generate EthAuth Proof
    </button>
  )
}

​
Return Type

Storage<StorageItem> | null

Returns the Storage instance if available, or null if not configured.

​
useStorageItem

Hook to retrieve a specific item from the Sequence Connect storage.

​
Usage

import { useStorageItem } from '@0xsequence/connect'

function App() {
  const { data: authToken, isLoading } = useStorageItem('authToken')
  
  if (isLoading) {
    return <div>Loading...</div>
  }
  
  return (
    <div>
      {authToken ? 'Authenticated' : 'Not authenticated'}
    </div>
  )
}

​
Parameters

ParameterTypeDescription
keykeyof StorageItemThe key of the storage item to retrieve

​
Return Type

UseQueryResult<StorageItem[K]>

Returns a react-query result containing the storage item data, with the following properties:

PropertyTypeDescription
dataStorageItem[K]The retrieved storage item data
isLoadingbooleanWhether the data is currently loading
isErrorbooleanWhether an error occurred during data fetching
errorErrorThe error object if an error occurred
……Other react-query properties

​
Notes

These hooks provide access to the storage layer used by Sequence Connect for persisting authentication data, wallet state, and other client-side storage needs. The useStorage hook is commonly used for operations that require direct access to the storage layer, such as generating authentication proofs, while useStorageItem provides a convenient way to access specific items with react-query integration.

Was this page helpful?

Suggest edits