refined sign arbitrary

Author: sdqede

templates/chain-template/pages/api/generate-auth-message.ts

@@ -0,0 +1,37 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { randomBytes } from 'crypto';
+
+type ResponseData = {
+  message: string;
+  timestamp: string;
+  nonce: string;
+}
+
+export default function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<ResponseData | { error: string }>
+) {
+  if (req.method !== 'GET') {
+    return res.status(405).json({ error: 'Method not allowed' });
+  }
+
+  try {
+    // Generate current timestamp in ISO format
+    const timestamp = new Date().toISOString();
+
+    // Generate random nonce
+    const nonce = randomBytes(8).toString('hex');
+
+    // Format the authentication message with explicit line breaks
+    const message = `Please sign this message to complete login authentication.\nTimestamp: ${timestamp}\nNonce: ${nonce}`;
+
+    return res.status(200).json({
+      message,
+      timestamp,
+      nonce
+    });
+  } catch (error) {
+    console.error('Error generating auth message:', error);
+    return res.status(500).json({ error: 'Failed to generate authentication message' });
+  }
+}

templates/chain-template/pages/api/verify-signature.ts

@@ -7,14 +7,16 @@ type RequestBody = {
   signature: string;
   publicKey: string;
   signer: string;
-  prefix?: string;
 }
 
 type ResponseData = {
   success: boolean;
   message: string;
 }
 
+
+const SIGNATURE_EXPIRY_MS = 5 * 60 * 1000;
+
 export default function handler(
   req: NextApiRequest,
   res: NextApiResponse<ResponseData>
@@ -37,6 +39,29 @@ export default function handler(
   }
 
   try {
+    const messageTimestamp = extractTimestampFromMessage(message);
+
+    if (messageTimestamp) {
+      const timestampDate = new Date(messageTimestamp);
+      const currentTime = new Date();
+
+      if (isNaN(timestampDate.getTime())) {
+        return res.status(400).json({
+          success: false,
+          message: 'Invalid timestamp format in message'
+        });
+      }
+
+      if (currentTime.getTime() - timestampDate.getTime() > SIGNATURE_EXPIRY_MS) {
+        return res.status(401).json({
+          success: false,
+          message: 'Authentication expired. Please sign in again.'
+        });
+      }
+    } else {
+      console.warn('No timestamp found in message, skipping timestamp validation');
+    }
+
     // Convert base64 public key to Uint8Array
     const pubKeyBytes = new Uint8Array(Buffer.from(publicKey, 'base64'));
     // Convert base64 signature to Uint8Array
@@ -68,4 +93,11 @@ export default function handler(
       message: 'Internal server error: ' + error.message
     });
   }
+}
+
+
+function extractTimestampFromMessage(message: string): string | null {
+  // "Please sign this message to complete login authentication.\nTimestamp: 2023-04-30T12:34:56.789Z\nNonce: abc123"
+  const timestampMatch = message.match(/Timestamp:\s*([^\n]+)/);
+  return timestampMatch ? timestampMatch[1].trim() : null;
 }

templates/chain-template/pages/sign-message.tsx

