feat(auth): AppKit Auth

.changeset/config.json

@@ -7,5 +7,5 @@
   "access": "public",
   "baseBranch": "main",
   "updateInternalDependencies": "patch",
-  "ignore": ["@examples/*"]
+  "ignore": ["@examples/*", "@services/*"]
 }

.changeset/slimy-rules-wave.md

@@ -0,0 +1,23 @@
+---
+'@reown/appkit-adapter-wagmi': patch
+'@reown/appkit-scaffold-ui': patch
+'@apps/laboratory': patch
+'@reown/appkit': patch
+'@reown/appkit-common': patch
+'@reown/appkit-core': patch
+'@reown/appkit-siwe': patch
+'@reown/appkit-ui': patch
+'@apps/demo': patch
+'@apps/gallery': patch
+'@reown/appkit-adapter-ethers': patch
+'@reown/appkit-adapter-ethers5': patch
+'@reown/appkit-adapter-polkadot': patch
+'@reown/appkit-adapter-solana': patch
+'@reown/appkit-utils': patch
+'@reown/appkit-cdn': patch
+'@reown/appkit-experimental': patch
+'@reown/appkit-polyfills': patch
+'@reown/appkit-wallet': patch
+---
+
+Introduces Auth feature over SIWE

apps/laboratory/next.config.mjs

