SDK integration problems with nextjs

[ap0sentada]

Description

when you try to encapsulate the sdk connection logic in a context hook using nextjs, the sdk for some reason will always return an “invalid client id” error when trying to authorize the user with discordSdk.commands.authorize({...}). I tested the same code with vite, and it worked normally, I had no problems encapsulating the logic, but specifically with nextjs, the SDK always crashes in this part.

Steps to Reproduce

perform the same SDK creation steps as in the documentation, but instead of using vite, use nextjs. after that, transfer the code relating to the sdk to a context hook (using createContext and it's provider), and then try to run the application. use app router.

code:

    const appId = 'xxxx';
   console.log('[AppID]:', appId);
    const discordSdk = new DiscordSDK(appId, {
      disableConsoleLogOverride: true
    });
     await discordSdk.ready()
      const data = await discordSdk.commands.authorize({
        response_type: "code",
        client_id: appId,
        prompt: "none",
        state: "",
        scope: ["identify"]
      })

the code above is encapsulated by a useEffect inside a provider, and I have already debugged the app id. yes, the client id is correct and it refers to the same id as the started application. you can test it yourself.

Expected Behavior

it must return the authorization code to obtain the access token.

Current Behavior

you get the error { "code": 4007, "message": "invalid client id: X" }

it is not possible to use authorize within nextjs context hooks.

Screenshots/Videos

in the image below, I store catch information in a state, and print it to the screen as an error also debugged with client console, but got the same thing

Client and System Information

next: v14.2.13 @discord/embedded-app-sdk: v1.4.3 using app router & typescript windows 11

discord windows client: stable 335184 (33b5e1a) Host 1.0.9167 x64 (53601) Build Override: N/A Windows 11 64-bit (10.0.22621) Electron 32.0.0 Chromium 128.0.6613.36

[matthova]

If you right click on the app from the "shelf", can you confirm you're launching the same app id that's referenced in the code?

Obrigado por relatar 🙏🏻

[infinitestory]

another thing to try - it's possible that if certain steps in the handshake protocol are duplicated, the RPC connection will shut off as an error response. you'd get a Close event on your side if this happens, could you add some logging and see if that's what's going on?

[ap0sentada]

If you right click on the app from the "shelf", can you confirm you're launching the same app id that's referenced in the code?

Obrigado por relatar 🙏🏻

yes, same app

[ap0sentada]

another thing to try - it's possible that if certain steps in the handshake protocol are duplicated, the RPC connection will shut off as an error response. you'd get a Close event on your side if this happens, could you add some logging and see if that's what's going on?

that's it, i just tested it, in nextjs the component is rendered twice, once on the client and once on the server, even if you have strict mode disabled. passing the logic to an asynchronous function that will be called inside a useEffect, returning the necessary data (such as auth, sdk, participants, etc.) by a then, and then setting the states with this data worked normally. but it doesn't work if you dump the logic inside the useEffect directly

[infinitestory]

Is that a sufficient workaround for your purposes? I'm not too familiar with nextjs, but it sounds like whatever is going on under the hood is causing some parts of the rpc connection protocol to happen out of order, and that's resulting in the issue you're observing. So I'm not sure we'd be able to do much on our end.

[johnliu]

@ap0sentada closing this due to a lack of response, if there's any additional follow up please create a new issue.