1

I'm setting up a Google login option using flask-dance. My route I've create "http://localhost/login/google" successfully directs you to sign in with google and returns a json with information.

Now I need to enable a link for users to get there. None of the instructions in flask-dance documentation or any user guides explain how to generate the login button. They basically just tell you to go to the login URL you create in the process. I'm certain I could just make a Google link on my page but I was trying to use the official button.

Googles documentation explains there is a pop-up and redirect option but how to enable it isn't easy to find. I've tried putting in the "data-login-uri" where I want the user to login from but when I load the HTML on my localhost it defaults to a blank pop-up window.

I think I just need to enable to redirect mode they talk about in their documentation but I can't seem to figure out how.

Here is the HTML for the Google oath button I am using:

<!-- google oauth -->
<div class="d-flex justify-content-center mt-5 mb-4">
    <div id="g_id_onload" 
        data-client_id="..."
        data-login_uri="http://localhost/login/google" 
        data-auto_prompt="false">
    </div>
    <div class="g_id_signin" 
        data-type="standard" 
        data-logo_alignment="center"
        data-size="large" 
        data-theme="filled_blue" 
        data-shape="circle"
        data-text="continue_with"
        data-width=360>
    </div>
</div>

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

1 Answers1

0

Found it by using's the HTML generator in Googles developer tools. I added the data-context="signin" and data-ux_mode="redirect" to the HTML and it now redirects users to the correct endpoint instead of the default pop up window.

<!-- google oauth -->
<div class="d-flex justify-content-center mt-5 mb-4">
    <div id="g_id_onload" 
        data-context="signin"
        data-ux_mode="redirect"
        data-client_id="<your id here>"
        data-login_uri="<your endpoint here" 
        data-auto_prompt="false">
    </div>
    <div class="g_id_signin" 
        data-type="standard" 
        data-logo_alignment="center"
        data-size="large" 
        data-theme="filled_blue" 
        data-shape="circle"
        data-text="continue_with"
        data-width=360>
    </div>
</div>

UPDATE I have found that in flask_dance's current version the official google button does not play nice. With the redirect mode functioning, I encountered errors when using the login interface. I ended up just using html/css I found where someone else had designed the google login button from scratch and just using that as a link to the endpoint flask_dance wanted.

Rug
  • 13
  • 4