​
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 composable that allows you to grab and interact with Reown Authentication.

<script setup>
import type { ReownAuthentication } from '@reown/appkit-siwx'
import { useAppKitSIWX } from '@reown/appkit-siwx/vue'

const siwx = useAppKitSIWX<ReownAuthentication>()
</script>

​
Interactions

​
getSessionAccount

You can retrieve the session account data using the getSessionAccount method:

<script setup>
import { ref, onMounted } from 'vue'
import type { ReownAuthentication } from '@reown/appkit-siwx'
import { useAppKitSIWX } from '@reown/appkit-siwx/vue'

const siwx = useAppKitSIWX<ReownAuthentication>()
const sessionAccount = ref()

onMounted(async () => {
  if (!siwx.value) return

  sessionAccount.value = await siwx.value.getSessionAccount()
})
</script>

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

<script setup>
import type { ReownAuthentication } from '@reown/appkit-siwx'
import { useAppKitSIWX } from '@reown/appkit-siwx/vue'

const siwx = useAppKitSIWX<ReownAuthentication>()

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

  await siwx.value.setSessionAccountMetadata(metadata)
}
</script>

You may use the session metadata through the getSessionAccount method:

<script setup>
import type { ReownAuthentication } from '@reown/appkit-siwx'
import { useAppKitSIWX } from '@reown/appkit-siwx/vue'

const siwx = useAppKitSIWX<ReownAuthentication>()

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

  const account = await siwx.value.getSessionAccount()

  return account.appKitAccount?.metadata
}
</script>

​
events

Reown Authentication provides events that you can listen to for session management and authentication state changes:

<script setup>
import { onMounted, onUnmounted } from 'vue'
import type { SIWXSession, ReownAuthentication } from '@reown/appkit-siwx'
import { useAppKitSIWX } from '@reown/appkit-siwx/vue'

const siwx = useAppKitSIWX<ReownAuthentication>()

onMounted(() => {
  if (!siwx.value) return

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

  // Cleanup listeners
  onUnmounted(() => {
    unsubscribe()
    // or
    siwx.value.removeAllListeners()
  })
})
</script>