Skip to main content

​
Import

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

​
Usage

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

function App() {
  const sessionState = useSequenceSessionState()

  // Check if sessions are initialized
  if (!sessionState.isInitialized) {
    return <div>Session state is not initialized</div>
  }

  return (
    <div>
      <p>Wallet: {sessionState.walletAddress}</p>
      <p>Login Method: {sessionState.loginMethod}</p>
      <p>User Email: {sessionState.userEmail}</p>
      <p>Number of active explicit sessions: {sessionState.sessions.filter(s => s.type === 'explicit').length}</p>
    </div>
  )
}

​
Return Type

interface SessionState {
  isInitialized: boolean
  walletAddress: `0x${string}` | null
  sessions: Session[]
  loginMethod: string | null
  userEmail: string | null
}
PropertyTypeDescription
isInitializedbooleanWhether the session data is ready. Always check this before accessing other properties.
walletAddress`0x${string}` | nullThe connected wallet address, or null if not connected.
sessionsSession[]Array of active sessions. Each session has a type of 'implicit' or 'explicit'.
loginMethodstring | nullThe authentication method used.
userEmailstring | nullThe associated email address, if any.

​
Checking Session Types

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

function SessionStatus() {
  const sessionState = useSequenceSessionState()

  if (!sessionState.isInitialized) {
    return <div>Loading session...</div>
  }

  const hasSessions = sessionState.sessions.length > 0
  const hasImplicitSession = sessionState.sessions.some(s => s.type === 'implicit')
  const hasExplicitSession = sessionState.sessions.some(s => s.type === 'explicit')

  return (
    <div>
      <h3>Session Status</h3>
      <p>Initialized: {sessionState.isInitialized ? 'Yes' : 'No'}</p>
      <p>Wallet: {sessionState.walletAddress || 'Not connected'}</p>
      <p>Has Sessions: {hasSessions ? 'Yes' : 'No'}</p>
      <p>Has Implicit Session: {hasImplicitSession ? 'Yes' : 'No'}</p>
      <p>Has Explicit Session: {hasExplicitSession ? 'Yes' : 'No'}</p>
      <p>Login Method: {sessionState.loginMethod || 'Unknown'}</p>
      <p>User Email: {sessionState.userEmail || 'Not available'}</p>
    </div>
  )
}
This hook automatically updates when session information changes.