Overview

This is a simple step-by-step guide with full working code (< 50 lines) to create a Social Login Button in React from scratch. This tutorial uses an OAuth provider called OAuth.io which provides 100+ OAuth providers such as Twitter, Facebook, Google, and a lot more. They have SDKs available as well for JavaScript, NodeJS, PHP, iOS, Android, as per their documentation.

We will be using "Sign in with Github" social login button as an example for this guide.

Outcome

"What can I do with this button?"

You can put this on your log-in page as an additional option to the traditional username and password.
A lot of applications these days offer social login as way to signup/signin to their system, you may have already seen one!

Online Demo

Check working code here: https://jsfiddle.net/nkd50mh3/

Feel free to play around with the code immediately, it’s already implemented on the JSFiddle!

General Steps

1. Create React app.
2. Add dependencies to React app.
3. Integrate OAuth.io with React app.
4. Sign up for OAuth.io to get API key.
5. Create a Google App and link with your OAuth.io account.

Let's get started!

1. Create React App

Let's create a single-page React application first. We will be using create-react-app library as per ReactJS official documentation here: https://reactjs.org/docs/add-react-to-a-new-app.html

Install yarn if you don't have it yet.

// For macOS
$ brew install yarn

If you already have a React app, please skip to step 2.

$ npm install -g create-react-app
$ create-react-app github-login-demo

$ cd github-login-demo
$ yarn start

We now have a React app boilerplate.

2. Add Dependencies to React App

We're going to use bootstrap-social library to design our Github Login button. The library is built using purely CSS on top of bootstrap and Font Awesome. The library has support for a lot other social buttons as well!

$ yarn add bootstrap-social

This installs bootstrap, Font Awesome, and bootstrap-social libraries.

3. Integrate OAuth.io with React App

Modify App.js to display Twitter Login Component.

App.js

import React, { Component } from 'react';
import 'font-awesome/css/font-awesome.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap-social/bootstrap-social.css';

class App extends Component {

  // Downloads oauth.js from CDN, pretty much like adding external scripts
  componentDidMount () {
    const oauthScript = document.createElement("script");
    oauthScript.src = "https://cdn.rawgit.com/oauth-io/oauth-js/c5af4519/dist/oauth.js";

    document.body.appendChild(oauthScript);
  }

  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 Github 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("Welcome " + data.name + "!");
      });

      // You can also call Github's API using .get()
      provider.get('/user').then((data) => {
         console.log('self data:', data);
      });

    });
  }

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

export default App;

Since OAuth.io is not hosted on npmJS yet, we include the CDN manually using componentDidMount() function. You can also use externals if you're using webpack on your React application. We'll stick with this implementation for demo purposes.

Run Program

Viola! You now have a working Github Login button on React.

$ yarn start

Take note that the code snippet above is using my own personal OAuth.io API key.
Proceed to the next step and sign up for OAuth.io.

4. Sign up for OAuth.io

This step should be pretty straightforward. Sign up an account for OAuth.io and replace the API key on App.js.

5. Create Github App, Link with your OAuth.io

Create Github App

Github makes it so easy to create an OAuth developer app.
You can create one here: https://github.com/settings/applications/new

Set "Authorization callback URL" to "https://oauth.io/auth".
I'll leave the rest of the fields up to you.

Next, goto 'Settings' -> 'Developer Settings', and under 'OAuth Apps', click on the app you created. This will then give you "Client ID" and "Client Secret" which we will use to integrate with OAuth.io on the next step.

The detailed step-by-step instructions are (here)[https://tome.oauth.io/create-github-application?utm_source=coderwall&utm_medium=post&utm_campaign=oauthio-reactjs].

Link with your OAuth.io

Finally, link the Github app that you created with your OAuth.io account.

If you face some issues in this step, refer to (this)[https://tome.oauth.io/setup-oauth-io-provider-integration?utm_source=coderwall&utm_medium=post&utm_campaign=oauthio-reactjs].

That's it! You now have your own fully working Github Social Login button.

Take note that this is front-end implementation only.
You have to add additional code on your controller side so that your app knows what to do.
You can check different SDKs of OAuth.io here.