{"library":"remix-auth-twitter","title":"Remix Auth Twitter Strategy","description":"remix-auth-twitter is an authentication plugin for Remix applications, specifically designed to integrate with the `remix-auth` library. It provides strategies for authenticating users via Twitter's (now X's) OAuth protocols, supporting both the older OAuth 1.0a (via `Twitter1Strategy`) and the newer OAuth 2.0 (via `Twitter2Strategy`). The current stable version is 4.0.0, which aligns with and requires `remix-auth@4`. Releases are primarily driven by compatibility updates with `remix-auth` major versions and changes to the Twitter API (e.g., domain changes from `twitter.com` to `x.com`). A key differentiator is its dual support for both OAuth versions and direct integration into the Remix ecosystem, abstracting much of the OAuth flow complexity.","language":"javascript","status":"active","last_verified":"Wed Apr 22","install":{"commands":["npm install remix-auth-twitter"],"cli":null},"imports":["import { Twitter2Strategy } from 'remix-auth-twitter';","import { Twitter1Strategy } from 'remix-auth-twitter';","import { Authenticator } from 'remix-auth';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import { Authenticator } from \"remix-auth\";\nimport { Twitter2Strategy } from \"remix-auth-twitter\";\nimport TwitterApi from \"twitter-api-v2\"; // Example external library for Twitter API calls\n\ninterface User { /* Define your user type */ id: string; username: string; accessToken: string; }\n\nexport let authenticator = new Authenticator<User>();\n\nconst clientID = process.env.TWITTER_CLIENT_ID ?? '';\nconst clientSecret = process.env.TWITTER_CLIENT_SECRET ?? '';\n\nif (!clientID || !clientSecret) {\n  throw new Error(\n    \"TWITTER_CLIENT_ID and TWITTER_CLIENT_SECRET must be provided\"\n  );\n}\n\nauthenticator.use(\n  new Twitter2Strategy(\n    {\n      clientID,\n      clientSecret,\n      callbackURL: \"https://my-app/login/callback\",\n      scopes: [\"users.read\", \"tweet.read\", \"tweet.write\"],\n    },\n    async ({ request, tokens }) => {\n      const accessToken = tokens.accessToken();\n\n      // In this example, we use an external library to get user profile details\n      const userClient = new TwitterApi(accessToken);\n      const result = await userClient.v2.me({\n        \"user.fields\": [\"profile_image_url\"],\n      });\n      // Consider robust error handling for API calls\n      const { id, username } = result.data;\n\n      // This is a placeholder for your actual user registration/lookup logic\n      async function registerUser(token: string, userId: string, uname: string): Promise<User> {\n        // In a real app, you would save/retrieve user data from a database\n        console.log(`User authenticated: ${uname} (ID: ${userId})`);\n        return { id: userId, username: uname, accessToken: token };\n      }\n      return await registerUser(accessToken, id, username);\n    }\n  )\n);\n\n// Example route action to initiate login\n/*\nexport async function action({ request }: ActionFunctionArgs) {\n  return authenticator.authenticate(\"twitter2\", request, {\n    successRedirect: \"/dashboard\",\n    failureRedirect: \"/login\",\n  });\n}\n\n// Example callback route loader\nexport async function loader({ request }: LoaderFunctionArgs) {\n  return authenticator.authenticate(\"twitter2\", request, {\n    successRedirect: \"/dashboard\",\n    failureRedirect: \"/login\",\n  });\n}\n*/","lang":"typescript","description":"This quickstart demonstrates how to configure the `Twitter2Strategy` (OAuth 2.0) with `remix-auth`, handle environment variables for credentials, and process the authentication callback to retrieve user information using an external Twitter API client.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}