@@ -14,7 +14,7 @@ const cspHeader = `
   style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;
   img-src * 'self' data: blob: https://walletconnect.org https://walletconnect.com https://secure.walletconnect.com https://secure.walletconnect.org https://tokens-data.1inch.io https://tokens.1inch.io https://ipfs.io https://appkit-lab.reown.org;
   font-src 'self' https://fonts.gstatic.com;
-  connect-src 'self' https://react-wallet.walletconnect.com https://rpc.walletconnect.com https://rpc.walletconnect.org https://relay.walletconnect.com https://relay.walletconnect.org wss://relay.walletconnect.com wss://relay.walletconnect.org https://pulse.walletconnect.com https://pulse.walletconnect.org https://api.web3modal.com https://api.web3modal.org wss://www.walletlink.org https://o1095249.ingest.sentry.io https://quote-api.jup.ag;
+  connect-src 'self' https://react-wallet.walletconnect.com https://rpc.walletconnect.com https://rpc.walletconnect.org https://relay.walletconnect.com https://relay.walletconnect.org wss://relay.walletconnect.com wss://relay.walletconnect.org https://pulse.walletconnect.com https://pulse.walletconnect.org https://api.web3modal.com https://api.web3modal.org wss://www.walletlink.org https://o1095249.ingest.sentry.io https://quote-api.jup.ag http://localhost:8787;
   frame-src 'self' https://verify.walletconnect.com https://verify.walletconnect.org https://secure.walletconnect.com https://secure.walletconnect.org https://secure.reown.com https://widget.solflare.com/ ${secureSiteDomain}/;
   object-src 'none';
   base-uri 'self';

apps/laboratory/src/components/AppKitAuthInfo.tsx

@@ -0,0 +1,18 @@
+'use client'
+
+import * as React from 'react'
+
+import { AppKitInfo } from './AppKitInfo'
+import { useSiweSession } from '@reown/appkit-siwe/react'
+
+export function AppKitAuthInfo() {
+  const { session, status } = useSiweSession()
+
+  return (
+    <AppKitInfo
+      address={session?.address}
+      chainId={session?.chainId}
+      heading={`SIWE status: ${status}`}
+    />
+  )
+}

apps/laboratory/src/components/AppKitInfo.tsx

@@ -14,14 +14,21 @@ type AppKitInfoProps = {
   caipAddress?: string
   address?: string
   chainId?: number | string
-  clientId?: string
+  clientId?: string | null
+  heading?: string
 }
 
-export function AppKitInfo({ caipAddress, address, chainId, clientId }: AppKitInfoProps) {
+export function AppKitInfo({
+  caipAddress,
+  address,
+  chainId,
+  clientId,
+  heading = 'Account Information'
+}: AppKitInfoProps) {
   return (
     <Card marginTop={10} marginBottom={10}>
       <CardHeader>
-        <Heading size="md">Account Information</Heading>
+        <Heading size="md">{heading}</Heading>
       </CardHeader>
 
       <CardBody>

apps/laboratory/src/components/Siwe/SiweData.tsx

@@ -9,7 +9,7 @@ import {
   Text
 } from '@chakra-ui/react'
 import { useSession } from 'next-auth/react'
-import type { SIWESession } from '@reown/appkit-siwe'
+import type { SIWESession } from '@reown/appkit-siwe/react'
 
 export function SiweData() {
   const { data, status } = useSession()

apps/laboratory/src/pages/api/auth/[...nextauth].ts

@@ -1,7 +1,11 @@
 import type { NextApiRequest, NextApiResponse } from 'next'
 import nextAuth from 'next-auth'
 import credentialsProvider from 'next-auth/providers/credentials'
-import { type SIWESession, getChainIdFromMessage, getAddressFromMessage } from '@reown/appkit-siwe'
+import {
+  type SIWESession,
+  getChainIdFromMessage,
+  getAddressFromMessage
+} from '@reown/appkit-siwe/react'
 import { verifySignature } from '../../../utils/SignatureUtil'
 
 declare module 'next-auth' {

apps/laboratory/src/pages/library/ethers-auth.tsx

@@ -0,0 +1,39 @@
+import { createAppKit } from '@reown/appkit/react'
+import { ThemeStore } from '../../utils/StoreUtil'
+import { ConstantsUtil } from '../../utils/ConstantsUtil'
+import { EthersTests } from '../../components/Ethers/EthersTests'
+import { AppKitButtons } from '../../components/AppKitButtons'
+import { SiweData } from '../../components/Siwe/SiweData'
+import { EthersModalInfo } from '../../components/Ethers/EthersModalInfo'
+import { EthersAdapter } from '@reown/appkit-adapter-ethers'
+import { mainnet } from '@reown/appkit/networks'
+
+const networks = ConstantsUtil.EvmNetworks
+
+const ethersAdapter = new EthersAdapter()
+
+const modal = createAppKit({
+  adapters: [ethersAdapter],
+  networks,
+  defaultNetwork: mainnet,
+  projectId: ConstantsUtil.ProjectId,
+  features: {
+    analytics: true,
+    socials: ['google', 'x', 'discord', 'farcaster', 'github', 'apple', 'facebook']
+  },
+  termsConditionsUrl: 'https://reown.com/terms-of-service',
+  privacyPolicyUrl: 'https://reown.com/privacy-policy'
+})
+
+ThemeStore.setModal(modal)
+
+export default function Ethers() {
+  return (
+    <>
+      <AppKitButtons />
+      <EthersModalInfo />
+      <SiweData />
+      <EthersTests />
+    </>
+  )
+}

apps/laboratory/src/pages/library/wagmi-auth.tsx

@@ -0,0 +1,46 @@
+import { createAppKit } from '@reown/appkit/react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { WagmiProvider } from 'wagmi'
+import { AppKitButtons } from '../../components/AppKitButtons'
+import { WagmiTests } from '../../components/Wagmi/WagmiTests'
+import { ThemeStore } from '../../utils/StoreUtil'
+import { ConstantsUtil } from '../../utils/ConstantsUtil'
+import { SiweData } from '../../components/Siwe/SiweData'
+import { WagmiModalInfo } from '../../components/Wagmi/WagmiModalInfo'
+import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'
+import { mainnet } from '@reown/appkit/networks'
+
+const queryClient = new QueryClient()
+
+const networks = ConstantsUtil.EvmNetworks
+
+const wagmiAdapter = new WagmiAdapter({
+  ssr: true,
+  networks,
+  projectId: ConstantsUtil.ProjectId
+})
+
+const modal = createAppKit({
+  adapters: [wagmiAdapter],
+  networks,
+  defaultNetwork: mainnet,
+  projectId: ConstantsUtil.ProjectId,
+  features: {
+    analytics: true
+  }
+})
+
+ThemeStore.setModal(modal)
+
+export default function Wagmi() {
+  return (
+    <WagmiProvider config={wagmiAdapter.wagmiConfig}>
+      <QueryClientProvider client={queryClient}>
+        <AppKitButtons />
+        <WagmiModalInfo />
+        <SiweData />
+        <WagmiTests />
+      </QueryClientProvider>
+    </WagmiProvider>
+  )
+}

apps/laboratory/src/utils/DataUtil.ts

@@ -36,6 +36,12 @@ export const wagmiSdkOptions: SdkOption[] = [
     link: '/library/wagmi-siwe/',
     description: 'Configuration using wagmi and implementing sign in with ethereum'
   },
+  {
+    title: 'AppKit Auth - Hosted SIWE',
+    link: '/library/wagmi-auth/',
+    description:
+      'Configuration using wagmi and implementing sign in with ethereum with a hosted server'
+  },
   {
     title: 'Without Email',
     link: '/library/wagmi-no-email/',
@@ -69,6 +75,12 @@ export const ethersSdkOptions: SdkOption[] = [
     link: '/library/ethers-siwe/',
     description: 'Configuration using ethers and implementing sign in with ethereum'
   },
+  {
+    title: 'AppKit Auth - Hosted SIWE',
+    link: '/library/ethers-auth/',
+    description:
+      'Configuration using ethers and implementing sign in with ethereum with a hosted server'
+  },
   {
     title: 'Without Email',
     link: '/library/ethers-no-email/',

apps/laboratory/src/utils/SiweUtils.ts

@@ -1,9 +1,10 @@
-import { getCsrfToken, signIn, signOut, getSession } from 'next-auth/react'
-import type { SIWEVerifyMessageArgs, SIWECreateMessageArgs, SIWESession } from '@reown/appkit-siwe'
-import { createSIWEConfig, formatMessage } from '@reown/appkit-siwe'
-import { ConstantsUtil } from './ConstantsUtil'
-
-const chains = ConstantsUtil.EvmNetworks
+import type {
+  SIWECreateMessageArgs,
+  SIWESession,
+  SIWEVerifyMessageArgs
+} from '@reown/appkit-siwe/react'
+import { createSIWEConfig, formatMessage } from '@reown/appkit-siwe/react'
+import { getCsrfToken, getSession, signIn, signOut } from 'next-auth/react'
 
 export const siweConfig = createSIWEConfig({
   signOutOnAccountChange: true,
@@ -13,7 +14,6 @@ export const siweConfig = createSIWEConfig({
   getMessageParams: async () => ({
     domain: window.location.host,
     uri: window.location.origin,
-    chains: chains.map(chain => chain.id as number),
     statement: 'Please sign with your account',
     iat: new Date().toISOString()
   }),
@@ -29,7 +29,7 @@ export const siweConfig = createSIWEConfig({
   getSession: async () => {
     const session = await getSession()
     if (!session) {
-      throw new Error('Failed to get session!')
+      return null
     }
 
     const { address, chainId } = session as unknown as SIWESession

apps/laboratory/tests/shared/fixtures/w3m-external-fixture.ts

@@ -1,6 +1,6 @@
-import type { ModalFixture } from './w3m-fixture'
 import { ModalPage } from '../pages/ModalPage'
 import { timingFixture } from './timing-fixture'
+import type { ModalFixture } from './w3m-fixture'
 
 export const testMExternal = timingFixture.extend<ModalFixture>({
   library: ['wagmi', { option: true }],

apps/laboratory/tests/shared/utils/project.ts

@@ -1,13 +1,8 @@
 import { devices } from '@playwright/test'
 import { DESKTOP_DEVICES, MOBILE_DEVICES } from '../constants/devices'
 
-const LIBRARIES = ['ethers', 'ethers5', 'wagmi', 'solana'] as const
-const MULTICHAIN_LIBRARIES = [
-  'multichain-basic',
-  'multichain-ethers-solana',
-  'multichain-ethers5-solana',
-  'multichain-wagmi-solana'
-] as const
+const LIBRARIES = ['wagmi', 'solana'] as const
+const MULTICHAIN_LIBRARIES = ['multichain-basic', 'multichain-wagmi-solana'] as const
 
 const LIBRARY_PERMUTATIONS = DESKTOP_DEVICES.flatMap(device =>
   LIBRARIES.map(library => ({ device, library }))

apps/laboratory/tests/shared/validators/ModalValidator.ts

@@ -1,9 +1,9 @@
-import { expect } from '@playwright/test'
 import type { Page } from '@playwright/test'
+import { expect } from '@playwright/test'
+import type { CaipNetworkId } from '@reown/appkit'
 import { ConstantsUtil } from '../../../src/utils/ConstantsUtil'
-import { getMaximumWaitConnections } from '../utils/timeouts'
 import { verifySignature } from '../../../src/utils/SignatureUtil'
-import type { CaipNetworkId } from '@reown/appkit'
+import { getMaximumWaitConnections } from '../utils/timeouts'
 
 const MAX_WAIT = getMaximumWaitConnections()
 

packages/adapters/ethers/src/client.ts

@@ -1,5 +1,8 @@
-import type { AppKitOptions, AppKitOptionsWithCaipNetworks } from '@reown/appkit'
+import { CoinbaseWalletSDK, type ProviderInterface } from '@coinbase/wallet-sdk'
+import type { AppKit, AppKitOptions, AppKitOptionsWithCaipNetworks } from '@reown/appkit'
+import { WcConstantsUtil } from '@reown/appkit'
 import {
+  ConstantsUtil as CommonConstantsUtil,
   SafeLocalStorage,
   SafeLocalStorageKeys,
   type AdapterType,
@@ -8,45 +11,44 @@ import {
   type CaipNetworkId,
   type ChainNamespace
 } from '@reown/appkit-common'
+import type {
+  ConnectionControllerClient,
+  NetworkControllerClient,
+  PublicStateControllerState
+} from '@reown/appkit-core'
 import {
   AccountController,
+  AlertController,
   ChainController,
+  ConstantsUtil as CoreConstantsUtil,
   CoreHelperUtil,
-  AlertController,
   type CombinedProvider,
   type Connector
 } from '@reown/appkit-core'
+import {
+  CaipNetworksUtil,
+  ConstantsUtil,
+  ErrorUtil,
+  HelpersUtil,
+  PresetsUtil
+} from '@reown/appkit-utils'
 import {
   EthersHelpersUtil,
+  type Address,
   type Provider,
-  type ProviderType,
-  type Address
+  type ProviderType
 } from '@reown/appkit-utils/ethers'
-import type { AppKit } from '@reown/appkit'
 import {
   W3mFrameHelpers,
   W3mFrameProvider,
   W3mFrameRpcConstants,
   type W3mFrameTypes
 } from '@reown/appkit-wallet'
-import { ConstantsUtil as CoreConstantsUtil } from '@reown/appkit-core'
-import { ConstantsUtil as CommonConstantsUtil } from '@reown/appkit-common'
-import {
-  CaipNetworksUtil,
-  ConstantsUtil,
-  ErrorUtil,
-  HelpersUtil,
-  PresetsUtil
-} from '@reown/appkit-utils'
+import { W3mFrameProviderSingleton } from '@reown/appkit/auth-provider'
+import { ProviderUtil, type ProviderIdType } from '@reown/appkit/store'
 import UniversalProvider from '@walletconnect/universal-provider'
-import type { ConnectionControllerClient, NetworkControllerClient } from '@reown/appkit-core'
-import { WcConstantsUtil } from '@reown/appkit'
-import { EthersMethods } from './utils/EthersMethods.js'
 import { formatEther, InfuraProvider, JsonRpcProvider } from 'ethers'
-import type { PublicStateControllerState } from '@reown/appkit-core'
-import { ProviderUtil, type ProviderIdType } from '@reown/appkit/store'
-import { CoinbaseWalletSDK, type ProviderInterface } from '@coinbase/wallet-sdk'
-import { W3mFrameProviderSingleton } from '@reown/appkit/auth-provider'
+import { EthersMethods } from './utils/EthersMethods.js'
 
 // -- Types ---------------------------------------------------------------------
 export interface AdapterOptions {
@@ -102,8 +104,6 @@ export class EthersAdapter {
 
   public connectionControllerClient?: ConnectionControllerClient
 
-  public siweControllerClient = this.options?.siweConfig
-
   public tokens = HelpersUtil.getCaipTokens(this.options?.tokens)
 
   public defaultCaipNetwork: CaipNetwork | undefined = undefined
@@ -329,9 +329,11 @@ export class EthersAdapter {
         const providerId = ProviderUtil.state.providerIds['eip155']
 
         this.appKit?.setClientId(null)
-        if (this.options?.siweConfig?.options?.signOutOnDisconnect) {
+        if (this.appKit?.getIsSiweEnabled()) {
           const { SIWEController } = await import('@reown/appkit-siwe')
-          await SIWEController.signOut()
+          if (SIWEController.state._client?.options.signOutOnDisconnect) {
+            await SIWEController.signOut()
+          }
         }
 
         const disconnectConfig = {
@@ -629,7 +631,8 @@ export class EthersAdapter {
       }
 
       if (provider) {
-        const { addresses, chainId } = await EthersHelpersUtil.getUserInfo(provider)
+        const { addresses } = await EthersHelpersUtil.getUserInfo(provider)
+        const chainId = this.appKit?.getCaipNetwork()?.id
         const firstAddress = addresses?.[0]
         const caipNetwork = this.caipNetworks.find(c => c.id === chainId) ?? this.caipNetworks[0]
         const caipAddress =