React Native集成Auth0实现Twitter登录，如何获取Token及Secret Token

Got it, let's break down your problem and fix it step by step. The core issue here is two-fold:

1. The access_token you're getting from Auth0 is Auth0's own token, not the native Twitter OAuth 1.0 Token and Token Secret required for Twitter API calls.
2. Your Auth0 rule has several bugs that are causing the access_denied error.

Let's fix this:

Step 1: Fix Auth0 Twitter Connection Settings #

First, head to your Auth0 Dashboard → Connections → Social → Twitter, and make sure you check the box labeled "Include raw user profile in the id_token". This ensures Auth0 passes the native Twitter OAuth credentials (token and secret) into the user's identities array, which your rule needs to access.

Step 2: Correct Your Auth0 Rule #

Your original rule has three critical issues:

• You're using a POST request for Twitter's account/verify_credentials.json (it's a GET endpoint)
• You never call callback() to complete the Auth0 flow if the request succeeds
• Error handling is incomplete, leading to vague error messages

Here's the revised, working rule:

function (user, context, callback) {
  // Skip non-Twitter connections
  if (context.connectionStrategy !== 'twitter') {
    return callback(null, user, context);
  }

  const oauth = require('oauth-sign');
  const uuid = require('uuid');
  // Use GET and include email if you need it (requires Twitter app permission)
  const url = 'https://api.twitter.com/1.1/account/verify_credentials.json?include_email=true';
  const consumerKey = configuration.TWITTER_CONSUMER_KEY;
  const consumerSecretKey = configuration.TWITTER_CONSUMER_SECRET_KEY;

  // Grab Twitter's native OAuth credentials from user identities
  const twitterIdentity = _.find(user.identities, { connection: 'twitter' });
  if (!twitterIdentity || !twitterIdentity.access_token || !twitterIdentity.access_token_secret) {
    return callback(new Error('Missing Twitter OAuth credentials'));
  }

  const oauthToken = twitterIdentity.access_token;
  const oauthTokenSecret = twitterIdentity.access_token_secret;
  const timestamp = Math.floor(Date.now() / 1000); // Must be integer timestamp
  const nonce = uuid.v4().replace(/-/g, '');

  // Build OAuth 1.0 signature params
  const params = {
    oauth_consumer_key: consumerKey,
    oauth_nonce: nonce,
    oauth_signature_method: 'HMAC-SHA1',
    oauth_timestamp: timestamp,
    oauth_token: oauthToken,
    oauth_version: '1.0'
    // No need for oauth_callback here—this is a server-side request
  };

  // Generate HMAC-SHA1 signature
  params.oauth_signature = oauth.hmacsign('GET', url, params, consumerSecretKey, oauthTokenSecret);

  // Format Authorization header
  const authHeader = Object.keys(params).sort().map(k => `${k}="${oauth.rfc3986(params[k])}"`).join(', ');

  // Send request to Twitter API
  request.get({
    url: url,
    headers: { 'Authorization': `OAuth ${authHeader}` },
    json: true
  }, (err, resp, body) => {
    if (err) {
      return callback(new Error(`Failed to fetch Twitter profile: ${err.message}`));
    }
    if (resp.statusCode !== 200) {
      const errorDetails = body.errors ? body.errors.map(e => e.message).join(', ') : resp.statusMessage;
      return callback(new Error(`Twitter API error: ${errorDetails}`));
    }

    // Optional: Add Twitter email to user profile (if available)
    if (body.email) {
      user.email = body.email;
      user.email_verified = true;
    }

    // Critical: Add Twitter's token and secret to the id_token (custom claims)
    // Replace `https://your-app.com/` with your app's namespace to avoid claim conflicts
    context.idToken['https://your-app.com/twitter_oauth_token'] = oauthToken;
    context.idToken['https://your-app.com/twitter_oauth_secret'] = oauthTokenSecret;

    // Finalize the Auth0 flow
    callback(null, user, context);
  });
}

Don't forget to add TWITTER_CONSUMER_KEY and TWITTER_CONSUMER_SECRET_KEY as environment variables in your Auth0 rule's settings page.

Step 3: Update Your React Native Code to Fetch the Credentials #

Your current request uses response_type: 'token', which only returns Auth0's access token. You need to switch to response_type: 'id_token token' to get the id_token (where we stored the Twitter credentials):

import jwtDecode from 'jwt-decode'; // Install with npm install jwt-decode

_loginWithAuth0Twitter = async () => { 
  const redirectUrl = AuthSession.getRedirectUrl(); 
  const result = await AuthSession.startAsync({ 
    authUrl: `${auth0Domain}/authorize` + toQueryString({ 
      connection: 'twitter', 
      client_id: auth0ClientId, 
      response_type: 'id_token token', // Updated response type
      scope: 'openid email', // Add email if you need it
      redirect_uri: redirectUrl, 
      nonce: Math.random().toString(36).substring(2, 15), // Required for id_token validation
    }), 
  });

  if (result.type === 'success') {
    // Decode the id_token to get our custom Twitter credentials
    const decodedIdToken = jwtDecode(result.params.id_token);
    const twitterToken = decodedIdToken['https://your-app.com/twitter_oauth_token'];
    const twitterTokenSecret = decodedIdToken['https://your-app.com/twitter_oauth_secret'];

    // Now you can use these two values to sign Twitter OAuth 1.0 API requests!
    console.log('Twitter OAuth Token:', twitterToken);
    console.log('Twitter OAuth Secret:', twitterTokenSecret);
  }
}

Key Notes #

• Make sure your Twitter Developer App has the "Request email from users" permission enabled (under App Settings → User authentication settings) if you want to fetch the user's email.
• Never expose your Twitter Consumer Secret to the frontend—keep it only in your Auth0 rule or backend.
• The custom claim namespace (https://your-app.com/) is required by Auth0 to avoid conflicts with standard OIDC claims.

内容的提问来源于stack exchange，提问作者Zulfiqar Laili