Dash App with user registration, login, and logout functionality

Dash Python
1

Hi all,
I have created an example Dash application that integrates with Flask for user authentication, including support for OAuth with Google. The application uses the Mantine library for UI components and supports user registration, login, and logout functionality. Additionally, it includes a theme switcher and sidebar toggle implemented via client-side callbacks. here is a link to the live app . Please allow for up to a minute for the app to comp up.

Application Structure

  • User registration and login using Flask.
  • OAuth authentication with Google.
  • Dynamic UI components using Dash and Dash Mantine Components
  • Theme switching functionality.

1. Clone the repository

Link to the Github repo

git clone  https://github.com/leberber/google-auth-flask-session
cd google-auth-flask-session

2. install required packages

pip install -r requirements.txt

3. Set up environment variables:

SECRET_KEY=your_secret_key
CLIENT_ID=your_google_client_id
CLIENT_SECRET=your_google_client_secret

4. Run The application:

python app.py

Application Structure

  • app.py: Main application file that sets up the Dash and Flask server, routes, and callbacks.
  • components/header.py: Contains the header component for the app.
  • components/sidebar.py: Contains the sidebar component for the app.
  • utils/helpers.py: Utility functions used in the application.
  • appconfig.py: Configuration file for external stylesheets and other settings.
  • db.json: JSON file used as a simple database for storing user information.

OAuth Authentication

To use OAuth authentication with Google, ensure you have registered your application with Google and obtained the client ID and client secret. These credentials should be added to your .env file as shown above.

Routes

  • /login: Handles user login via a POST request.
  • /register: Handles user registration via a POST request.
  • /signingoogle: Initiates Google OAuth login.
  • /authorize: Handles the callback from Google after authentication.

Callbacks

Python Callbacks

  • update_user_initials: Updates the user avatar and initials in the UI based on the current session state.

Clientside Callbacks

  • theme_switcher_callback: Toggles the theme between light and dark modes.
  • side_bar_toggle: Toggles the visibility of the sidebar.

Acknowledgments

This code is influenced by Dash community member @jinnyzor’s implementation of a login system with Flask, which can be found in this discussion: Dash App Pages with Flask Login Flow.

link to the app: https://google-auth-flask-session.onrender.com

13 Likes
2

That is amazing! Thank you very much for sharing @Amazigh

This is going to make things a lot easier for many people, myself included!

3

This is great. Thank you so much for sharing