Introduction :

Google SSO revolves around the core concept of the Google Account, which functions as the primary source of identity verification, housing the user's authentication details. When users log in using their Google credentials, they are essentially validating their identity with Google.

Recognising the widespread adoption of Google Accounts, numerous third-party applications and services seamlessly incorporate Google SSO into their authentication systems. These applications serve as providers, utilizing Google as the central identity authentication source.

Upon attempting to access a service that supports Google SSO, users are redirected to Google's authentication servers. At this point, they enter their Google username and password. Once the credentials are verified, Google generates a token, confirming the user's authenticated status.

Flow Diagram:

Prerequisites:

work experience with Python

work experience with React

Steps:

Step 1: Create a Google client ID and client secret

In order to integrate Google SSO with your web app, first, you need a Google account.

Then we have to generate API keys from the Google SSO service; this can be done via the Google Cloud Platform.

To generate the API keys (client ID and client secret), follow the Google API keys creation Article

Before you follow the article, in order to test Google SSO on localhost, which means locally in your system, there are some changes that need to be made. So the changes are given below.

Google API keys creation Article: https://episyche.com/blog/how-to-create-oauth-client-id-and-client-secret-for-google

Steps to test Google SSO using localhost (i.e locally on your computer)

After the OAuth consent screen is completed in the Google API keys creation Article, follow the steps.

Click on the credentials menu in the sidebar.

Then click on create credentials > OAuth client ID

Select the application type as a web application

The name field can be your choice.

Then the important part is Authorised JavaScript origins

First, click on the ADD URI to add an additional field because you need two fields to test locally.

Then add the following two URLs in the fields. http://localhost, http://localhost:3000

The number 3000 indicates the port in which your React app is running locally.

Finally, Authorised redirect URIs add the following URI http://localhost:3000 and click the Save button..

Copy the Google client ID from the Credentials that you just created. Store it in a safe place for future use

Step 2: Set up a React frontend.

Below every code block is explained to understand the code and for your reference, the full frontend code is attached in the Github repo: https://github.com/episyche/google_sso_flask_reactjs_example/blob/main/frontend/src/components/login/login.jsx

create a new react project

npx create-react-app frontend

create a new component for Google SSO Login. Here Login component is used.

Import the Login component to App.js in order to access it.

Login component

Add the Google CDN script using react

const loadScript = (src) =>
new Promise((resolve, reject) => {
    if (document.querySelector(`script[src="${src}"]`)) return resolve()
    const script = document.createElement('script')
    script.src = src
    script.async = 1;
    script.onload = () => resolve()
    script.onerror = (err) => reject(err)
    document.body.appendChild(script)
})

Add the following the Google SSO function

The following function renders a Google sign-in button and connects to the Google SSo service with the client ID that you have given.

Replace the google_sso_public_key variable with the client id that you copied in the Google cloud platform.


function google_sso(){
    let google_sso_public_key = "130916168050-4l7rcjkl30gh92hopg69gmi78s7rqlf1.apps.googleusercontent.com";
    const src = 'https://accounts.google.com/gsi/client'
    const id = google_sso_public_key
    loadScript(src)
    .then(() => {
        /*global google*/
        google.accounts.id.initialize({
            client_id: id,
            select_by: "btn",
            callback: handleCredentialResponse,
        })
        google.accounts.id.renderButton(
            googleButton.current,
            { theme: 'outline', text: 'signin_with',  shape: 'pill', size: "large"}
        )
    })
    .catch(console.error)
    return () => {
        const scriptTag = document.querySelector(`script[src="${src}"]`)
        if (scriptTag) document.body.removeChild(scriptTag)
    }
}

