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

yarn add @reown/appkit-siwx

bun a @reown/appkit-siwx

pnpm add @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>

Fundamentals

Features

SIWX Implementation

Reown Authentication SIWX Usage

Installation

Usage

Extra configuration

Available Parameters

Examples

Interacting with Reown Authentication

Interactions

`getSessionAccount`

`setSessionAccountMetadata`

`events`

​Reown Authentication SIWX Usage

​Installation

​Usage

​Extra configuration

​Available Parameters

​Examples

​Interacting with Reown Authentication

​Interactions

​getSessionAccount

​setSessionAccountMetadata

​events

Reown Authentication SIWX Usage

Installation

Usage

Extra configuration

Available Parameters

Examples

Interacting with Reown Authentication

Interactions

`getSessionAccount`

`setSessionAccountMetadata`

`events`