Making signature has an issue when using abstract wallet

[howdyfrom2019]

1. Issue Description

I want to use Thirdweb Auth, but when using Abstract Global Wallet, the doLogin and getLoginPayload functions do not work properly. Through debugging, I identified that the issue is caused by the signature value not being generated correctly when using Abstract Global Wallet.

2. Suspected Cause

doLogin() callback
thirdwebAuth.verifyPayload(payload) when using an abstract wallet-generated signature

Case 1: Signature and Payload when using Abstract Wallet

{
    "signature": "0x000000000000000000000000000000000000000000000000000000000000004000000000000000000000000074b9ae28ec45e3fa11533c7954752597c3de3e7a000000000000000000000000000000000000000000000000000000000000004159a9b1a2d69711961397c74e9002758904ceddf55e80d868f8fd92fa8c96ac41630a34b52218db3b96e42bf102eb0a66855e218ff4aad1f977636df8f3104e161c00000000000000000000000000000000000000000000000000000000000000",
    "payload": {
        "address": "0x6b90D228ea593Ec920cB534Be1E5CE71a7b91B3E",
        "chain_id": "11124",
        "domain": "localhost:3000",
        "expiration_time": "2025-02-27T05:01:23.706Z",
        "invalid_before": "2025-02-27T04:41:23.706Z",
        "issued_at": "2025-02-27T04:51:23.706Z",
        "nonce": "0x246eaded26f21ca19cb6225b58970f1def376a256216d50f18eb1c8d7e188250",
        "statement": "Please ensure that the domain above matches the URL of the current website.",
        "version": "1",
        "uri": "localhost:3000"
    }
}

Case 2: Signature and Payload when using Other Wallets (e.g., Rabby Wallet)

{
    "signature": "0x6d30904dde819dde7389145a37f8e714ada6174cf7854b1c6dc9bd5622a35fc10bb91df25091043945a92a1e92c91fd1d283724ce4e3877ca84e160d213d36a91c",
    "payload": {
        "address": "0x634D2Af0D531B105919144d73b3e3d0F5B91AFb5",
        "chain_id": "11124",
        "domain": "localhost:3000",
        "expiration_time": "2025-02-27T05:04:01.670Z",
        "invalid_before": "2025-02-27T04:44:01.670Z",
        "issued_at": "2025-02-27T04:54:01.670Z",
        "nonce": "0x8254aa48d1e81bde23e54822fc338079106b6cf81053697088577357a9e8917e",
        "statement": "Please ensure that the domain above matches the URL of the current website.",
        "version": "1",
        "uri": "localhost:3000"
    }
}

3. Steps to Reproduce

1. Set up authentication using the following code snippet.
2. Connect the wallet.
3. Observe whether the auth callback executes successfully.

Code Snippet

'use client';

import { ConnectButton as ThirdwebConnectButton } from 'thirdweb/react';
import { createThirdwebClient } from 'thirdweb';
import { abstract, abstractTestnet } from 'thirdweb/chains';
import { inAppWallet, walletConnect } from 'thirdweb/wallets';
import { abstractWallet } from '@abstract-foundation/agw-react/thirdweb';

const clientId = process.env.NEXT_PUBLIC_THIRDWEB_CLIENT_ID!;
const secretKey = process.env.THIRDWEB_SECRET_KEY;

export const client = createThirdwebClient(
  secretKey
    ? { secretKey }
    : {
        clientId,
      }
);

export default function ConnectButton() {
const [loggedIn, setLoggedIn] = useState(false);
  return (
    <ThirdwebConnectButton
      client={client}
      accountAbstraction={{
      chain: process.env.NEXT_PUBLIC_APP_ENV === 'DEV' ? abstractTestnet : abstract,
      sponsorGas: true,
    }}
      chains={[process.env.NEXT_PUBLIC_APP_ENV === 'DEV' ? abstractTestnet : abstract],}
      auth={getLoginPayload: async (params) => {
        return thirdwebAuth.generatePayload(params);
      },
      isLoggedIn: async (address) => {
        return loggedIn;
      },
      doLogin: async (params) => {
        const verifiedPayload =
              await thirdwebAuth.verifyPayload(params);
            setLoggedIn(verifiedPayload.valid);
      },
      doLogout: async () => {
         setLoggedIn(false);
      }}
      wallets={[inAppWallet({ auth: { options: ['google'] } }), abstractWallet(), walletConnect()]}
    />
  );
}

Expected Behavior

When using Abstract Global Wallet, the signature should be correctly generated, and authentication should proceed without issues.

Actual Behavior

The signature from Abstract Global Wallet appears incorrect, leading to doLogin and verifyPayload failures.

Environment

• Node.js version: v22.12.0
• package

"@abstract-foundation/agw-client": "^1.4.2",
"@abstract-foundation/agw-react": "^1.5.4",
"viem": "^2.23.5",
"wagmi": "^2.14.12",
"thirdweb": "^5.88.7",

[linear]

TOOL-3546 Making signature has an issue when using abstract wallet

[joaquim-verges]

I ran your code and its working fine for me. I'm able to auth using abstract wallet verifying the signature.

the reason why the signature looks different is because AGW is a smart contract wallet, so it needs to wrap the raw signature in order to add replay protection.

Your code looks fine, but you're not showing how you're setting up your thirdwebAuth object? I suspect that is the issue, make sure you pass your thirdweb client to the createAuth function, so it can do smart contract signature verification which requires RPC calls

[howdyfrom2019]

@joaquim-verges oh yes it works fine.
My thirdwebAuth doesn't receive client object before. as you said I hand over client object to creatAuth function. and all the problem solved. thanks for advice

const thirdwebAuth = createAuth({
  domain: process.env.NEXT_PUBLIC_THIRDWEB_AUTH_DOMAIN || '',
  adminAccount: privateKeyToAccount({ client, privateKey }),
- 
+ client,
});

[joaquim-verges]

you're very welcome @howdyfrom2019 !