Skip to main content

​
Import

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

​
useStorage

Provides access to the connect client’s storage instance. Useful for operations that require direct access to the authentication storage layer, such as generating EthAuth proofs.

​
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 {
      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

​
useStorageItem

Retrieves an individual item from the storage layer. Returns a react-query result object.

​
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>
  )
}
These hooks provide access to the storage layer used by the connect client for persisting authentication data, wallet state, and other client-side storage needs.