Flask Dashboard Argon - adding basic authentication

Hello coders,

This is part of the tutorial Flask Argon Dashboard - from Zero to Full-Stack. Thank you for reading!

The article explains how to add basic authentication features (login, register) to Argon Dashboard, the open-source app coded in Flask.

Steps to follow

Install Flask login

$ pip install flask-login

Install forms helpers

$ pip install flask_wtf
$ pip install wtforms

Create the forms

from flask_wtf import FlaskForm
from wtforms.validators import Email, DataRequired

class LoginForm(FlaskForm):
	username = StringField   (u'Username', validators=[DataRequired()])
	password = PasswordField (u'Password', validators=[DataRequired()])

class RegisterForm(FlaskForm):
	username = StringField   (u'Username', validators=[DataRequired()])
	password = PasswordField (u'Password', validators=[DataRequired()])
	email    = StringField   (u'Email'   , validators=[Email()])

The login page

<form role="form" method="post" action="">
    {{ form.username(placeholder="Username") }}
    {{ form.password(placeholder="Password",type="password") }}
</form>

Registration page

<form role="form" method="post" action="">
    {{ form.username(placeholder="Username") }}
    {{ form.email(placeholder="eMail") }}
    {{ form.password(placeholder="Password") }}
</form>

Integrate all changes

Update the __init.py file - to include the LoginManager and BCrypt
from flask            import Flask
from flask_sqlalchemy import SQLAlchemy # <-- new line
from flask_login      import LoginManager # <-- new line

app = Flask(__name__)

app.config.from_object('app.configuration.Config')

db = SQLAlchemy  (app) #flask-sqlalchemy

lm = LoginManager(   ) # flask-loginmanager
lm.init_app(app) # init the login manager

from app import views, models

Update views.py to handle the new authentication routes
  • import authentication helpers: login_user, logout_user
  • create new routes for login, logout, register
  • implement load_user callback, required by login manager

At this point, the authentication flow should be fully usable and accessing the registration page you should see this screen:

Flask Argon Dashboard - Registration Page

Future Steps

  • Connect the dashboard to real data
  • Deployment

Argon Dashboard Resources

Thank you for reading!
Show Comments

Get the latest posts delivered right to your inbox.