How do I sign an HTTP request for https://api.x.com's OAuth 1.0a flow?

Question

When making my post request as seen below, I receive a status 401 error from the /oauth/request_token endpoint. I'm at the first step in a 3 step process for authenticating with https://api.x.com to enable a "Log in with X" button.

import crypto from 'crypto';
import axios from 'axios';
import { NextResponse } from 'next/server';

const X_CLIENT_ID = process.env.X_CLIENT_ID as string;
const X_CLIENT_SECRET = process.env.X_CLIENT_SECRET as string;
const X_CALLBACK_URL = process.env.X_CALLBACK_URL as string;

if (!X_CLIENT_ID || !X_CLIENT_SECRET || !X_CALLBACK_URL) {
  throw 'Missing env vars';
}

const BASE_URL = 'https://api.x.com/oauth/request_token';

export async function GET() {
  try {
    const params = createSignedRequestParams();
    const authorizationHeader = `Oauth oauth_callback="${params.oauth_callback}",oauth_consumer_key="${params.oauth_consumer_key}",oauth_nonce="${params.oauth_nonce}",oauth_signature="${params.oauth_signature}",oauth_signature_method="${params.oauth_signature_method}",oauth_timestamp="${params.oauth_timestamp}",oauth_version="${params.oauth_version}"`
    const response = await axios.post(BASE_URL, null, {
      headers: {
        'User-Agent': 'Cutcosts',
        'Host': 'api.x.com',
        'Accept': '*/*',
        'Authorization': authorizationHeader
      }
    });
    console.log(response);
    return NextResponse.json({ success: true })
  } catch (error: any) {
    console.log(JSON.stringify(error, null, 2));
    return NextResponse.json({ message: 'Internal server error' }, { status: 500 });
  }
}

function enc(str: string) {
  return encodeURIComponent(str);
}

function createSignedRequestParams() {
  // RFC 5849 Section 3.4.1
  // Encoding method is only necessary for custom methods
  const method = 'POST';

  // Params
  const params: Record<string, string> = {
    'oauth_callback': X_CALLBACK_URL,
    'oauth_consumer_key': X_CLIENT_ID, // "API Key" in X Developer Portal, per https://docs.x.com/resources/fundamentals/authentication/oauth-1-0a/obtaining-user-access-tokens#overview-of-the-process
    'oauth_nonce': Math.random().toString(36).substring(2) + Math.random().toString(36).substring(2),
    'oauth_signature_method': 'HMAC-SHA1',
    'oauth_timestamp': String(Math.floor(Date.now() / 1000)),
    'oauth_version': '1.0'
  };

  // Encode params
  const encodedParams: Record<string, string> = {};

  Object.keys(params).forEach((key) => {
    encodedParams[key] = enc(params[key]);
  });

  // Normalize encoded params
  const normalizedParams = Object.keys(encodedParams).sort().map(key => `${key}=${encodedParams[key]}`).join('&');

  // The example in RFC 5849 Section 3.4.1.1 shows one ampersand after POST, and one after base URL
  //   the rest of the ampersands and equal signs in params are encoded

  // Encode normalize params
  const encodedNormalizedParams = normalizedParams; // enc(normalizedParams);

  // Encode base url
  const encodedBaseUrl = enc(BASE_URL);

  // Construct base string
  // https://docs.x.com/resources/fundamentals/authentication/oauth-1-0a/creating-a-signature#creating-the-signature-base-string
  const baseString = method + '&' + encodedBaseUrl + '&' + enc(encodedNormalizedParams);
  console.log('Example:', 'POST&https%3A%2F%2Fapi.x.com%2F1.1%2Fstatuses%2Fupdate.json&include\_entities%3Dtrue%26oauth\_consumer\_key%3Dxvz1evFS4wEEPTGEFPHBog%26oauth\_nonce%3DkYjzVBB8Y0ZFabxSWbWovY3uYSQ2pTgmZeNu2VS4cg%26oauth\_signature\_method%3DHMAC-SHA1%26oauth\_timestamp%3D1318622958%26oauth\_token%3D370773112-GmHxMAgYyLbNEtIKZeRNFsMKPR9EyMZeS9weJAEb%26oauth_version%3D1.0%26status%3DHello%2520Ladies%2520%252B%2520Gentlemen%252C%2520a%2520signed%2520OAuth%2520request%2521');
  console.log('Actual:', baseString);

  // Construct encoded signature
  // X_CLIENT_SECRET is "API Secret" in X Developer Portal, per https://docs.x.com/resources/fundamentals/authentication/oauth-1-0a/obtaining-user-access-tokens#overview-of-the-process
  const signingKey = enc(X_CLIENT_SECRET) + '&';
  const signature = crypto.createHmac('sha1', signingKey)
    .update(baseString)
    .digest('base64');
  const encodedSignature = enc(signature);

  // Update params to include encoded signature
  encodedParams.oauth_signature = encodedSignature;
  return encodedParams;
}

Troubleshooting attempts:

Tried encoding the entire string after "Oauth " in the authorization header. (status 400)

Tried not encoding the signature after it is in base64 (status 400)

Tried putting the oauth_callback parameter in POST body rather than authorization header (status 401)

Tried not encoding the normalized params during signature creation (status 401)

Verified that callback URI in X developer portal matches callback URI in POST request

Verified that oauth_consumer_key value matches Client ID value from X developer portal

Verified that value used in POST request signing process matches Client Secret from X developer portal

Tried using “API Key” and “API Secret” for oauth_consumer_key and signing secret instead of Client ID and Client secret (Learned from docs[dot]x[dot]com/resources/fundamentals/authentication/oauth-1-0a/obtaining-user-access-tokens#overview-of-the-process that this is actually correct for OAuth 1.0a flow, however I still receive a status 401)

What else can I troubleshoot?

Do I have the signing steps correct? (createHMAC, update, digest)

Answer 1

X API considers the "OAuth" string in authorization header to be case-sensitive so I had to ensure I had "OAuth" rather than "Oauth" in order to get a 200 OK response.