Failed to Authenticate error due to discord_token endpoint 404

[berkowitze]

Just following the directions in the README is not working. I'm getting stuck with a "Failed to authenticate" error when running within a Discord Activity. Things work fine when opening the client in a browser, because everything's mocked I assume.

Looking at the devtools, it looks like the request to /.proxy/discord_token is 404'ing, leading to the auth failure.

Exact steps I took to reproduce:

• git clone https://github.com/colyseus/discord-embedded-app-sdk
• Make client/.env have correct VITE_DISCORD_CLIENT_ID
• Make server/.env have correct DISCORD_CLIENT_ID and DISCORD_CLIENT_SECRET
• cd server && npm install && npm start
• cd client && npm install && npm start
• npx cloudflared tunnel --url http://localhost:5173
• Update redirect uri to url from above, and url mapping for / -> url from above

No other changes.

This seems like the absolute barebones of this repo, so I feel like I'm missing something.

I also tried putting the server onto its own cloudflare rev proxy, and updating vite.config.js with that url, but that didn't work either.

[endel]

Hi @berkowitze, in addition to the / mapping for the front-end, you also need a /colyseus mapping for the backend.

Try this:

Starting another tunnel for the backend:

npx cloudflared tunnel --url http://localhost:2567

Use the following URL Mappings:

It worked for me here:

Let me know if that helps!

[berkowitze]

Aha that fixed it, thank you!

I think the Readme is a bit misleading, particularly this part:

During development, there's no need to expose the server to the public internet - only the client. Our Vite development server proxies the /api requests to our local server.

So I wasn't putting the server onto cloudflare.

You do say to have /colyseus pointing to cloudflare in this section, I just got confused between that and the "Testing your local Discord Activity" section.

Might be worth clarification, though this was mostly me just being a bad reader.

[thesnups]

You can also fix it by prepending colyseus requests with /.proxy when running embedded:

// In apps\client\src\utils\Colyseus.ts
const queryParams = new URLSearchParams(window.location.search);
const isEmbedded = queryParams.get('frame_id') != null;

export const colyseusSDK = new Client(isEmbedded ? '/.proxy/colyseus' : '/colyseus');