X (Twitter) OAuth Integration

Reclaim Protocol allows you to access X (formerly Twitter) user data through our OAuth integration. This guide will walk you through the setup process and available endpoints.

Video Walkthrough

Watch our step-by-step video guide to learn how to:

Set up your X OAuth application in the Reclaim dashboard
Configure the required permissions and callback URLs
Implement the integration in your application
Test the authentication flow

Setup

1. Create Application

First, create a Reclaim OAuth App in the Reclaim Devtool. During setup, you'll need to:

Preview and configure your user experience
Select X as your oauth identity provider
Select the data scopes you want to access
Configure your OAuth callback URLs and allowed origins
Get your client credentials (Client ID and Secret)

2. OAuth Integration

Choose the appropriate OAuth library based on your tech stack:

Integrate Reclaim OAuth in your application using the library of choice and credentials obtained from the dashboard.

React Example

import React from 'react';
import getReclaimAuth, { ReclaimUser } from 'identity-react';
 
const auth = getReclaimAuth(
  process.env.REACT_APP_RECLAIM_CLIENT_ID,
  process.env.REACT_APP_RECLAIM_CLIENT_SECRET,
  process.env.REACT_APP_RECLAIM_REDIRECT_URI
);
 
function App() {
  const [user, setUser] = React.useState<ReclaimUser | null>(null);
 
  React.useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged(setUser);
    return () => unsubscribe();
  }, []);
 
  const handleSignIn = async () => {
    try {
      await auth.signIn();
    } catch (error) {
      console.error('Sign in failed:', error);
    }
  };
 
  return (
    <div>
      {user ? (
      <div>
        <p>Welcome, {user.id}!</p>
        <pre>{JSON.stringify(user.userData, null, 2)}</pre>
        <pre>{JSON.stringify(user.additionalData, null, 2)}</pre>
      </div>
      ) : (
        <button onClick={handleSignIn}>Sign In</button>
      )}
    </div>
  );
}

3. API integration

When the user is authenticated you can access user data using API endpoints. For example:

fetch('https://identity.reclaimprotocol.org/api/v1/production/oauth/x/me', {
    method: 'GET',
    credentials: 'include'
})
.then(response => response.json())
.then(data => console.log(data))

This endpoint will return all the data a user has shared in the authentication phase.

4. API endpoints

/x/email

Returns user email used in X

"test@gmail.com"

/x/tweets

Returns a list of the users last 20 tweets

[
  {
    "id": "1628347912635469824",
    "text": "test tweets",
    "createdAt": "2024-12-01T14:32:11.000Z",
    "views": 12854,
    "likes": 543,
    "id_str": "1628347912635469824",
    "quote_count": 12,
    "reply_count": 34,
    "retweet_count": 89,
    "bookmark_count": 18,
    "userName": "janedoe_writer"
  },
  {
    ...
  }
]

/x/user

Returns user profile data

{
{
  "id": "1628347912635469824",
  "name": "Jane Doe",
  "screen_name": "janedoe_pro",
  "description": "Software Engineer",
  "followers_count": 15423,
  "following_count": 732,
  "profile_image_url": "https://pbs.twimg.com/profile_images/1234567890123456789/abcdefg.jpg",
  "profile_banner_url": "https://pbs.twimg.com/profile_banners/1234567890123456789/1618294823/1500x500",
  "location": "New York, USA",
  "url": "https://janedoe.com",
  "created_at": "Wed Feb 10 14:32:11 +0000 2010",
  "verified": true,
  "is_blue_verified": false,
  "media_count": 342,
  "statuses_count": 5814
}
}