You can customize the style of the Google Sign-in button with the theme attribute mentioned below also visit this URL (https://developers.google.com/identity/gsi/web/reference/js-reference#type ) for more customisation options.

google.accounts.id.renderButton(
            googleButton.current,
            { theme: 'outline', text: 'signin_with',  shape: 'pill', size: "large"}
        )

googleButton.current is a reference to the div element in the return statement. The reference is done using the useRef hook provided by Reactjs.

The code to reference the div element inside the return statement using the useRef hook is given below

For details refer to the full code in the Github Link: https://github.com/episyche/google_sso_flask_reactjs_example/blob/main/frontend/src/components/login/login.jsx

import { useRef, useEffect, useState } from "react";
export default function Login(){
const googleButton = useRef(null);
    return(
        <>
            Login page
            <div ref={googleButton} id='google-ref'></div>
        </>
    )

we should initialize the google_sso function on page load, thus we use the useEffect hook. The google_sso function renders the Google sign-in button to the UI.

The useEffect code is given below.

import { useRef, useEffect, useState } from "react";
export default function Login(){
const googleButton = useRef(null);
const [reload_google_btn, set_reload_google_btn] = useState(false);
useEffect(() => {
    google_sso()
    setTimeout(()=>{
        set_reload_google_btn(true)
    }, 1000)
}, [reload_google_btn])

Note:

Sometimes the Google button won’t render

To fix this issue we’re calling the google_sso function again after 1 seconds time delay

we are using a React state variable reload_google_btn and after 1 second time delay the state variable is changed, this causes the useEffect hook to once again call the google_sso function.

Get an Authentication code from Google SSO service:

once the google_sso function renders a Google login button UI. When we click the Google login button the front interacts with the Google service and in response the Google service returns an authentication code.

Once we get a response from the Google SSO service, a local function named handleCredentialResponse is called, and the authentication code is passed to the function as an argument.

The authentication code is sent to the backend using the handleCredentialResponse function via a POST request for further verification.

The handleCredentialResponse function code is given below

function handleCredentialResponse(response) {
    if (response.credential) {
        var data = { "auth_token": response.credential }
        fetch(`http://localhost:5000/api/accounts/google`,
            {
            method: "POST",
            body: JSON.stringify(data),
            headers: {
            'Content-Type': 'application/json; charset=utf-8'
            }
        })
        .then((res) => res.json())
        .then((res) => {
            processGoogleSSOResponse(res)
        })
    }
}

The frontend setup is completed.

The full frontend code is attached in the Github repo:

https://github.com/episyche/google_sso_flask_reactjs_example/tree/main/frontend

Step 3: Set up a Flask backend

pip install Flask

The basic flask project setup is given below

from flask import Flask
app = Flask(__name__)

@app.route("/")
def hello():
  return "Hello World!"

if __name__ == "__main__":
  app.run()

Create an API to handle the request from Google SSO

For your understanding every code block is explained, to see the full code visit the Github repo: https://github.com/episyche/google_sso_flask_reactjs_example/blob/main/backend/app.py

Install the Google Python library

pip install google-api-python-client

Install the Flask CROS Library, this library is used to fix the CROS error. While sending Google authentication code from frontend to backend.

pip install flask-cors

from flask import Flask, jsonify, request
from flask_cors import CORS
from google.oauth2 import id_token
from google.auth.transport import requests as google_requests

app = Flask(__name__)
CORS(app)

@app.route("/")
def hello():
  return "Hello World!"

if __name__ == "__main__":
    app.run(port=5000, host='0.0.0.0')

Below is the Google API, this API verifies the authentication code provided from the frontend.

If the authentication code is legitimate we use it to get user information like email, first name and last name etc.

If the authentication code is not legitimate, we can give "invalid request" response to the frontend.


GOOGLE_CLIENT_ID = "130916168050-4l7rcjkl30gh92hopg69gmi78s7rqlf1.apps.googleusercontent.com"
@app.route('/api/accounts/google', methods=['POST'])
def google_sso():
    print("entering /api/accounts/google")
    data = request.get_json()
    auth_token = data['auth_token']
    sso_user_credentials = id_token.verify_oauth2_token(auth_token, google_requests.Request())
    if sso_user_credentials['aud'] != GOOGLE_CLIENT_ID:
        return jsonify({"data": "invalid request"}), 400
    response_data = {}
    first_name, last_name = get_sso_user_fullname(sso_user_credentials)
    response_data["email"] = sso_user_credentials['email'].lower()
    response_data["first_name"] = first_name
    response_data["last_name"] = last_name
    return jsonify({'data': [response_data]}), 201

The get_sso_user_fullname function extracts the first and last name of the user.

def get_sso_user_fullname(sso_user_credentials):
        first_name = ""
        last_name = ""
        full_name_list = []
        try:
            first_name = sso_user_credentials["given_name"]
        except Exception as e:
            print(e)
            temp1 = sso_user_credentials["name"]
            full_name_list = temp1.split(" ")
            first_name = full_name_list[0]
        try:
            last_name = sso_user_credentials["family_name"]
        except Exception as e:
                print(e)
                try:
                    last_name = full_name_list[1]
                except Exception as e:
                    print(e)
                    last_name = ""

        return first_name, last_name

The backend setup is completed.

To see the full backend code visit the GitHub repo https://github.com/episyche/google_sso_flask_reactjs_example/blob/main/backend/app.py

Result:

start the frontend

npm start

start the backend

python3 app.py

Click on the Google Sign-in button, then choose the Google account you want to login

The user information will be console logged using javascript this user data is given from the backend

The ultimate and simplest blog to integrate Google SSO with any web app using React js and Flask