error - ApiResponseError: Request failed with code 401 #208

deadcoder0904 · 2022-03-02T15:44:47Z

deadcoder0904
Mar 2, 2022

My code is similar to https://github.com/fireship-io/gpt3-twitter-bot/blob/main/functions/index.js & https://github.com/alkihis/twitter-api-v2-user-oauth2-flow-example/blob/main/src/routes/callback.ts

It's in 3 files: client.ts, generate-auth-link.ts & get-verifier-token.ts & the content looks like this:

client.ts

import TwitterApi from 'twitter-api-v2'

import { TWITTER_CONFIG } from '../../../lib/config'

export const twitterClient = new TwitterApi({
  clientId: TWITTER_CONFIG.clientId,
  // clientSecret: TWITTER_CONFIG.clientSecret,
})

generate-auth-link.ts

import { NextApiResponse } from 'next'

import { twitterClient } from './client'
import { TWITTER_CONFIG } from '../../../lib/config'
import { NextIronRequest } from '../../../types/index'
import handler from '../../../server/api-route'

const generateAuthLink = async (req: NextIronRequest, res: NextApiResponse) => {
  // Generate an authentication URL
  const { state, codeVerifier, url } = twitterClient.generateOAuth2AuthLink(
    TWITTER_CONFIG.callbackURL,
    {
      scope: ['tweet.read', 'offline.access'],
    }
  )

  req.session.twitter = {
    state,
    codeVerifier,
  }

  await req.session.save()

  // redirect to the authentication URL
  res.send({ redirect: url })
}

export default handler().get(generateAuthLink)

get-verifier-token.ts

import { SERVER_URL } from './../../../utils/index'
import { NextApiResponse } from 'next'
import TwitterApi from 'twitter-api-v2'

import { twitterClient } from './client'
import { TWITTER_CONFIG } from '../../../lib/config'
import { NextIronRequest } from '../../../types/index'
import handler from '../../../server/api-route'

const getVerifierToken = async (req: NextIronRequest, res: NextApiResponse) => {
  const state = req.query.state as string
  const code = req.query.code as string
  const { state: storedState, codeVerifier } = req.session.twitter

  if (storedState !== state) {
    return res
      .status(400)
      .send(
        'OAuth token is not known or invalid. Your request may have expired. Please renew the auth process.'
      )
  }
  const {
    client: loggedClient,
    accessToken,
    refreshToken,
    expiresIn,
  } = await twitterClient.loginWithOAuth2({
    code,
    codeVerifier,
    redirectUri: TWITTER_CONFIG.callbackURL,
  })

  const {
    data: { id: userId, name, username, profile_image_url },
  } = await loggedClient.v2.me()

  res.send(`
<html>
  <body>
    <h1>You successfully logged in! closing this window...</h1>
  </body>
  <script>
    window.opener && window.opener.postMessage({ username: '${username}' }, '${SERVER_URL}');
    close();
  </script>
</html>
  `)
}

export default handler().get(getVerifierToken)

I'm still getting an error:

error - ApiResponseError: Request failed with code 401
    at RequestHandlerHelper.createResponseError (~/twitter-api-v2-3-legged-login-using-next-connect/node_modules/twitter-api-v2/dist/client-mixins/request-handler.helper.js:99:16)
    at RequestHandlerHelper.onResponseEndHandler (~/twitter-api-v2-3-legged-login-using-next-connect/node_modules/twitter-api-v2/dist/client-mixins/request-handler.helper.js:227:25)
    at Gunzip.emit (node:events:520:28)
    at Gunzip.emit (node:domain:475:12)
    at endReadableNT (node:internal/streams/readable:1343:12)
    at processTicksAndRejections (node:internal/process/task_queues:83:21) {
  error: true,
  type: 'response',
  code: 401,
  headers: {
    date: 'Wed, 02 Mar 2022 14:32:23 GMT',
    pragma: 'no-cache',
    server: 'tsa_k',
    expires: 'Tue, 31 Mar 1981 05:00:00 GMT',
    'set-cookie': [
      'guest_id_marketing=v1%3A164623154389776671; Max-Age=63072000; Expires=Fri, 01 Mar 2024 14:32:23 GMT; Path=/; Domain=.twitter.com; Secure; SameSite=None',
      'guest_id_ads=v1%3A164623154389776671; Max-Age=63072000; Expires=Fri, 01 Mar 2024 14:32:23 GMT; Path=/; Domain=.twitter.com; Secure; SameSite=None',
      'personalization_id="v1_nDJ6mXe0oMn723EKeYcEJQ=="; Max-Age=63072000; Expires=Fri, 01 Mar 2024 14:32:23 GMT; Path=/; Domain=.twitter.com; Secure; SameSite=None',
      'guest_id=v1%3A164623154389776671; Max-Age=63072000; Expires=Fri, 01 Mar 2024 14:32:23 GMT; Path=/; Domain=.twitter.com; Secure; SameSite=None'
    ],
    'content-type': 'application/json;charset=UTF-8',
    'cache-control': 'no-cache, no-store, must-revalidate, pre-check=0, post-check=0',
    'last-modified': 'Wed, 02 Mar 2022 14:32:23 GMT',
    'x-frame-options': 'SAMEORIGIN',
    'content-encoding': 'gzip',
    'www-authenticate': 'WWW-Authenticate: Basic',
    'x-xss-protection': '0',
    'content-disposition': 'attachment; filename=json.json',
    'x-content-type-options': 'nosniff',
    'strict-transport-security': 'max-age=631138519',
    'x-response-time': '182',
    'x-connection-hash': '63fb27bed226e4ae8062c05e153c559f34da60e987d17a971cbf5616aa5b0cce',
    via: '1.1 google',
    'alt-svc': 'clear',
    connection: 'close',
    'transfer-encoding': 'chunked'
  },
  rateLimit: undefined,
  data: {
    error: 'unauthorized_client',
    error_description: 'Missing valid authorization header'
  }
}

Reproduction code on oauth2 branch → https://github.com/deadcoder0904/twitter-api-v2-3-legged-login-using-next-connect/tree/oauth2

Answered by deadcoder0904

Mar 7, 2022

had to add clientSecret to get a 403 forbidden error & wrap await in try...catch to know the error that i hadn't put users.read in scope array. more details here :)

View full answer

alkihis · 2022-03-03T22:26:27Z

alkihis
Mar 3, 2022
Collaborator

Can you give your client type registered in Twitter dev portal? Is it classified as a public client or a confidential client?

If this is a confidential client (the excepted one for node.js usage), you need to give your client secret in the constructor (in your exemple, it is commented).

5 replies

deadcoder0904 Mar 4, 2022
Author

@alkihis yeah i knew that so i tried by uncommenting it & got another 403 Forbidden error.

i choose web app so confidential client & it does need a secret but doesn't work.

the complete error looks like:

error - ApiResponseError: Request failed with code 403
    at RequestHandlerHelper.createResponseError (~/tweet2chat/node_modules/twitter-api-v2/dist/client-mixins/request-handler.helper.js:99:16)
    at RequestHandlerHelper.onResponseEndHandler (~/tweet2chat/node_modules/twitter-api-v2/dist/client-mixins/request-handler.helper.js:227:25)
    at IncomingMessage.emit (node:events:532:35)
    at IncomingMessage.emit (node:domain:475:12)
    at endReadableNT (node:internal/streams/readable:1343:12)
    at processTicksAndRejections (node:internal/process/task_queues:83:21) {
  error: true,
  type: 'response',
  code: 403,
  headers: {
    'content-type': 'application/problem+json',
    'cache-control': 'no-cache, no-store, max-age=0',
    'content-length': '93',
    'x-response-time': '179',
    'x-connection-hash': '8c07afbea82adf12886f355sdas61ac8c2505c62af8b39afe63493a66568h33',
    date: 'Fri, 04 Mar 2022 05:12:04 GMT',
    server: 'tsa_k',
    via: '1.1 google',
    'alt-svc': 'clear',
    connection: 'close'
  },
  rateLimit: undefined,
  data: '{\n' +
    '  "title": "Forbidden",\n' +
    '  "type": "about:blank",\n' +
    '  "status": 403,\n' +
    '  "detail": "Forbidden"\n' +
    '}'
}