@@ -1,85 +1,123 @@
-import { useState, ChangeEvent } from 'react';
-import { Container, Button, Stack, Text, TextField, useTheme } from '@interchain-ui/react';
+import { useState, useEffect } from 'react';
+import { Container, Button, Stack, Text, useTheme } from '@interchain-ui/react';
 import { useChain } from '@interchain-kit/react';
 import { useChainStore } from '@/contexts';
 import { useToast } from '@/hooks';
 
 export default function SignMessage() {
   const [message, setMessage] = useState('');
-  const [signature, setSignature] = useState('');
-  const [isValid, setIsValid] = useState<boolean | null>(null);
-  const [verifying, setVerifying] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [signingIn, setSigningIn] = useState(false);
   const { selectedChain } = useChainStore();
   const { address, wallet, chain } = useChain(selectedChain);
   const { toast } = useToast();
   const { theme } = useTheme();
 
-  const handleSign = async () => {
-    if (!wallet || !address || !chain.chainId) {
+  useEffect(() => {
+    // Load the authentication message when component mounts
+    fetchAuthMessage();
+  }, []);
+
+  const fetchAuthMessage = async () => {
+    try {
+      setLoading(true);
+      const response = await fetch('/api/generate-auth-message');
+      const data = await response.json();
+
+      if (!response.ok) {
+        throw new Error(data.error || 'Failed to fetch authentication message');
+      }
+
+      setMessage(data.message);
+    } catch (error) {
+      console.error('Error fetching auth message:', error);
       toast({
         title: 'Error',
-        description: 'Please connect your wallet first',
+        description: 'Failed to fetch authentication message',
         type: 'error'
       });
-      return;
+    } finally {
+      setLoading(false);
     }
+  };
 
-    try {
-      setSignature('');
-      setIsValid(null);
-      const result = await wallet.signArbitrary(chain.chainId, address, message);
-      setSignature(result.signature);
-    } catch (error) {
-      console.error('Error signing message:', error);
+  const handleSignAndLogin = async () => {
+    if (!wallet || !address || !chain.chainId) {
       toast({
         title: 'Error',
-        description: 'Failed to sign message: ' + (error instanceof Error ? error.message : String(error)),
+        description: 'Please connect your wallet first',
         type: 'error'
       });
+      return;
     }
-  };
-
-  const handleVerify = async () => {
-    if (!signature || !address || !chain.chainId) return;
 
     try {
-      setVerifying(true);
+      setSigningIn(true);
+
+      // Sign the message
+      const result = await wallet.signArbitrary(chain.chainId, address, message);
+
+      // Get the public key
       const account = await wallet?.getAccount(chain.chainId);
       if (!account?.pubkey) {
         throw new Error('Failed to get public key');
       }
 
+      // Submit to API directly
       const response = await fetch('/api/verify-signature', {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
         },
         body: JSON.stringify({
           message,
-          signature,
+          signature: result.signature,
           publicKey: Buffer.from(account.pubkey).toString('base64'),
           signer: address
         }),
       });
 
       const data = await response.json();
-      setIsValid(data.success);
+
+      if (!response.ok) {
+        throw new Error(data.error || 'Login failed');
+      }
+
+      if (!data.success && data.message?.includes('expired')) {
+        toast({
+          title: 'Authentication expired',
+          description: 'Authentication expired, please try again',
+          type: 'error'
+        });
+        handleRefreshMessage();
+        return;
+      }
+
+      if (data.success) {
+        toast({
+          title: 'Success',
+          description: 'Authentication successful',
+          type: 'success'
+        });
+        // Handle successful login - redirect or update UI state
+        // You can add navigation or state management here
+      } else {
+        throw new Error(data.message || 'Authentication failed');
+      }
     } catch (error) {
-      console.error('Error verifying signature:', error);
+      console.error('Error signing in:', error);
       toast({
         title: 'Error',
-        description: 'Failed to verify signature',
+        description: 'Failed to sign in: ' + (error instanceof Error ? error.message : String(error)),
         type: 'error'
       });
     } finally {
-      setVerifying(false);
+      setSigningIn(false);
     }
   };
 
-  const handleMessageChange = (e: ChangeEvent<HTMLInputElement>) => {
-    setMessage(e.target.value);
-    setSignature('');
-    setIsValid(null);
+  const handleRefreshMessage = () => {
+    fetchAuthMessage();
   };
 
   return (
@@ -93,64 +131,51 @@ export default function SignMessage() {
       >
         <Stack direction="vertical" space="$12">
           <Text as="h1" fontSize="$xl" fontWeight="$semibold">
-            Sign Arbitrary Message
+            Sign Authentication Message
           </Text>
 
           <Stack direction="vertical" space="$8">
             <Text as="label" fontSize="$md">
-              Message to Sign
+              Authentication Message
             </Text>
-            <TextField
-              id="message"
-              placeholder="Enter your message here"
-              value={message}
-              onChange={handleMessageChange}
-            />
+            <Container
+              attributes={{
+                p: '$16',
+                backgroundColor: theme === 'light' ? '$gray100' : '$gray900',
+                borderRadius: '$md'
+              }}
+            >
+              {loading ? (
+                <Text>Loading authentication message...</Text>
+              ) : (
+                <Text
+                  fontSize="$sm"
+                  fontFamily="$mono"
+                  whiteSpace="pre-wrap"
+                  attributes={{ whiteSpace: 'pre-line' }} // This ensures line breaks are preserved
+                >
+                  {message}
+                </Text>
+              )}
+            </Container>
+            <Button
+              intent="secondary"
+              onClick={handleRefreshMessage}
+              size="sm"
+              disabled={loading || signingIn}
+            >
+              Refresh Message
+            </Button>
           </Stack>
 
           <Button
-            intent="tertiary"
-            onClick={handleSign}
-            disabled={!message || !wallet}
+            intent="primary"
+            onClick={handleSignAndLogin}
+            disabled={!message || !wallet || loading}
+            isLoading={signingIn}
           >
-            Sign Message
+            Sign and Login
           </Button>
-
-          {signature && (
-            <Stack direction="vertical" space="$8">
-              <Text fontWeight="$semibold">Signature:</Text>
-              <Container
-                attributes={{
-                  p: '$16',
-                  backgroundColor: theme === 'light' ? '$gray100' : '$gray900',
-                  borderRadius: '$md'
-                }}
-              >
-                <Text fontSize="$sm" fontFamily="$mono">
-                  {signature}
-                </Text>
-              </Container>
-
-              <Button
-                intent="primary"
-                onClick={handleVerify}
-                disabled={verifying}
-                isLoading={verifying}
-              >
-                Verify Signature
-              </Button>
-
-              {isValid !== null && (
-                <Text
-                  fontSize="$md"
-                  color={isValid ? '$green500' : '$red500'}
-                  fontWeight="$medium"
-                >
-                  Signature is {isValid ? 'valid' : 'invalid'}
-                </Text>
-              )}
-            </Stack>
-          )}
         </Stack>
       </Container>
     </>