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()