Today we are going show you how to add a GitHub login button into a WordPress theme using Oauth – this tutorial is for developers who wish to add this functionality so users can login to your site faster using their GitHub credentials rather than having to register an account and use the normal WordPress login process.

Including The GitHub OAuth WordPress library

I have created a Github OAuth library for WordPress which handles all the tough task of Github OAuth login. This library also creates necessary WordPress REST API URLs required for Github Login.

Extract the zip file in your theme folder. Now you will have a inc directory in your theme folder which has all necessary files for GitHub login.

Loading Github OAuth WordPress Library

Now you need to load the library into WordPress. Inside your theme’s functions.php file include

require_once( "inc/githuboauth.php" );

Redirecting users

When user clicks on the Sign In with GitHub button you need to redirect user to:

site_url() . "/wp-admin/admin-ajax.php?action=github_oauth_redirect"

This URL will handle all core functionality of Sign In with GitHub. Once the user has been logged in, the user will be redirected to the homepage of the website.

Creating a GitHub App

Users who install your theme needs to create a GitHub App for their website.

1

While creating a Github App, Github asks for a callback URL. Users will have to use http://yourdomain.comwp-admin/admin-ajax.php?action=github_oauth_callback as the callback URL.

get_site_url() . '/wp-admin/admin-ajax.php?action=github_oauth_callback'

Once they have created a GitHub App they need to copy the Client ID, Client Secret and App name from GitHub App dashboard and store them as WordPress options.

Use the following option names to store the option values.

update_option( "github_key", $client_id_variable );
update_option( "github_secret", $client_secret_variable );
update_option( "github_app_name", $github_app_name_variable );

This is all you need to do to have a GitHub login button in your theme. Let’s create a GitHub Login widget that displays a GitHub Login Button.

GitHub Login Widget

Here is the code for creating a Github Login Widget, place this code in your theme’s functions.php file and it will create a new widget which you can access via “Appearance” > “Widgets”.

You can put this code inside a functionality plugin also. Make sure you pack the GitHub OAuth WordPress library with your plugin also.

class GitHub_Login_Widget extends WP_Widget 
{
    public function __construct() 
    {
        parent::__construct( "Github_login_widget", "GitHub Login", array( "description" => __("Display a GitHub Login Button" ) ) );
    }

    public function form( $instance ) {

        if ( $instance )  {

            $title = esc_attr( $instance['title'] );
            $api_key = $instance['api_key'];
            $secret_key = $instance['secret_key'];
            $github_app_name = $instance['github_app_name'];

        } else {

            $title = '';
            $api_key = '';
            $secret_key = '';
            $github_app_name = '';

        }
        ?>

        <p>
            <label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php echo "Title"; ?></label>  
            <input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo $title; ?>" />
        </p>

        <p>
            <label for="<?php echo $this->get_field_id( 'api_key' ); ?>"><?php echo "Client Id"; ?></label>
            <input type="text" class="widefat" id="<?php echo $this->get_field_id( 'api_key' ); ?>" name="<?php echo $this->get_field_name( 'api_key' ); ?>" value="<?php echo $api_key; ?>" />
        </p>

        <p>
            <label for="<?php echo $this->get_field_id( 'secret_key' ); ?>"><?php echo "Secret Key"; ?></label>
            <input type="text" class="widefat" id="<?php echo $this->get_field_id( 'secret_key' ); ?>" name="<?php echo $this->get_field_name( 'secret_key' ); ?>" value="<?php echo $secret_key; ?>" />
        </p>

        <p>
            <label for="<?php echo $this->get_field_id( 'github_app_name' ); ?>"><?php echo "App Name"; ?></label>
            <input type="text" class="widefat" id="<?php echo $this->get_field_id( 'github_app_name' ); ?>" name="<?php echo $this->get_field_name( 'github_app_name' ); ?>" value="<?php echo $github_app_name; ?>" />
        </p>

        <p>
            While creating a Github app use "<?php echo get_site_url() . '/wp-admin/admin-ajax.php?action=github_oauth_callback';  ?>" as callback URL.
        </p>

        <?php
    }

