react-oauthio example

OAuth.io example in React JSX

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://cdn.rawgit.com/oauth-io/oauth-js/c5af4519/dist/oauth.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/5.1.1/bootstrap-social.css">
<div id="container">
  <!-- This element's contents will be replaced with your component. -->
</div>

Babel + JSX

class OAuth extends React.Component {

	handleClick(e) {
    // Prevents page reload
    e.preventDefault();

    // Initializes OAuth.io with API key
    // Sign-up an account to get one
    window.OAuth.initialize('BTfcjv51Sd9sJJrfLVp8QyIBZUM');

    // Popup facebook and ask for authorization
    window.OAuth.popup('github').then((github) => {
      console.log('github:', github);
      // Prompts 'welcome' message with User's name on successful login
      // #me() is a convenient method to retrieve user data without requiring you
      // to know which OAuth provider url to call
      github.me().then((data) => {
        console.log("data: ", data);
        alert("Your Github email: " + data.email + ".\nCheck console logs for more info.");
      });
      
      // You can also call Github's API using #.get()
      github.get('/user').then(data => {
        console.log('self data:', data);
      });
    });
  }

  render() {
    return <a onClick={this.handleClick.bind(this)} className="btn btn-social btn-github">
             <i className="fa fa-github"></i> Sign in with {this.props.name}
           </a>;
  }
}

ReactDOM.render(
  <OAuth name="Github" />,
  document.getElementById('container')
);