WPLift is supported by its audience. When you purchase through links on our site, we may earn an affiliate commission.

How To: Allow users to Login to WordPress using Github

Last Updated on June 12th, 2020

Published on January 15th, 2015

Share This Article

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.


While creating a Github App, Github asks for a callback URL. Users will have to use https://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.

Article Continues Below

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


            <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; ?>" />

            <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; ?>" />

            <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; ?>" />

            <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; ?>" />

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


    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 ) 

        $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>
        } else {
                <a href="<?php echo site_url() . '/wp-admin/admin-ajax.php?action=github_oauth_redirect'; ?>"><input type="button" value="Login Using Github" /></a>
        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.


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


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.

Article Continues Below


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


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.

Stay informed on WordPress

Every Friday you’ll receive news, tutorials, reviews, and great deals from the WordPress space.

Invalid email address
A team of WordPress experts that love to test out new WordPress related software, WordPress plugins and WordPress themes.