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!
.