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('HlyhAkZq67D9cU6dnAkHnNwW1Ho');

    // Popup facebook and ask for authorization
    window.OAuth.popup('github').then((provider) => {
    
      // Prompts 'welcome' message with User's name on successful login
      // Check console logs for additional User info
      provider.me().then(data => {
        console.log("data: ", data);
        alert("Your Github Name: " + data.name + ".\nCheck console logs for more info.");
      });

    });
    
  }

  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')
);