title: Authentication with facebook google twitter using React.js
body: <p>I am working on authentication by social sites like Facebook and Google+ in my app. I have chosen React.js for view.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;body&gt;
    &lt;div id="Login-widget"&gt;&lt;/div&gt;
    &lt;script type="text/jsx"&gt;
      var Login = React.createClass({
        render: function() {
          return (
            &lt;ul className="info nav nav-pills nav-stacked" id="profile-accordion"&gt;
              &lt;li className="panel"&gt;
                &lt;a href="#" data-parent="#profile-accordion" data-toggle="collapse"&gt;
                  &lt;span className="glyphicon glyphicon-chevron-down pull-right" /&gt;
                  Logged with WRIO
                &lt;/a&gt;
                &lt;div className="in" id="profile-element"&gt;
                  &lt;div className="tickets"&gt;
                    &lt;div className="media thumbnail"&gt;
                      &lt;div className="col-xs-12 col-md-6 col-lg-5"&gt;
                        &lt;img src="https://avatars2.githubusercontent.com/u/604410?v=3&amp;s=460" className="pull-left" /&gt;
                        &lt;ul className="details"&gt;
                          &lt;li&gt;Name: Alexey Anshakov&lt;/li&gt;
                          &lt;li&gt;Registered: 22 Jun 2013&lt;/li&gt;
                          &lt;li&gt;Rating: 244&lt;/li&gt;
                          &lt;li&gt;Followers: 1,634&lt;/li&gt;
                          &lt;li&gt;Posts: 1,634&lt;/li&gt;
                        &lt;/ul&gt;
                      &lt;/div&gt;
                      &lt;div className="col-xs-12 col-md-6 col-lg-7"&gt;
                        &lt;div className="media-body"&gt;
                          Disclaimer: We start a series of stories describing various issues and problems that are related for the most part to the Internet, and our vision of possible ways to solve them. Those will often be followed by previews of projects mentioned in the stories. Keep in mind: some of them might change, some will remain just our fantasy; at this moment we are a small team, but with a great desire to change this world for the better or at least a little bit.
                        &lt;/div&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div className="col-xs-12 col-md-6 col-lg-7 social-login"&gt;
                      &lt;a href="#" className="fb"&gt;Login with facebook&lt;/a&gt;
                      &lt;a href="#" className="gp" &gt;Login with Google Plus&lt;/a&gt;
                      &lt;a href="#" className="tw"&gt;Login Wiht Twitter&lt;/a&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          );
        }
      });
  
      React.renderComponent(&lt;Login /&gt;, document.getElementById('Login-widget'));  // Your code here
    &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>This is my code using my <code>Login</code> React Component
  Now I want to try authentication using Facebook, Google+,and Twiiter.</p>
  
  <h2>I have created my API for this:</h2>
  
  <pre><code>"api": {
    "twitter": {
      "consumerKey": "value",
      "consumerSecret": "value,
      "token": "value",
      "tokenSecret": "value"
    },
    "facebook": {
      "clientId": "value",
      "clientSecret": "value",
      "callbackUrl": "url"
    },
    "google": {
      "clientId": "value",
      "clientSecret": "value",
      "callbackUrl": "url"
    }
  }
  </code></pre>
  
  <hr>
  
  <p>Please help me: how can I use these APIs in JSX code?</p>