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!
- π 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.
β¨ 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
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
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
π
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,
),
)
π
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
π
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'))
π
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
π
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 -->
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:
β¨ 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.
Thanks for reading! For more resources and support, please access:
- π Soft UI Dashboard Flask - product page
- π Ask for support or download free starters
Top comments (8)
great library. Thanks for sharing/coding.
ππ
Quite a complete seed project.
Charts are usable?
ty
Charts are not connected to real data. This evolution is scheduled in the future releases.
As flask fun. This is awesome and actually first time seeing it. Thanks
ππ
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.