How do I handle CSRF for Google Sign-In? (Using Python and Django)

I'm building a simple Login page using Python and Django. I want to give the users the choice to login using either the Django account or Google Sign-In.

I've build some simple HTML and functions to flow between 4 pages: Main, login_success,logout_success and already_logged_in

As far as I've understand, I've set up at the very least a button on my login page, with some relevant scripts.

So, then I deploy to my Google Cloud, access the site, see the button and click on it and it redirects me to a Google Sign-In page where I can choose my account. I click on the account and I get a Forbidden: CSRF Error.

Am I missing something? I am not sure how to debug this.

This is my Main login HTML.(I'm not sure if the rest are needed to be shown?)

{% load i18n %}
{% block content %}
<!DOCTYPE html>
<html>

<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" media="all" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>

<head>

    <title>Google Signin Testing</title>
    <style>
    .left {
        float: left;
        width: 40%;
        padding-left:32%;
        padding-top:13%;
        height: 75%
        }
    .right {
        float: left;
        width: 40%;
        padding-top:5%;
        height: 100%
        }

    h1 {
        text-shadow: 2px 2px 2px #aaa;
        }

    h2.maintitle {
        padding-left:5%;
        font-variant: small-caps;
        font-size: 36px;'
        }

    </style>

    <script src="https://accounts.google.com/gsi/client" async defer></script>

    <script>
    function onSignIn(credentialResponse) {
        document.body.innerHTML = "Signed in";
    }
    </script>
</head>

<body>

    <div class='row' >
        <div class='container-fluid col-6 left' >
        </div>

        <div class='container-fluid col-6 right' >  

            <h1>{% trans 'Log-In' %}</h1>
            {% if request.user.is_authenticated %}
                <p>{% trans 'You are already logged in' %}, <a href="{% url 'login_success' %}">my homepage</a></p>
            {% else %}
                <form action="" method="post">
                    {% csrf_token %}

                    {% if form.non_field_errors %}
                        {% for x in form.non_field_errors %}
                            <text style="color:red; font-size:12px;" id='{{field.label}}'><b>{{x}}</b></text>
                            <p/>
                        {% endfor %}
                    {% endif %}

                    {% for field in form %}
                        <div class="fieldWrapper">
                            {{ field.label_tag }} {{ field }}
                            <br/>
                            {% for x in field.errors %}
                                <text style="color:red; font-size:12px;" id='{{field.label}}'><b>{{x}}</b></text>
                            {% endfor %}
                            <p/>
                        </div>
                    {% endfor %}

                    <input style='max-height:8vh;font-size:clamp(5px, 2.3vh, 30px);object-fit;' type="submit" value="Log In"></input>
                    <br/><br/>
                    
                    <!---div id="g_id_onload"
                         data-client_id="[Google Cloud ID]"
                         data-context="signin"
                         data-ux_mode="popup" /* popup */
                         data-login_uri="[Google Cloud URL]"
                         data-auto_prompt="false">
                    </div--->
                    
                    <div id="g_id_onload"
                         data-client_id="[Google Cloud ID]"
                         data-context="signin"
                         data-ux_mode="redirect"
                         data-login_uri="[Google Cloud URL]"
                         data-auto_prompt="false">
                    </div>

                    <div class="g_id_signin"
                         data-type="standard"
                         data-shape="rectangular"
                         data-theme="filled_blue"
                         data-text="signin_with"
                         data-size="medium"
                         data-logo_alignment="left"
                         data-width=300 >
                    </div>
                </form>

                <br/><br/><p><a href="">{% trans 'Forgotten your password?' %}</a></p>

            {% endif %} 

        </div>

    </div>

</body>


<!--Redirection if already Logged-In in cookies -->
{% if request.user.is_authenticated %}
<script type="text/javascript">
var csrftoken  = Cookies.get('csrftoken'); //using js.cookie.js

window.location = "{% url 'login_success' %}";

</script>
{% endif %}
</html> 

{% endblock %}

Im using a Django form to override the default auth_views.LoginView which returns to this HTML.

Edit I came across a part of Google's documentation that addresses this here, and the more I read it, I came to realise that their sample code might not be Javascript, but Python, so I inserted the entire sample into my source code. Thing is....they're using webapp2, which I check is only compatible with Python 2, NOT Python 3, which is what Im using. So that's back to the drawing board.