​
Reown Authentication SIWX Usage

Reown Authentication is our flagship SIWX (Sign In With X) solution - the recommended way to handle user authentication for modern web3 applications. Built specifically for multi-chain environments, it abstracts away the complexity of validating wallets across EVM, Solana, and Bitcoin networks. With Reown Authentication you will be able to see and control the sessions of your users, get insights and much more. Read more about Reown Authentication features in the dedicated documentation.
ReownAuthentication was previously named CloudAuthSIWX, it has been renamed since version 1.7.13. If you were using the previous class, you will not need to update your code, both class names work identically.

​
Installation

npm install @reown/appkit-siwx

​
Usage

import { createAppKit } from '@reown/appkit'
// Add the following code line
import { ReownAuthentication } from '@reown/appkit-siwx'

const appkit = createAppKit({
  projectId,
  networks,
  metadata,
  // Add the following code line
  siwx: new ReownAuthentication()
})
Now your Dapp is ready to use the Reown Authentication within your SIWX configuration.

​
Extra configuration

With ReownAuthentication you don’t need to do anything else, it will work out of the box, but you can configure some parameters to customize the experience.

​
Available Parameters

new ReownAuthentication({
  localAuthStorageKey?: string    // Default: '@appkit/siwx-auth-token'
  localNonceStorageKey?: string   // Default: '@appkit/siwx-nonce-token'
  required?: boolean              // Default: true
})

​
Examples

Custom storage keys: 
new ReownAuthentication({
  localAuthStorageKey: 'my-app-auth',
  localNonceStorageKey: 'my-app-nonce'
})
Optional authentication (wallet stays connected if user denies signing): 
new ReownAuthentication({
  required: false
})

​
Interacting with Reown Authentication

AppKit provides a useAppKitSIWX hook that allows you to interact with Reown Authentication. This hook provides a set of methods to manage sessions, retrieve user information, and update session metadata. 
import type { ReownAuthentication } from '@reown/appkit-siwx'
import { useAppKitSIWX } from '@reown/appkit-siwx/react'

function Component() {
  // ...
  const siwx = useAppKitSIWX<ReownAuthentication>()
  // ...
}

​
Interactions

​
getSessionAccount

You can retrieve the session account data using the getSessionAccount method: 
function Component() {
  // ...

  const siwx = useAppKitSIWX<ReownAuthentication>()
  const [sessionAccount, setSessionAccount] = useState<ReownAuthentication.SessionAccount>()

  useEffect(() => {
    if (!siwx) return

    siwx.getSessionAccount().then(setSessionAccount)
  }, [siwx])

  // ...
}

​
setSessionAccountMetadata

Reown Authentication provides a way for you to store arbitrary information about your users through the AppKit Account Metadata. Updating the session account metadata is done using the setSessionAccountMetadata method: 
function Component() {
  // ...

  const siwx = useAppKitSIWX<ReownAuthentication>()

  const mutateMetadata = async (metadata: object) => {
    if (!siwx) return

    await siwx.setSessionAccountMetadata(metadata)
  }
}
You may use the session metadata through the getSessionAccount method: 
function Component() {
  // ...

  const siwx = useAppKitSIWX<ReownAuthentication>()

  const queryMetadata = async () => {
    if (!siwx) return

    const account = await siwx.getSessionAccount()

    return account.appKitAccount?.metadata
  }

  // ...
}

​
events

Reown Authentication provides events that you can listen to for session management and authentication state changes: 
import type { SIWXSession, ReownAuthentication } from '@reown/appkit-siwx'
import { useAppKitSIWX } from '@reown/appkit-siwx/react'

function Component() {
  // ...

  const siwx = useAppKitSIWX<ReownAuthentication>()

  useEffect(() => {
    if (!siwx) return

    // Add event listeners
    const unsubscribe = siwx.on('sessionChanged', (session: SIWXSession | undefined) => {
      console.log('Session changed:', session)
    })

    // Cleanup listeners
    return () => {
      unsubscribe()
      // or
      siwx.removeAllListeners()
    }
  }, [siwx])

  // ...
}