New Component: 🔐 Google authentification and Sign In with Google button

Hello Streamlit community! :wave:

I recently created a small PyPI package called streamlit-google-auth to simplify the process of adding Google authentication to Streamlit apps. I thought I’d share it with you all in case anyone finds it useful.

The package use the Google API, so you’ll need a Google Cloud account and create the necessary credentials. Don’t worry, the setup is straightforward, and the package’s README provides step-by-step instructions.

Once you have your Google credentials JSON file, install the package using pip install streamlit-google-auth. The package provides two main functions: login and logout.

The login function checks the cookies to see if the user is already authenticated and creates a login button for the user to click. On the other hand, the logout function is just a function, and you’ll need to create a button to trigger it.

Here’s a quick example of how you can use the package in your Streamlit app:

import streamlit as st
from streamlit_google_auth import login, logout

# ... (set up your credentials and other variables)

login(
    secret_credentials_path=secret_credentials_path,
    cookie_name=cookie_name,
    cookie_key=cookie_key,
    cookie_expiry_days=cookie_expiry_days,
    app_url=app_url,
    color=color,
    justify_content=justify_content
)

if st.session_state['connected']:
    st.image(st.session_state['user_info'].get('picture'))
    st.write('Hello, '+ st.session_state['user_info'].get('name'))
    st.write('Your email is '+ st.session_state['user_info'].get('email'))
    if st.button('Log out'):
        logout(cookie_name)

example1

The package also provides additional functions like check_cookies, get_authorization_url, and check_authentication for more advanced usage and customization.

Find an example here, I use it in my app JADE
Or check the Github for more infos and maybe leave a star⭐: HERE
PyPI link

If you have any questions, feedback, or suggestions, feel free to reach out.

4 Likes

This is super handy! Thanks for creating this @Adrien_Bouvais! :raised_hands:

Thanks @Adrien_Bouvais. This is helpful.

In your app, which method are you using? #3 or #4?
I need the same functionality that you have currently in the app.

Hi @Adrien_Bouvais ,

Both the methods are not working for me. After login it redirects back to the same login page.

My javascript origin and redirect uri are set to same URL.

1 Like

Hello, this should be solve now.
Please ask on github regarding bugs and issues.

Hi! I have your component sort of working right now but the connected session is always set to False. I set up a local domain (mylocaldomain.com) and set that to my local website - 10.1.10.25:8501. I can click the Google login button, go through the authentication, and then I am returned to my site via the Hosts file. That said, the connected session state is still False.

I really appreciate all of the work you have done and I hate to bug you but do you have any ideas why this is failing?

authenticator = Authenticate(
secret_credentials_path=‘./credentials.json’,
cookie_name=‘My-Local-Cookie’,
cookie_key=‘aDdfnds99DJdjs’,
redirect_uri=http://mylocaldomain.com:8501,
)
authenticator.login()

if “connected” in st.session_state and not st.session_state[‘connected’]:
logging.debug(f"Connected is: {st.session_state[‘connected’]}")

I finally figured this out, you have this statement:

authorization_url, state = flow.authorization_url(
access_type=“offline”,
include_granted_scopes=“true”,
)

The include_granted_scopes=“true” returns ALL the scopes in a given app which, if it does not match the request, causes issues. If you drop that one line then everything works without issue.

Thank you for the control!