Authenticate Page Ghost NFT Gated Blog

Authenticate.js

import React, { useEffect, useState } from "react";
import { useAccount, useConnect, useSignMessage, useDisconnect } from 'wagmi';

const Authenticate = ({ cid, setPostContent, setAuthenticated }) => {
  const [mounted, setMounted] = useState(false)
  const [messageId, setMessageId] = useState(null);
  const [signature, setSignature] = useState(null);

  useEffect(() => {
    if(messageId && signature) {
      verifySignature();
    }
  }, [signature, messageId])

  useEffect(() => setMounted(true), [])
  const { connect, connectors, error, isLoading, pendingConnector } =
  useConnect()
  const { data, _, __, signMessage } = useSignMessage({
    async onSuccess(data, variables) {
      setSignature(data);
    },
  })
  const { address, connector, isConnected } = useAccount()
  const { disconnect } = useDisconnect()

  const verifySignature = async () => {
    try {
      const post = await fetch(`/api/${cid}`, {
        method: 'POST', 
        body: JSON.stringify({
          signature: data, 
          messageId, 
          address
        })
      });
      const postRes = await post.json();
      const { link, metadata, id } = postRes;
      const pageData = await fetch(link);
      const pageDataJson = await pageData.json();

      setPostContent(pageDataJson);
      setAuthenticated(true)
    } catch (error) {
      console.log(error);
      alert("Invalid signature");
    }
  }

  const handleSign = async () => {
    const data = await fetch(`/api/${cid}`);
    const response = await data.json();
    setMessageId(response.session.id);
    const messageData = response.message
    signMessage({ message: messageData });    
  }

  if (isConnected && mounted) {
    return (
      <div>
        <div>
          <h1>Sign Message To Verify NFT Ownership</h1>
          <p>Click the button below, and you'll be prompted to sign a message proving you should have access to this blog.</p>
        </div>       
        <div>
        <button onClick={handleSign}>Verify NFT</button>
        <button onClick={disconnect}>Disconnect</button>
        </div>
      </div>
    )
  }

  return (
    <div suppressHydrationWarning>
      <h1>Connect your wallet to authenticate</h1>
      <p>
        You'll need to connect your wallet and sign a message so that ownership
        of the correct NFT to access this blog can be verified.
      </p>
      <div>
      {connectors
          .filter((x) => mounted && x.ready && x.id !== connector?.id).map((connector) => (
        <button
          disabled={!connector.ready}
          key={connector.id}
          onClick={() => connect({ connector })}
        >
          {connector.name}
          {!connector.ready && ' (unsupported)'}
          {isLoading &&
            connector.id === pendingConnector?.id &&
            ' (connecting)'}
        </button>
      ))}

      {error && <div>{error.message}</div>}
      </div>
    </div>
  );
};

export default Authenticate;