Add Sign-In with Ethereum support

Author: Markeljan

app/sign-in/page.tsx

@@ -0,0 +1,45 @@
+import type { Metadata } from "next"
+
+import { auth } from "@/auth"
+import { SignInCard } from "@/components/sign-in/sign-in-card"
+
+export const metadata: Metadata = {
+  title: "Sign in",
+  description: "Authenticate with GitHub or Sign-In with Ethereum to access Web3GPT.",
+}
+
+type SignInPageProps = {
+  searchParams?: Record<string, string | string[] | undefined>
+}
+
+function resolveRedirect(searchParams: SignInPageProps["searchParams"]) {
+  const nextParam = searchParams?.next
+  const rawValue = Array.isArray(nextParam) ? nextParam[0] : nextParam
+  if (!rawValue) return "/"
+
+  let decoded = rawValue
+  try {
+    decoded = decodeURIComponent(rawValue)
+  } catch {
+    decoded = rawValue
+  }
+
+  if (!decoded.startsWith("/")) return "/"
+  if (decoded.startsWith("//")) return "/"
+  return decoded
+}
+
+export default async function SignInPage({ searchParams }: SignInPageProps) {
+  const session = await auth()
+  const redirectTo = resolveRedirect(searchParams)
+
+  return (
+    <div className="relative flex min-h-[calc(100vh-4rem)] items-center justify-center px-4 py-10">
+      <div
+        className="absolute inset-0 -z-10 bg-gradient-to-br from-background via-background/80 to-background"
+        aria-hidden
+      />
+      <SignInCard session={session} redirectTo={redirectTo} />
+    </div>
+  )
+}

auth.ts

@@ -1,49 +1,195 @@
 import NextAuth, { type DefaultSession } from "next-auth"
+import Credentials from "next-auth/providers/credentials"
 import GitHub from "next-auth/providers/github"
+import { SiweMessage } from "siwe"
 
-import { storeUser } from "@/lib/data/kv"
+import { getUserIdByWallet, storeUser } from "@/lib/data/kv"
 
 declare module "next-auth" {
   interface Session extends DefaultSession {
     user: {
       id: string
+      walletAddress?: string | null
+      githubId?: string | null
     } & DefaultSession["user"]
   }
 }
 
+declare module "next-auth/jwt" {
+  interface JWT {
+    id?: string
+    walletAddress?: string | null
+    githubId?: string | null
+  }
+}
+
+function getCsrfTokenFromRequest(request: Request) {
+  const cookieHeader = request.headers.get("cookie")
+  if (!cookieHeader) return undefined
+
+  const csrfCookie = cookieHeader
+    .split(";")
+    .map((part) => part.trim())
+    .find((part) => part.startsWith("next-auth.csrf-token="))
+
+  if (!csrfCookie) return undefined
+
+  const [, value] = csrfCookie.split("=")
+  return decodeURIComponent(value ?? "").split("|")[0]
+}
+
+function resolveDomain(request: Request) {
+  const origin = request.headers.get("origin")
+  if (origin) {
+    return new URL(origin).host
+  }
+
+  const forwardedHost = request.headers.get("x-forwarded-host")
+  const forwardedProto = request.headers.get("x-forwarded-proto") ?? "https"
+  if (forwardedHost) {
+    return new URL(`${forwardedProto}://${forwardedHost}`).host
+  }
+
+  return new URL(request.url).host
+}
+
 export const {
   handlers: { GET, POST },
   auth,
   signIn,
   signOut,
 } = NextAuth({
-  providers: [GitHub],
+  providers: [
+    Credentials({
+      name: "Ethereum",
+      credentials: {
+        message: {
+          label: "Message",
+          type: "text",
+          placeholder: "0x0",
+        },
+        signature: {
+          label: "Signature",
+          type: "text",
+          placeholder: "0x0",
+        },
+      },
+      async authorize(credentials, request) {
+        try {
+          const message = credentials?.message
+          const signature = credentials?.signature
+
+          if (!message || typeof message !== "string") {
+            return null
+          }
+
+          if (!signature || typeof signature !== "string") {
+            return null
+          }
+
+          const siweMessage = new SiweMessage(JSON.parse(message))
+          const nonce = getCsrfTokenFromRequest(request)
+          if (!nonce) {
+            return null
+          }
+
+          const domain = resolveDomain(request)
+          const verification = await siweMessage.verify({
+            signature,
+            nonce,
+            domain,
+          })
+
+          if (!verification.success) {
+            return null
+          }
+
+          const normalizedAddress = siweMessage.address.toLowerCase()
+          const linkedUserId = await getUserIdByWallet(normalizedAddress)
+
+          return {
+            id: linkedUserId ?? normalizedAddress,
+            address: siweMessage.address,
+            walletAddress: siweMessage.address,
+          }
+        } catch (error) {
+          console.error("Failed SIWE authorization", error)
+          return null
+        }
+      },
+    }),
+    GitHub,
+  ],
+  session: {
+    strategy: "jwt",
+  },
   callbacks: {
-    async jwt({ token, profile }) {
-      if (profile?.id) {
+    async jwt({ token, user, account, profile }) {
+      if (account?.provider === "credentials" && user) {
+        const walletAddress =
+          (user as { walletAddress?: string | null; address?: string | null })?.walletAddress ||
+          (user as { address?: string | null })?.address ||
+          String(user.id)
+
+        token.walletAddress = walletAddress
+
+        if (!token.id) {
+          token.id = String(user.id)
+        }
+
+        await storeUser({
+          id: String(token.id),
+          walletAddress,
+          githubId: token.githubId ?? null,
+        })
+      }
+
+      if (account?.provider === "github" && profile) {
         const profileId = String(profile.id)
         token.id = profileId
-        const user = {
-          ...token,
-          ...profile,
+        token.githubId = profileId
+        token.name = profile.name ?? profile.login ?? token.name
+        token.email = profile.email ?? token.email
+        token.picture = (profile as { avatar_url?: string })?.avatar_url ?? token.picture
+
+        await storeUser({
           id: profileId,
-        }
-        await storeUser(user)
+          name: token.name ?? null,
+          email: token.email ?? null,
+          image: token.picture ?? null,
+          githubId: profileId,
+          walletAddress: token.walletAddress ?? null,
+        })
       }
+
       return token
     },
 
     session({ session, token }) {
+      if (!session.user) {
+        return session
+      }
+
       if (token?.id) {
         session.user.id = String(token.id)
       }
-      return {
-        ...session,
-        user: {
-          ...session.user,
-          id: String(token.id),
-        },
+
+      session.user.walletAddress = token.walletAddress ?? null
+      session.user.githubId = token.githubId ?? null
+
+      if (token?.name && !session.user.name) {
+        session.user.name = token.name
       }
+
+      if (token?.email && !session.user.email) {
+        session.user.email = token.email
+      }
+
+      if (token?.picture && !session.user.image) {
+        session.user.image = token.picture
+      }
+
+      return session
     },
   },
   pages: {