Twitter API Question posted in
The official Twitter API documentation can be found here.

Twitter login with React TypeError: Failed to fetch – Twitter API

I am running the React project on localhost:3000. I am trying to login with Twitter using React. 

URL:  http://localhost:3000/login/

<TwitterLogin
    loginUrl="http://localhost:4000/api/v1/auth/twitter"
    onFailure={this.onFailed}
    onSuccess={this.onSuccess}
    requestTokenUrl="http://localhost:4000/api/v1/auth/twitter/reverse"
/>

When I clicked the Twitter login icon. I keep getting the error “TypeError: Failed to fetch”

And for the console, I am getting the following error: 

OPTIONS http://localhost:4000/api/v1/auth/twitter net::ERR_CONNECTION_REFUSED

I am also confused about what should I put for the Website URL and the Callback URL for the twitter developer settings. Please help. Thanks a lot!

Tags:

3

Answers


  1. 0

    Refere their doc

    <TwitterLogin
    //localhost:4000 endpoint should be your api running url
    loginUrl="http://localhost:4000/api/v1/auth/twitter"
    onFailure={this.onFailed}
    onSuccess={this.onSuccess}
    //your api endpoint
    requestTokenUrl="http://localhost:4000/api/v1/auth/twitter/reverse"
/>
    Login or Signup to reply.
  2. 0 
    <TwitterLogin
    loginUrl="http://<API-endpoint>/api/v1/auth/twitter"
    onFailure={this.onFailed}
    onSuccess={this.onSuccess}
    //your api endpoint
    requestTokenUrl="http://<API-endpoint>/api/v1/auth/twitter/reverse"
/>

    Do not use localhost since you can get cors errors. See documentation for cors.

    Login or Signup to reply.
  3. 0

    Try another package react-twitter-login

    This Implementation not used any backend and created for simple OAuth with Twitter:

    import React from "react";
import TwitterLogin from "react-twitter-login";

export default props => {
  const authHandler = (err, data) => {
    console.log(err, data);
  };

  return (
    <TwitterLogin
      authCallback={authHandler}
      consumerKey={CONSUMER_KEY}
      consumerSecret={CONSUMER_SECRET}
      callbackUrl={CALLBACK_URL}
    />
  );
};
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search