    public function update( $new_instance, $old_instance ) 
    {
        $instance = $old_instance;
        $instance['title'] = strip_tags( $new_instance['title'] );
        $instance['api_key'] = strip_tags( $new_instance['api_key'] );
        $instance['secret_key'] = strip_tags( $new_instance['secret_key'] );
        $instance['github_app_name'] = strip_tags( $new_instance['github_app_name'] );
        update_option( "github_key", $new_instance['api_key'] );
        update_option( "github_secret", $new_instance['secret_key'] );
        update_option( "github_app_name", $new_instance['github_app_name'] );
        return $instance;
    }

    public function widget( $args, $instance ) 
    {
        extract($args);

        $title = apply_filters( 'widget_title', $instance['title'] );
        echo $before_widget;

        if ( $title ) {
            echo $before_title . $title . $after_title ;
        }

        if ( is_user_logged_in() ) {
            ?>
                <a href="<?php echo wp_logout_url( get_permalink() ); ?>" title="Logout"><input type="button" value="Logout" /></a>
            <?php
        } else {
            ?>
                <a href="<?php echo site_url() . '/wp-admin/admin-ajax.php?action=github_oauth_redirect'; ?>"><input type="button" value="Login Using Github" /></a>
            <?php
        }
        echo $after_widget;
    }
}
register_widget( "GitHub_Login_Widget" );

Let’s see how the above code works:

  • We first included the GitHub OAuth library.
  • Then we created a Widget that displays a Login button on frontend and displays keys input boxes on backend.
  • When users submit the widget form on backend the values are saved as WordPress options.
  • When someone clicks on the GitHub Login button on the frontend of the widget, the users are redirected to the Redirect URL as mentioned above. The redirected URL handles all the login task.

Now visit “Appearance” > “Widgets” and you will see the Github login widget, place it and enter the required Client ID, Secret Key and Callback URL.

2

Visit the the site and you will see the login button :

3

Clicking login will take the user to the Github website where they can login, after doing so they will be returned to your site and be logged in to WordPress.

4

Making GitHub REST API Calls

Github provides different access tokens for different users. GitHub OAuth WordPress library stores the access tokens as user meta data. So making Github REST API calls using this library only if user is logged in using GitHub. REST API calls can let you access and do more things with user’s github account rather than accessing just logging in information. Using REST API you can access users repositories, fork repositories, star repositories, retrieve feed URL, pull & push repositories and much more.

Some example REST API calls:

    require_once( 'inc/githuboauth.php' );

    if( is_user_logged_in() ) 
    {
        //GET Request
        $response = GithubApiRequest( "https://api-url/", false, array("HTTP Header" => "HTTP Header Value", "HTTP Header" => "HTTP Header Value") );

        //POST Request
        $response = GithubApiRequest( "https://api-url/", array("Field Name" => "Field Value", "Field Name" => "Field Value"), array("HTTP Header" => "HTTP Header Value", "HTTP Header" => "HTTP Header Value") );        
    }

Conclusion

Now you have learnt how to create a GitHub Login button. If you integrate it in your theme then you can place the button anywhere you like. If you integrate it in a plugin then you will need to include it in a widget so the user can place it.


Narayan is a web astronaut. He is the founder of QNimate. He loves teaching. He loves to share ideas. When not coding he enjoys playing football. You will often find him at QScutter classes.

Siteground Hosting
Does WPLift load fast for you? That’s because we use Siteground for hosting, WPLift readers can click here to get up to 60% off hosting for your site.

Disclosure: This page may contain affiliate links for which we will receive compensation if a purchase is made.

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Leave Yours +

2 Comments

  1. Piet

    Not sure I follow.
    Are you saying that if I were to include this button in my theme, people clicking the button would need to make an app first? Or is it me who needs to make the app?

  • Comments are Closed

Our Sponsors

SEND ME FREE STUFF!

Join our Newsletter to Receive 6 Free WordPress Themes

We will also send you our weekly Newsletter packed with the Latest WordPress Content.

We will look after your email & Never Spam!

You have Successfully Subscribed!