How to use Firebase Twitter Authentication with React Native?

Question

How to use Firebase Twitter Authentication with React Native?

I tried both of the code below in reference to https://www.firebase.com/docs/web/guide/login/twitter.html

var Firebase = require("firebase");

var App = React.createClass({

  render: function() {
    return (
      <View>
        <Text onPress={this._handlePress}>
          Twitter login
        </Text>
      </View>
    );
  },

  _handlePress: function () {
    var myApp = new Firebase("https://<myapp>.firebaseio.com");

    myApp.authWithOAuthRedirect("twitter", function(error) {
      if (error) {
        console.log("Login Failed!", error);
      } else {
        // We'll never get here, as the page will redirect on success.
      }
    });

  }

});

and

var Firebase = require("firebase");

var App = React.createClass({

  render: function() {
    return (
      <View>
        <Text onPress={this._handlePress}>
          Twitter login
        </Text>
      </View>
    );
  },

  _handlePress: function () {
    var myApp = new Firebase("https://<myapp>.firebaseio.com");

    myApp.authWithOAuthPopup("twitter", function(error, authData) {
      if (error) {
        console.log("Login Failed!", error);
      } else {
        console.log("Authenticated successfully with payload:", authData);
      }
    });

  }

});

When I use authWithOAuthRedirect, an error occurred like

undefined is not an object (evaluating 'window.location.href')

When I use authWithOAuthPopup, nothing happened.

How can I solve the question? Or is it not possible?

Answer 1

This is the Firebase Twitter integration for the web. Despite its ancestry and its use of JavaScript, React Native is in no way the web; you don't have a DOM, you don't have the browser and so you don't have the ability to redirect the current window, which seems to be what this code is trying to do.

So, to answer your question, using this library as it is will not be possible. You might find you have to write an extension in Obj-C to do what you want to do without using the browser-style flow.

Answer 2

I hacked together a solution... I am certain there is a cleaner approach that can be used to get the job done, but you can build on what I have accomplished

/**
* login in the user with the credentials, gets the whole process 
* started, [NOTE] probably can just construct the url myself?
*/
_doGitHubLogin() {
    this.props.fbRef.authWithOAuthRedirect("github", function (error) {
        if (error) {
            console.log("Authentication Failed!", error);
        } else {
            console.log("Authenticated successfully with payload:", authData);
        }
    });
}

componentDidMount() {

    // set this interval to check for me trying to redirect the window...
    var that = this
    that.inter = setInterval(function () {
        if (window.location && window.location.split) {

            // set the redirect on the url..
            var newLocation = window.location.split("redirectTo=null")[0]
            newLocation = newLocation + "redirectTo=https://auth.firebase.com/v2/clearlyinnovative-firebasestarterapp/auth/github/callback"

            // open the browser...
            that.setState({ url: newLocation })

            // clear the interval to stop waiting for the location to be set..
            clearInterval(that.inter)
        }
    }, 3000);


    this.props.fbRef.onAuth((_auth) => {
        console.log(_auth)
        this.setState({ auth: _auth })
    });
}

See a full explanation here... https://github.com/aaronksaunders/rn-firebase-demo