Login with Google Sign on Dash app


#1

I have no problem getting a Flask app to use Google Sign In through flask-dance , but I’m unable to make it work with a Dash app. Basically, I expose the Flask server as the user guide says and then use the server to implement the Google Sign In functionality as I do in a Flask app. Yet, when I start the app, I get to the Dash app without getting the Google Sign In page. I copy my (edited) code below. Any help would be more than appreciated:

import dash
import dash_core_components as dcc
import dash_html_components as html

from flask import Flask, redirect, url_for
from flask_dance.contrib.google import make_google_blueprint, google

app = dash.Dash()
server = app.server

blueprint = make_google_blueprint(
    client_id='*****',
    client_secret='*****',
    scope=["profile", "email"]
)

server.register_blueprint(blueprint, url_prefix="/login")

@server.route("/")
def index():
    if not google.authorized:
        return redirect(url_for("google.login"))
    resp = google.get("/oauth2/v2/userinfo")
    assert resp.ok, resp.text
    return "You are {email} on Google".format(email=resp.json()["email"])


app.layout = html.Div(children=[
    html.H1('Hello Dash')
])

if __name__ == '__main__':
    server.run(host="0.0.0.0", port=80)

#2

Lucas Chapin has a working solution here: https://github.com/lucaschapin/dash-google-auth


#3

I have also implemented the same in my MLM Software Websites


#4

Nice help team. loved it


#5

Hi, I tried using dash-google-auth but I’m getting an error. I did all of the steps from the README.md file and replaced the variables for client ID and client secret with real values like this:

app.server.config["GOOGLE_OAUTH_CLIENT_ID"] = os.environ.get("client-id-here")
        app.server.config["GOOGLE_OAUTH_CLIENT_SECRET"] = os.environ.get("client-secret-here")

However, when I ran python app.py and opened “localhost:5000” in my browser I got the following error:

401. That’s an error.

Error: invalid_client

The OAuth client was not found.

Request Details
response_type=code
client_id=None
redirect_uri=http://localhost:5000/login/google/authorized
scope=profile email
state=1kPQ9gCwR3EkGbXV5LdnPLu1TgQEpn
access_type=offline
approval_prompt=force
That’s all we know.

I put the following into the “Authorized redirect URIs” field: http://localhost:5000/login/google/authorized

Any idea why I might be getting this error? Thanks.


#6

I recently played around with using flask-dance myself. I wish I had come across Lucas’ repo sooner – I will probably rebase my auth class around his.

If you take a look at what google’s oauth is reporting, the OAuth request isn’t formed properly because client_id=None.

That means that for some reason this line isn’t taking:
app.server.config["GOOGLE_OAUTH_CLIENT_ID"] = os.environ.get("client-id-here")

Maybe try hard-coding the client id and secret and try again? Good luck-

One thing I noted about dash-google-auth: it doesn’t attempt to handle invalid tokens (basically any error types from oauthlib.oauth2.rfc6749.errors). In this case, the client will continue to receive 403 unauthorized until the token is deleted (session clear).


#7

You need to remove “os.environ.get” and just put the ID and secret in, as follows:

app.server.config["GOOGLE_OAUTH_CLIENT_ID"] = "client-id-here"
    app.server.config["GOOGLE_OAUTH_CLIENT_SECRET"] = "client-secret-here"