Configure X (formerly Twitter) OAuth for Keyloom authentication - setup, scopes, and social media platform integration.

X (Twitter) Provider

Enable X (formerly Twitter) OAuth authentication in your Keyloom application for social media integration.

Prerequisites

X Developer account and app created at X Developer Portal
App configured for OAuth 2.0
Keyloom handler configured at /api/auth/[...keyloom]

Setup

1. Create X Developer Account

Go to X Developer Portal
Apply for a developer account
Complete the application process (may require approval)

2. Create X Application

In the X Developer Portal, click "Create App"
Fill in required information:
- App Name: Your application name
- App Description: Detailed description of your app
- Website URL: Your app's homepage
- Callback URLs: ${YOUR_APP_URL}/api/auth/oauth/x/callback
Review and create the app

3. Configure OAuth 2.0

Go to your app settings
Navigate to "Authentication settings"
Enable "OAuth 2.0"
Set callback URL: ${YOUR_APP_URL}/api/auth/oauth/x/callback
Configure scopes (see Available Scopes below)

4. Get Credentials

From your X app settings:

Client ID: Your X app's Client ID (OAuth 2.0)
Client Secret: Your X app's Client Secret (OAuth 2.0)

5. Environment Variables

.env.local

X_CLIENT_ID=your_x_client_id
X_CLIENT_SECRET=your_x_client_secret

6. Configure Provider

keyloom.config.ts

import { defineKeyloom } from "@keyloom/core";
import { x } from "@keyloom/providers";

export default defineKeyloom({
  providers: [
    x({
      clientId: process.env.X_CLIENT_ID!,
      clientSecret: process.env.X_CLIENT_SECRET!,
    }),
  ],
  // ... other config
});

Configuration Options

x({
  clientId: string;
  clientSecret: string;
  scopes?: string[]; // Default: ["tweet.read", "users.read"]
})

Available Scopes

X API v2 provides granular scopes:

User Scopes

users.read - Read user profile information
tweet.read - Read tweets
tweet.write - Create tweets
tweet.moderate.write - Hide and unhide replies
follows.read - Read follows, followers, and following lists
follows.write - Follow and unfollow accounts
offline.access - Maintain access when user is offline
space.read - Read Spaces information
mute.read - Read muted accounts
mute.write - Mute and unmute accounts
like.read - Read liked tweets
like.write - Like and unlike tweets
list.read - Read lists
list.write - Create and manage lists
bookmark.read - Read bookmarked tweets
bookmark.write - Bookmark and unbookmark tweets

Default Scopes

The provider uses tweet.read users.read by default for basic functionality.

Note: X has strict approval processes for certain scopes. Basic read access is typically approved quickly.

User Profile

X returns the following user information:

{
  id: string;           // X user ID
  name: string | null;  // Display name
  email: string | null; // Email (if available and approved)
  image: string | null; // Profile image URL
  // Raw X data available in profile
}

Note: Email access requires special approval from X and may not be available for all applications.

Usage Example

components/XSignIn.tsx

import { useLogin } from "@keyloom/react";

export function XSignIn() {
  const { login, loading } = useLogin();

  const handleXLogin = async () => {
    await login({
      provider: "x",
      callbackUrl: "/dashboard",
    });
  };

  return (
    <button onClick={handleXLogin} disabled={loading}>
      {loading ? "Connecting..." : "Sign in with X"}
    </button>
  );
}