Twitter Embeds Return 404 from CDN

[iwootten]

Embedding tweets fail with a 404 from twitters CDN for valid tweets. Looks like https://cdn.syndication.twimg.com/ doesn't exist.

It has previously been using a deprecated API.

[delucis]

Twitter 🔥 in all directions 😱 — thanks for the report!

Time I guess to switch to an authenticated approach. We’ll probably need to require folks add an integration to astro.config so they’re not forced to pass API keys each time they use a component.

Would look something like:

1. A user configures their Twitter API access token in astro.config:

   export default defineConfig({
     integrations: [
       // if using @astro-community/astro-embed-twitter
       Twitter({ token: process.env.PRIVATE_TWITTER_ACCESS_TOKEN }),
       // if using the astro-embed umbrella package
       AstroEmbed({
         twitter: { token: process.env.PRIVATE_TWITTER_ACCESS_TOKEN },
       }),
     ],
   });

2. The integration sets up a Vite plugin creating a virtual module, e.g. as virtual:astro-embed-twitter.

3. The Twitter component imports the access token from that virtual module and uses it with the Twitter API client.

   import { accessToken } from 'virtual:astro-embed-twitter';

[mayankguptadotcom]

Facing similar issue -

Failed to fetch https://cdn.syndication.twimg.com/tweet?id=XXXXXX
Error 404: Not Found

[delucis]

Hey folks!

Just published astro-embed@0.2.0 to fix this. Because the syndication API is no longer available, the <Tweet /> component now uses the Twitter API v2 instead, which requires authentication.

You will need to sign up for a “bearer key” in Twitter’s Developer Portal and add this as a SECRET_TWITTER_TOKEN environment variable to your project locally and wherever you’re deploying. I’ve added more details in the component package’s README: https://github.com/astro-community/astro-embed/tree/main/packages/astro-embed-twitter#authentication