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/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,40 @@
+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',
+  enableAuth: true
+})
+
+ThemeStore.setModal(modal)
+
+export default function Ethers() {
+  return (
+    <>
+      <AppKitButtons />
+      <EthersModalInfo />
+      <SiweData />
+      <EthersTests />
+    </>
+  )
+}

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

@@ -0,0 +1,47 @@
+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
+  },
+  enableAuth: 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/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()