flask

Flask Soft Dashboard - OAuth, Dark-Mode, Docker

Open-source seed project enhanced with OAuth for Github, Dark-Mode, DB tools (Flask-Migrate), and Docker Support - Soft Dashboard Design.

UI Themes

Sep 16, 2022 • 4 min read

Soft UI Dashboard - Open-Source Flask Starter

Hello! This article presents the latest updates of Soft UI Dashboard, a popular open-source Flask starter recently updated to support OAuth sign-in for Github, persistent dark mode, improved Docker scripts, and other minor UI/UX improvements and fixes. The product, based on the permissive license, can be used in commercial projects or eLearning activities. Thanks for reading!

👉 Soft UI Dashboard Flask - Product page
👉 Soft UI Dashboard Flask - LIVE Demo

✨Product Highlights

This simple starter provides a few basic features that might help designers and developers to start faster a new app powered by Flask.

✅ Up-to-date dependencies
✅ Database: MySql, SQLite
✅ Session-Based authentication
✅ Social Login (optional) for GitHub
✅ Docker Scripts
✅ BS5 design, Dark-Mode (persistent)

Probably the fastest way to start the project in a local environment is to execute the Docker setup, which is basically a single line typed in the terminal.

Step #1 - Clone/download source from Github

$ git clone https://github.com/app-generator/flask-soft-ui-dashboard.git
$ cd flask-soft-ui-dashboard

Step #2 - Start in Docker

$ docker-compose up --build

Once the command finishes the execution, we should be able to visit the app in the browser.

Soft Dashboard - Dark-Mode Sign In (Flask Starter)

The key feature of this release is the social authentication for GitHub implemented on top of the Flask-Dance library. The changes that activate this feature are highlighted below and also the link to the related commit is provided.

Added modules - GH commit

Flask-Dance==5.1.0
blinker==1.4

Flask-Dance is the library that implements all the hard work like building the Github blueprint, processing the routing, and managing the authentication context for us.

Update Configuration - GH commit

    SOCIAL_AUTH_GITHUB  = False

    GITHUB_ID      = os.getenv('GITHUB_ID')
    GITHUB_SECRET  = os.getenv('GITHUB_SECRET')

    # Enable/Disable Github Social Login    
    if GITHUB_ID and GITHUB_SECRET:
         SOCIAL_AUTH_GITHUB  = True

The feature becomes active if the app detects in .env file the secrets for Github. A valid .env file that enables the feature looks like this:

# SOCIAL AUTH Github
GITHUB_ID=GITHUB_ID_value_here
GITHUB_SECRET=GITHUB_SECRET_value_here

Github Blueprint - GH commit

# Truncated content

github_blueprint = make_github_blueprint(
    client_id=Config.GITHUB_ID,
    client_secret=Config.GITHUB_SECRET,
    scope = 'user',
    storage=SQLAlchemyStorage(
        OAuth,
        db.session,
        user=current_user,
        user_required=False,        
    ),   
)

Users Model Update - GH commit

This update allows saving the Github user ID in the Users table ( oauth_github field) and binds the Users table to the OAuth context.

# Truncated content

class Users(db.Model, UserMixin):

    id            = db.Column(db.Integer, primary_key=True)
    username      = db.Column(db.String(64), unique=True)
    email         = db.Column(db.String(64), unique=True)
    password      = db.Column(db.LargeBinary) 
    oauth_github  = db.Column(db.String(100), nullable=True)   # OAuth NEW
    
class OAuth(OAuthConsumerMixin, db.Model):                     # OAuth NEW  
    user_id = db.Column(db.Integer, db.ForeignKey("Users.id")) # OAuth NEW
    user = db.relationship(Users)                              # OAuth NEW

Update Routes - GH commit

@blueprint.route("/github")
def login_github(): 

    """ Github login """
    if not github.authorized:
        return redirect(url_for("github.login"))

    res = github.get("/user")
    return redirect(url_for('home_blueprint.index'))

Register Github BP - GH commit

# Truncated content

from apps.authentication.oauth import github_blueprint           # OAuth NEW

def create_app(config):
    app = Flask(__name__)
    app.config.from_object(config)
    register_extensions(app)
    register_blueprints(app)

    app.register_blueprint(github_blueprint, url_prefix="/login") # OAuth NEW

    configure_database(app)
    return app

Enable GH Login Button - GH commit

<!-- GitHub button starts here -->
{% if config.SOCIAL_AUTH_GITHUB %}

  <p class="mb-2">or SignIn with</p>

  <a class="btn btn-outline" 
     href="{{url_for('authentication_blueprint.login_github')}}">
	<span class="text-lg fs-1 fab fa-github"></span>
  </a>

{% endif %}
<!-- GitHub ends here -->

On the sign-in page, if the GitHub secrets are detected and loaded by the app config, the social login button is automatically enabled, as shown below:

Soft Dashboard - OAuth SignIN Active (Flask Starter) — Soft Dashboard - OAuth Sign IN Active (Flask Starter)

Soft Dashboard - Charts Page (Flask Starter)

✨Design Highlights

This UI Kit is crafted by Creative-Tim on top of Bootstrap 5 with 10 sample pages and 70+ UI components. All components can take variations in color, that you can easily modify using SASS files and classes.

This Free Dashboard is coming with prebuilt design blocks, so the development process is seamless, and switching from our pages to the real website is very easy to be done.

For more information regarding this amazing design feel free to access the official product page.

Soft UI Dashboard - Template Version by (Creative-Tim)

Thanks for reading! For more resources and support, please access:

👉 Soft UI Dashboard Flask - product page
✨ Ask for support or download free starters

✨Product Highlights

✨OAuth Sign IN

✨Design Highlights