alkihis Mar 4, 2022
Collaborator

You notice this isn't the same error returned in body.
I suggest you to keep specifying client secret for now.

Is your callback URL authorized?
Is sign in with twitter enabled?

I have no problem with OAuth2 login on my side 😕

deadcoder0904 Mar 4, 2022
Author

You notice this isn't the same error returned in body.

which body? if you are saying the both errors i pasted above are different (one is 401 & other is 403), then that's bcz i didn't use CLIENT_SECRET the first time & got 401 & i got 403 when i used CLIENT_SECRET

Is your callback URL authorized?

yes, see

Is sign in with twitter enabled?

i didn't find this anywhere oauth 2.0 but i think i might've did it with oauth 1.0

I have no problem with OAuth2 login on my side 😕

did you use my code for that?

alkihis Mar 6, 2022
Collaborator

I come back to you.
All the login process is running successfully. You've getting an access token, client is valid, etc.

BUT. you want to use users/me, that needs tweet.read and users.read scope. You only have tweet.read. So request is returns a 403 forbidden.

This is quickly debuggable if you use try/catch around your await requests, and log what's happening before and after each request.

I have also written in some v2 endpoints scope information, .me() is a part of them:

/**
   * Returns information about an authorized user.
   * https://developer.twitter.com/en/docs/twitter-api/users/lookup/api-reference/get-users-me
   *
   * OAuth2 scopes: `tweet.read` & `users.read`
   */
public me(options: Partial<UsersV2Params> = {}) {
  return this.get<UserV2Result>('users/me', options);
}

This is also an essential part of the Twitter documentation :)

So:

Specify your clientSecret in client constructor
Add users.scope in scope array, in .generateOAuth2AuthLink call

deadcoder0904 Mar 7, 2022
Author

@alkihis just putting in try...catch block catches the error & redirects nicely.

then it's easier to understand what's wrong. thank you so much once again!

i just hated to use try...catch for 5+ years but now i see why it should be used haha :)

deadcoder0904 · 2022-03-07T15:48:34Z

deadcoder0904
Mar 7, 2022
Author

had to add clientSecret to get a 403 forbidden error & wrap await in try...catch to know the error that i hadn't put users.read in scope array. more details here :)

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

error - ApiResponseError: Request failed with code 401 #208

{{title}}

Replies: 2 comments 5 replies

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

error - ApiResponseError: Request failed with code 401 #208

deadcoder0904 Mar 2, 2022

client.ts

generate-auth-link.ts

get-verifier-token.ts

Replies: 2 comments · 5 replies

alkihis Mar 3, 2022 Collaborator

deadcoder0904 Mar 4, 2022 Author

alkihis Mar 4, 2022 Collaborator

deadcoder0904 Mar 4, 2022 Author

alkihis Mar 6, 2022 Collaborator

deadcoder0904 Mar 7, 2022 Author

deadcoder0904 Mar 7, 2022 Author

deadcoder0904
Mar 2, 2022

Replies: 2 comments 5 replies

alkihis
Mar 3, 2022
Collaborator

deadcoder0904 Mar 4, 2022
Author

alkihis Mar 4, 2022
Collaborator

deadcoder0904 Mar 4, 2022
Author

alkihis Mar 6, 2022
Collaborator

deadcoder0904 Mar 7, 2022
Author

deadcoder0904
Mar 7, 2022
Author