Error creating DID session when dapp is deployed using vercel

Hello guys!

I am integrating web3auth and ceramic - composeDB in a dapp using the framework Next.Js, everything works as expected in localhost, but the login is not working when i deploy it using Vercel. I got the following error:

Error creating DID session: l: Invalid value “[object Object]” supplied to /(Uint8Array-as-base64url)

this is the related logic code that i am using in a context file:

const loginComposeDB = async () => {
    try {
      if (!provider) {
        console.error("Provider is not initialized");
        return;
      }
  
      // Clear existing session
      sessionStorage.removeItem("ceramic:eth_did");
      
      const oProvider = new BrowserProvider(provider);
      const signer = await oProvider.getSigner();
      
      // Get the account ID
      let accountId;
      try {
        const address = await signer.getAddress();
        console.log("Getting account ID for address:", address);
        accountId = await getAccountId(provider, address);
        console.log("Account ID obtained:", accountId);
      } catch (error) {
        console.error("Error getting account ID:", error);
        throw new Error(`Failed to get account ID: ${error}`);
      }
  
      // Get auth method
      let authMethod;
      try {
        console.log("Getting auth method for account ID:", accountId);
        
        // Create a properly typed provider wrapper with additional logging
        const providerWithMethods = {
          ...provider,
          request: async ({ method, params }: { method: string; params?: unknown[] }) => {
            if (!provider.request) {
              throw new Error("Provider doesn't implement request method");
            }
            console.log(`Provider request - Method: ${method}, Params:`, params);
            const response = await provider.request({ method, params });
            console.log(`Provider response:`, response);
            return response;
          }
        };
  
        const appName = 'Innerverse'
        authMethod = await EthereumNodeAuth.getAuthMethod(
          providerWithMethods,
          accountId,
          appName
        );
        
        console.log("Auth method obtained successfully");
        console.log('Auth method:', authMethod);
      } catch (error) {
        console.error("Error getting auth method:", error);
        throw new Error(`Failed to get auth method: ${error}`);
      }
  
        // Create DID session
        let session;
        try {
          console.log("Creating DID session...");
          
          // Verify resources
          if (!composeClient.resources || composeClient.resources.length === 0) {
            throw new Error("ComposeDB resources not properly initialized");
          }
          console.log("ComposeDB resources:", composeClient.resources);
          
          // Create session with domain and origin from current window location
          session = await DIDSession.authorize(authMethod, {
            resources: composeClient.resources,
            expiresInSecs: 60 * 60 * 24 * 7, // 1 week
            domain: window.location.hostname,
          });
    
          if (!session || !session.did) {
            throw new Error("Invalid session created");
          }
          
          console.log("DID session created:", {
            id: session.id,
            domain: window.location.hostname,
            origin: window.location.origin
          });
        } catch (error) {
          console.error("Error creating DID session:", error);
          if (error instanceof Error) {
            console.error("Detailed error:", {
              message: error.message,
              stack: error.stack,
              name: error.name
            });
          }
          throw new Error(`Failed to create DID session: ${error}`);
        }
  
      // Store and set session
      try {
        const serializedSession = session.serialize();
        console.log("Session serialized successfully");
        
        // Verify serialized session
        if (typeof serializedSession !== 'string') {
          throw new Error("Invalid session serialization format");
        }
        
        // Store session with additional logging
        console.log("Storing session in sessionStorage...");
        sessionStorage.setItem("ceramic:eth_did", serializedSession);
        
        console.log("Setting DID for clients...");
        composeClient.setDID(session.did);
        ceramic.did = session.did;
        
        console.log("DID setup complete");
        
        setSigner(signer);
        setIsConComposeDB(true);
      } catch (error) {
        console.error("Error in final session setup:", error);
        throw new Error(`Failed to setup session: ${error}`);
      }
  
    } catch (error) {
      console.error("Fatal error in loginComposeDB:", error);
      setIsConComposeDB(false);
      // Rethrow the error to be handled by the caller
      throw error;
    }
  };

i got the following log messages befor the error

Account ID obtained:
1. e {chainId: e, address: '0x81...b5'}
   1. address: "0x81,,b5"
   2. chainId: e
      1. namespace: "eip155"
      2. reference: "59902"
      3. [[Prototype]]: Object
   3. [[Prototype]]: Object
420-001b6124b8d790f1.js:1 Getting auth method for account ID:
1. e {chainId: e, address: '0x81..b5'}
   1. address: "0x81...b5"
   2. chainId: e
      1. namespace: "eip155"
      2. reference: "59902"
      3. [[Prototype]]: Object
         1. toJSON: ƒ ()
         2. toString: ƒ ()
         3. constructor: ƒ e(t)
         4. [[Prototype]]: Object
   3. [[Prototype]]: Object
420-001b6124b8d790f1.js:1 Auth method obtained successfully
420-001b6124b8d790f1.js:1 Creating DID session...
420-001b6124b8d790f1.js:1 ComposeDB resources:
1. (4) ['ceramic://?model=kjzl6hvfrbw6cb1c1ecuja9vtg2hgunk2004ie5v91suv9qqp4gwnyk0hwceccd', 'ceramic://?model=kjzl6hvfrbw6c6uwm9b28g7j4mlko7u4690z2vgrx127uzzmymm6tkv2njsm3fu', 'ceramic://?model=kjzl6hvfrbw6c5j3oljd2uuo1kl03ska9ajes9smspgxc7xti4xrxboekqda1rx', 'ceramic://?model=kjzl6hvfrbw6car89uxmnbbk2gpjkopqdek6ws33z6a50yk60iikhlfhv7atx1u']
   1. 0: "ceramic://?model=kjzl6hvfrbw6cb1c1ecuja9vtg2hgunk2004ie5v91suv9qqp4gwnyk0hwceccd"
   2. 1: "ceramic://?model=kjzl6hvfrbw6c6uwm9b28g7j4mlko7u4690z2vgrx127uzzmymm6tkv2njsm3fu"
   3. 2: "ceramic://?model=kjzl6hvfrbw6c5j3oljd2uuo1kl03ska9ajes9smspgxc7xti4xrxboekqda1rx"
   4. 3: "ceramic://?model=kjzl6hvfrbw6car89uxmnbbk2gpjkopqdek6ws33z6a50yk60iikhlfhv7atx1u"
   5. length: 4
   6. [[Prototype]]: Array(0)

thanks a lot for your time!

Hi there.

This sounds exactly like an issue I encountered with another team that was next v14 and experiencing the same issue (working in dev but not in prod). More specifically, next v14 relies on a library called swcMinify which contains a known build bug that incorrectly does not respect the toString method used by underlying DID libraries: Minifier doesn't respect `toString` method in object when converting it to string value · Issue #8704 · swc-project/swc · GitHub

Can you confirm which version of Next you’re using?

1 Like

Hi, thanks for your reply.

Yes i can confirm, i am using Next.js v14.2.4, and also getting [object Object] type. what could be the fix?, should i move to another Next.js versión? or is there another way around?

Changing this toggle is what we found to provide a fix (altering your next.config file). Let me know if this fixes it for you!

1 Like

Hi!,

yeah, that solved the DID issue we were facing, thanks a lot!, were blocked for a whiel :smiley: .

1 Like

Glad to hear it unblocked you! Please let me know if any other questions arise :slight_smile: