From fe568d4191fe0bb6c9bfee6d8fb5a08df8dfe94b Mon Sep 17 00:00:00 2001
From: BrickheadJohnny <92519134+BrickheadJohnny@users.noreply.github.com>
Date: Mon, 25 Nov 2024 19:15:15 +0100
Subject: [PATCH] fix: SIWE domain issue (#1564)

* feat(SignInDialog): add error toast

* fix: add `https://` to the `NEXT_PUBLIC_URL` env var

* add logs

* feat: add `NEXT_PUBLIC_SIWE_URL` env var

* feat(SIWE): include hostname only in the domain field
---
 src/components/SignInDialog.tsx | 20 +++++++++++---------
 src/lib/env.ts                  |  8 ++++----
 2 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/src/components/SignInDialog.tsx b/src/components/SignInDialog.tsx
index 76b98c7afe..e522099b84 100644
--- a/src/components/SignInDialog.tsx
+++ b/src/components/SignInDialog.tsx
@@ -3,11 +3,12 @@
 import { signIn } from "@/actions/auth";
 import { signInDialogOpenAtom } from "@/config/atoms";
 import { env } from "@/lib/env";
-import { SignIn, User, Wallet } from "@phosphor-icons/react/dist/ssr";
+import { SignIn, User, Wallet, XCircle } from "@phosphor-icons/react/dist/ssr";
 import { DialogDescription } from "@radix-ui/react-dialog";
 import { useMutation } from "@tanstack/react-query";
 import { useAtom, useSetAtom } from "jotai";
 import { shortenHex } from "lib/shortenHex";
+import { toast } from "sonner";
 import { createSiweMessage } from "viem/siwe";
 import { useAccount, useConnect, useSignMessage } from "wagmi";
 import { z } from "zod";
@@ -89,19 +90,13 @@ const SignInWithEthereum = () => {
       const { nonce } = await fetch(`${env.NEXT_PUBLIC_API}/auth/siwe/nonce`)
         .then((res) => res.json())
         .then((data) => z.object({ nonce: z.string() }).parse(data));
-      const urlHostname = [
-        new URL(env.NEXT_PUBLIC_URL).hostname,
-        window.location.port,
-      ]
-        .filter(Boolean)
-        .join(":");
 
       const message = createSiweMessage({
         address: address!,
         chainId: 1,
-        domain: urlHostname,
+        domain: new URL(env.NEXT_PUBLIC_SIWE_URL).hostname,
         nonce,
-        uri: urlHostname,
+        uri: env.NEXT_PUBLIC_SIWE_URL,
         version: "1",
       });
 
@@ -110,6 +105,13 @@ const SignInWithEthereum = () => {
       return signIn({ message, signature });
     },
     onSuccess: () => setSignInDialogOpen(false),
+    onError: (error) => {
+      toast("Sign in error", {
+        description: error.message,
+        icon: <XCircle weight="fill" className="text-icon-error" />,
+      });
+      console.error(error);
+    },
   });
 
   return (
diff --git a/src/lib/env.ts b/src/lib/env.ts
index 3cf0233dde..5c2d551398 100644
--- a/src/lib/env.ts
+++ b/src/lib/env.ts
@@ -7,15 +7,15 @@ export const env = createEnv({
   },
   client: {
     NEXT_PUBLIC_API: z.string(),
-    NEXT_PUBLIC_URL: z.string(),
+    NEXT_PUBLIC_SIWE_URL: z.string(),
     NEXT_PUBLIC_PINATA_GATEWAY_URL: z.string(),
   },
   runtimeEnv: {
     NEXT_PUBLIC_API: process.env.NEXT_PUBLIC_API_V3,
-    NEXT_PUBLIC_URL:
+    NEXT_PUBLIC_SIWE_URL:
       process.env.NODE_ENV === "production"
-        ? process.env.NEXT_PUBLIC_VERCEL_URL
-        : "http://localhost",
+        ? `https://${process.env.NEXT_PUBLIC_VERCEL_URL}`
+        : "http://localhost:3000",
     PINATA_ADMIN_JWT: process.env.PINATA_ADMIN_JWT,
     NEXT_PUBLIC_PINATA_GATEWAY_URL: process.env.NEXT_PUBLIC_PINATA_GATEWAY_URL,
   },