CODEWITHSUNDEEP
reactjsfirebaseauthenticationtwitterfirebase-authentication
user3068177
user3068177

Reputation: 357

Firebase Auth for Twitter with React

I have been working to create an authentication process where users can log-in via Twitter using Firebase's authentication. After logging in, I am trying to store the user's token and secret so that I can perform Twitter actions on behalf of the users. So far, this is what my login looks like:

export function loginWithTwitter() {
   return auth.signInWithPopup(provider)
}

and inside my main file, I have implemented a button that calls a function that in turn calls the function above to authenticate the user. It looks like this:

login() {
loginWithTwitter()
.then((result) => {
 const user = result.user;
   accessToken = result.credential.accessToken;
   accessTokenSecret = result.credential.secret;
  this.setState({
    user
  });
});
localStorage.setItem(firebaseAuthKey, "1");
}

This code properly pulls up the window and authenticates the app with the user but when testing the accessToken and accessTokenSecret values it appears that they are not ever receiving input since printing them out to the console for testing returns values of undefined. Is there anything obvious I am doing wrong that is causing this? Thanks!

The initial resource I used on how to do authentication is here: https://firebase.google.com/docs/auth/web/twitter-login

EDIT: For further testing, I set the values of accessToken and accessTokenSecret to random integers and added the line of code 

accessToken = 'changed';

in the second block of code right below where I set accessTokenSecret = result.credential.secret. When I ran through the program, the console printed out the initial values assigned to the variables, never changing them. It seems to me that for some reason the code in the second block is never run through, but I am still not sure why.

Upvotes: 0

Views: 620

Answers (2)

Soniya Rana
Soniya Rana

Reputation: 134

    import { authentication } from "./firebaseConfig"; //this u will have to get from firebase
    import { TwitterAuthProvider,signInWithPopup} from "firebase/auth";
    
    const SocialLoginFirebase = () => {

    const SignInWithTwitter = () => {
        console.log("button clicked");
        const provider = new TwitterAuthProvider();
        signInWithPopup(authentication, provider)
          .then((res) => {
            console.log(res);
          
          })
          .catch((err) => {
            console.log(err);
          });
      };
return (
<button onClick={SignInWithTwitter}>Sign in with Tiwtter</button>
)
}
export default SocialLoginFirebase;

Upvotes: 0

mhnpd
mhnpd

Reputation: 391

try this way with handling error message

export function loginWithTwitter() {
// make sure your Firebase OAuth redirect URI (e.g. my-app-12345.firebaseapp.com/__/auth/handler) is set as your Callback URL in your app's settings page on your Twitter app's config in firebase console. You have to sign in for API and secret
   return provider; 
}
//import the function loginwithTwiter
//bind this if required.
login=()=> {
var provider = loginWithTwitter();
firebase.auth().signInWithPopup(provider).then(function (result){
  var token = result.credential.accessToken;
  var secret = result.credential.secret;
  // The signed-in user info.
  var user = result.user;
  //set this data in your state or anywhere.
  this.setState({ user : user, tok: token })
}).catch(err => {
  console.log(err.message);
});

Upvotes: 1

Related Questions