DEV Community

Cover image for Flask OAuth, Dark-Mode, Docker - Free BS5 Starter
Sm0ke
Sm0ke

Posted on • Originally published at blog.appseed.us

Flask OAuth, Dark-Mode, Docker - Free BS5 Starter

Hello Coders!

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!


✨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
Enter fullscreen mode Exit fullscreen mode

πŸ‘‰ Step #2 - Start in Docker

$ docker-compose up --build
Enter fullscreen mode Exit fullscreen mode

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).


✨ OAuth Sign IN

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.


πŸ‘‰ Flask OAuth Added modules - GH commit

Flask-Dance==5.1.0
blinker==1.4
Enter fullscreen mode Exit fullscreen mode

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.


πŸ‘‰ Flask OAuth 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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

πŸ‘‰ Flask OAuth 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,        
    ),   
)
Enter fullscreen mode Exit fullscreen mode

πŸ‘‰ Flask OAuth 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
Enter fullscreen mode Exit fullscreen mode

πŸ‘‰ Flask OAuth 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'))
Enter fullscreen mode Exit fullscreen mode

πŸ‘‰ Flask OAuth 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 
Enter fullscreen mode Exit fullscreen mode

πŸ‘‰ Flask OAuth 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 -->
Enter fullscreen mode Exit fullscreen mode

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 - 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:

Top comments (8)

Collapse
 
uithemes profile image
ui-themes

great library. Thanks for sharing/coding.

Collapse
 
sm0ke profile image
Sm0ke

πŸš€πŸš€

Collapse
 
crearesite profile image
WebsiteMarket

Quite a complete seed project.
Charts are usable?
ty

Collapse
 
sm0ke profile image
Sm0ke

Charts are not connected to real data. This evolution is scheduled in the future releases.

Collapse
 
otumianempire profile image
Michael Otu

As flask fun. This is awesome and actually first time seeing it. Thanks

Collapse
 
sm0ke profile image
Sm0ke

πŸš€πŸš€

Collapse
 
sm0ke profile image
Sm0ke

Still in top 3 for Python-based backends.
Might help to get a job, at least (many legacy products still use it ).

But looking to FastAPI, for sure will not harm yr career.