How to configure GitHub SSO in Django Rest Framework with React?

Published on

Single Sign On (SSO) gives your users convenient but secure access to all their web applications with a single set of credentials. This guide explains how we can configure Github SSO(Social Login) in the Django Rest Framework backend with React.

Django (Django rest Framework):

Django REST framework (DRF) is a powerful and flexible toolkit for building Web APIs.Its main benefit is that it makes serialization much easier. Django REST framework is based on Django's class-based views, so it's an excellent option if you're familiar with Django. To know more about relative links click here

Node.js :

Node.js is an open-source, cross-platform, back-end JavaScript runtime environment that runs on a JavaScript Engine and executes JavaScript code outside a web browser. and NPM is a package manager for Node. js packages. The NPM program is installed on your computer when you install Node.js. To know more about relative links click here

React:

ReactJS is much easier to learn and use. ReactJS is a free and open-source front-end JavaScript library for building user interfaces based on UI components. to create interactive applications for mobile, web, and other platforms. To know more about relative links click here

Single sign-on(SSO):

Single sign-on (SSO) is a time-saving and highly secure user authentication process. SSO lets users access multiple applications with a single account and sign out instantly with one click.

How it Works:

Flow Diagram:

Steps:

Step 1: Create a Github client Id and client Secret

Check out this tutorial, to create a client Id and client secret.

Step 2: Set up a React project

Install Nodejs

Before we create React App we need to install node.js.

if you already installed node.js please ignore this step 2 and go to step 3

Step 3: Create a React-app

After installing Node.js open the terminal or command prompt and create the React app with the following commands

1npx create-react-app frontend

A sample screenshot of React app files is shown below.

Screenshot1

Step 4: Configure the React project to establish a connection with Github.

After creating the React app then install the react-login-github commands

1npm i react-login-github

In src/App.js, add the following code.

import './App.css';
import LoginGithub from 'react-login-github';
import github from "./github.png"

function App() {
  function onSuccess(e) {
    fetch("http://127.0.0.1:8000/github/", {
      method: "POST",
      body: JSON.stringify({ "auth_token": e.code }),
      headers: {
        'Content-Type': 'application/json; charset=utf-8'
      }
    })
      .then((res) => res.json())
      .then((response) => {
        document.getElementById("email_id").innerText = response['email']
        document.getElementById("auth_token").innerText = response['tokens']
      })

  }
  function onFailure(e) {
    alert(e)
  }
  return (
    <div className="App">
      <LoginGithub
        clientId="Github client Id"
        onSuccess={onSuccess}
        onFailure={onFailure}

        className="github">
        <img src={github} alt="Sign in with github" className='github-image' ></img>
        <h2 className='github-name'>Sign in with github</h2>

      </LoginGithub>
      <div className="show-user_info">
        <div >
          <label className="info">Email Id:</label>
          <label id='email_id'></label>
        </div>
        