DEV Community: Kitibwa Rich

Building a Webapp with User Authentification using Flask

Kitibwa Rich — Fri, 27 Aug 2021 21:51:04 +0000

In this article, I will be showing you how to build a simple web app with user authentification or login using flask.

This app will have the following features:

Users will be able to sign up using their email addresses and also create a password.
Once a user is signed in, they are registered in the database.
If any user tries to sign in with credentials that already exist in the database, an error message will be returned notifying them.
The app will have a remember me function to remember users so they don't always have to enter their passwords to login to the app.
When logged in, a user will be able to see other routes of the app like profile and sign out.
When signed out, the user can only see the home, Login and signup routes.

Alright lets get coding.

The first step is to fire up the IDE of choice.
Then create a project folder and then set up a virtual environment in which we will add the different dependencies for the app.

Install the necessary packages such as flask, flask-login(which is used for the user login and authentication), flask-sqlalchemy which is used to create a database to store the data.

Once all that is set up, create a new python file and call it init.py. This will initialise the app.

Open the init.py file and import the following packages;

from flask import Flask
from flask_sqlalchemy import SQLAlchemy
from flask_login import LoginManager

Flask provides a lightweight framework for building our web app.
SQLAlchemy is used to create the database to store user data such as emails and passwords.
Checkout the official documentation here to know about flask-SQLAlchemy.
flask-login provides user session management for flask. It handles common tasks such as logging in, logging out and remembering users' sessions . Be sure to check out the official flask-login documentation here for more information about it.

Next, we will create a function to initialize the database using SQLAlchmemy as shown in the code snippet below.

Initialise SQLAlchemy so we can use it later.

db = SQLAlchemy()

Create a function called create_app and create the flask instance and also add other configurations for the database.

def create_app():
    app = Flask(__name__)
    app.secret_key = b'_5#y2L"F4Qz\k\xec]/'
    app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///users.db'
    db.init_app(app)

create a variable called login_manager to create a Login Manager instance to manage user login.

login_manager = LoginManager()
login_manager.login_view = 'auth.login'
login_manager.init_app(app)

Then create another python file called models.py to store information about the users.

The model created is constituted of class which is translated into tables in our database. Each of the attributes are transformed into columns for the table.

class User(UserMixin, db.Model):
    id = db.Column(db.Integer, primary_key=True)
    email = db.Column(db.String(100), unique=True)
    password = db.Column(db.String(100))
    name = db.Column(db.String(1000)

Open the init.py file again and import class User from models.py

Open a new python file called auth.py. This file will contain all the logic for our auth routes for example login and signup.

Import the neccesary packages first.

from flask import Blueprint, render_template, redirect, url_for, request, flash
from werkzeug.security import generate_password_hash, check_password_hash
from models import User
from flask_login import login_user, logout_user, login_required
from init import db

Flash is used to show messages to the user for example error messages.
Blueprint is a python package that can help structure a flask application by grouping its functionality into reusable components. Read more about Blueprint package here.

In this file we will put all the auth routes with logic to add new users to the database ,remember the user and logout the user.

Here is the full file below

auth.py

from flask import Blueprint, render_template, redirect, url_for, request, flash
from werkzeug.security import generate_password_hash, check_password_hash
from models import User
from flask_login import login_user, logout_user, login_required
from init import db

auth = Blueprint('auth', __name__)


@auth.route('/login', methods=['GET', 'POST'])
def login():
    if request.method == 'GET':
        return render_template('login.html')
    else:
        email = request.form.get('email')
        password = request.form.get('password')
        remember = True if request.form.get('remember') else False
        user = User.query.filter_by(email=email).first()

        if not user:
            flash('Please sign up first!')
            return redirect(url_for('auth.signup'))
        elif not check_password_hash(user.password, password):
            flash('Please check your login details and try again.')
            return redirect(url_for('auth.login'))
        login_user(user, remember=remember)
        return redirect(url_for('main.profile'))


@auth.route('/signup', methods=['GET', 'POST'])
def signup():
    if request.method == 'GET':
        return render_template('signup.html')
    else:
        email = request.form.get('email')
        name = request.form.get('name')
        password = request.form.get('password')
        user = User.query.filter_by(email=email).first()

        if user:
            flash('Email already exists')
            return redirect(url_for('auth.signup'))
        new_user = User(email=email, name=name, password=generate_password_hash(password, method='SHA256'))

        db.session.add(new_user)
        db.session.commit()
        return redirect(url_for('auth.login'))


@auth.route('/logout')
@login_required
def logout():
    logout_user()
    return redirect(url_for('main.index'))

This is the full init.py file.

from flask import Flask
from flask_sqlalchemy import SQLAlchemy
from flask_login import LoginManager

db = SQLAlchemy()


def create_app():
    app = Flask(__name__)
    app.secret_key = b'_5#y2L"F4Qz\k\xec]/'
    app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///users.db'
    db.init_app(app)
    login_manager = LoginManager()
    login_manager.login_view = 'auth.login'
    login_manager.init_app(app)

    from models import User

    @login_manager.user_loader
    def load_user(user_id):
        return User.query.get(int(user_id))

    # blueprint for auth routes in the app
    from auth import auth as auth_blueprint
    app.register_blueprint(auth_blueprint)

    # blueprint for non auth routes in the app
    from main import main as main_blueprint
    app.register_blueprint(main_blueprint)

    return app

The main.py file

from flask import Blueprint, render_template
from flask_login import login_required, current_user
from init import create_app, db

main = Blueprint('main', __name__)


@main.route('/')
def index():
    return render_template('index.html')


@main.route('/profile')
@login_required
def profile():
    return render_template('profile.html', name=current_user.name)


app = create_app()

if __name__ == '__main__':
    db.create_all(app=create_app())
    app.run(debug=True)

This is the main entry point of the app.

The models.py file

from flask_login import UserMixin
from init import db


class User(UserMixin, db.Model):
    id = db.Column(db.Integer, primary_key=True)
    email = db.Column(db.String(100), unique=True)
    password = db.Column(db.String(100))
    name = db.Column(db.String(1000))

    def __repr__(self):
        return'<User %r>' % self.id

    def __init__(self, email, password, name):
        db.create_all()
        self.email = email
        self.password = password
        self.name = name

After creating the logic for the app, we now create the templates of the different pages.

Create a templates folder in the main project folder and create a new html file called base.html

This is the main html file from which all the other html file will inherit. We use jinja templates to extend the base.html to the other templates.

Here is the full base.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Flask Login</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css" />
    <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">

</head>
<body>
<section class="hero is-fullheight" style="background-image:#C4FCEF;">

    <div class="hero-head">
        <nav class="navbar">
            <div class="container">
                <div class="navbar-brand">
                    <a href="{{ url_for('main.index') }}" class="navbar-item" style="color:white">
                        CampNight
                    </a>
                </div>

                <div id="navbarMenuHeroA" class="navbar-menu">
                    <div class="navbar-end">
                        <a href="{{ url_for('main.index') }}" class="navbar-item">
                            Home
                        </a>
                        {% if current_user.is_authenticated %}
                        <a href="{{ url_for('main.profile') }}" class="navbar-item">
                            Profile
                        </a>
                        {% endif %}

                        {% if not current_user.is_authenticated %}
                        <a href="{{ url_for('auth.login') }}" class="navbar-item">
                            Login
                        </a>
                        <a href="{{ url_for('auth.signup') }}" class="navbar-item">
                            Sign Up
                        </a>
                        {% endif %}

                        {% if current_user.is_authenticated %}
                        <a href="{{ url_for('auth.logout') }}" class="navbar-item">
                            Logout
                        </a>
                        {% endif %}
                    </div>
                </div>
            </div>
        </nav>
    </div>

    <div class="hero-body">
        <div class="container has-text-centered">
            {% block content %}{% endblock %}
        </div>
    </div>
</section>
</body>
</html>

Notice that for the style we use Bulma css which is a nice framework. Read more about it here.

We then create an index.html which is the homepage.

index.html

{% extends "base.html" %}

{%block content%}
<h1 class ="title">Welcome to CampNight </h1>
<h2 class="subtitle">Are you ready for an adventure?</h2>
{%endblock%}

Check out the jinja templates used here in curly brackets. You can read more about jinja templates here.

We then create the login.html template

login.html

{% extends "base.html" %}

{%block content%}
<div class="column is-4 is-offset-4">
    <h3 class="title">Login</h3>
    <div class="box">
        {% with messages = get_flashed_messages() %}
            {% if messages %}
                <div class="notification is-danger">
                     {{ messages[0] }}
                 </div>
            {% endif %}
        {% endwith %}
        <form method="POST" action="/login">
            <div class="field">
                <div class="control">
                    <input class="input is-large" type="email" name="email" placeholder="Your Email" autofocus="">
                </div>
            </div>
            <div class="field">
                <div class="control">
                    <input class="input is-large" type="password" name="password" placeholder="Your Password">
                </div>
            </div>
            <div class="field">
                <label class="checkbox">
                    <input type="checkbox">
                    Remember me
                </label>
            </div>
            <button class="button is-block is-info is-large is-fullwidth">Login</button>
        </form>
    </div>
</div>
{%endblock%}

Then the profile.html to display the name of the particular user once they login.

{% extends 'base.html' %}

{% block content %}
<h1 class="title">
    Welcome, {{ name }}!
</h1>
{% endblock %}

We then add the signup.html for users to sign up.

{% extends "base.html" %}

{% block content %}
<div class="column is-4 is-offset-4">
    <h3 class="title">Sign Up</h3>
    <div class="box">
        {% with messages = get_flashed_messages() %}
            {% if messages %}
                <div class="notification is-danger">
                    {{ messages[0] }}<br> Go to <a href="{{ url_for('auth.login') }}">login page</a>
                </div>
            {% endif %}
        {% endwith %}
        <form method="POST" action="/signup">
            <div class="field">
                <div class="control">
                    <input class="input is-large" type="email" name="email" placeholder="Email" autofocus="">
                </div>
            </div>
            <div class="field">
                <div class="control">
                    <input class="input is-large" type="text" name="name" placeholder="Name" autofocus="">
                </div>
            </div>
            <div class="field">
                <div class="control">
                    <input class="input is-large" type="password" name="password" placeholder="Password">
                </div>
            </div>
            <button class="button is-block is-info is-large is-fullwidth">Sign Up</button>
        </form>
    </div>
</div>
{% endblock %}

Add another folder in the project folder and name it static.
This folder contains resources for the app such as customised css sheets and images added to the app.

The app is now finally ready and you can run it by running python main.py in the terminal.

Run the app on local host 5000 and it will displayed in the browser.

Feel free to run the app hosted on here

Resources

Be sure to check out this amazing medium article for more on how to implement user authentification in your web app using flask.

A gentle introduction to Flask

Kitibwa Rich — Wed, 11 Aug 2021 20:54:43 +0000

What is Flask?

According to wikipedia Flask is micro web framework written in Python. It is classified as a microframework because it does not require particular tools or libraries. Flask makes it possible to easily build web applications.

Why use flask?

There are other options you could consider to build your web application, so you may be wondering why choose flask?
Well, Flask is much easier to learn and doesn't need a large code base to implement a simple web application as we will see later on.

Getting started

In this article I will be showing you how to build a very simple hello world web application using flask. We will be using python 3.

Using a virtual environment.

When developing in python, its always important to write your code in a virtual environment.

A virtual environment is an isolated environment where dependencies for a particular python project can be downloaded. Each python project should have it's own virtual environment where the specific dependencies are downloaded separate from the main global installation on your system.
With a virtual environment, everyone on the team can be able to run the python project with the same dependencies so this helps solve errors which could arise due to version changes in some dependencies.

Setting up the virtual environment.

A virtual environment can be easily set up as shown below:

First, fire up your favorite IDE and create a project folder.
In the terminal, type pip3 install virtualenv.
Type virtualenv env to create your virtual environment. Note that the env after virtualenv can be any name you choose to call your virtual environment. So it could be virtualenv myapp, or any name that you feel is appropriate.

After successful creation of the virtual environment, you should be able to see a folder added to your project folder with the name of the virtual environment you just created.

Now to activate your virtual environment, you just need to run the command your_virtual_env_name\Scripts\activate.bat on windows and for mac,
run source your_virtual_env_name/bin/activate.

Your virtual environment should now be active. The name will be displayed in brackets just before the path in the terminal.

Now that we have a virtual environment up and running we can start building our flask app.

Setting up the flask app.

Within the activated virtual environment, install flask using the terminal by typing pip3 install Flask.
Create a new python file in the project folder, you can name it main.py or app.py.

Open up the newly created python file and import flask.

from flask import Flask

Then make an instance of the Flask class and call it app. Calling it app is just by convention.

app = Flask(__name__)

The first first argument __name__ is the name of the application module. This is needed so that Flask knows where to look for resources such as templates and static files.

Then we use the route() decorator to tell Flask what URL should trigger our function.

@app.route('/')

We then add a function to return what we want to display in the browser.

def Hello():
    return "Hello World!"

Finally the app is started by running,

if __name__ == "__main__":
    app.run(debug=True)

You can use app.run() without the arguments and the app will still run, but usually its good to include the debug=Trueargument in order to be able to see any error logs in case there are any errors.

That's if for our set up of the basic app.

This is the full code for our app.

from flask import Flask

app = Flask(__name__)

@app.route("/")
def hello_world():
    return "<p>Hello, World!</p>"

if __name__ == "__main__":
    app.run(debug=True)

Now the next step is to run the app in the browser.

To do this, go back to the terminal, ensure that you are still in the virtual environment and run python main.py. main.py is the name of the python file that is the entry point for your app. So you could give it any name that makes sense to your project.

On running the command python main.py a URL will show up in the terminal and you can open it up in the browser to see the web application.

Viola, that's how simple it is to get started with flask.

This is a very basic introduction just to whet your appetite for flask . Be sure to check out more resources on how you can use flask for a variety of cool stuff.

The official flask documentation here is a good start to understand flask.

Introduction to Python Functions

Kitibwa Rich — Tue, 03 Aug 2021 06:28:16 +0000

What is a function?

A function is a set of instructions/ block of code that is put together to achieve a specific outcome or perform specific tasks.
Functions enable us avoid having repetitive blocks of code in our program making it easy to read and maintain.

Functions in python are either built-in or user defined.

Built-in functions.

These are functions that come with python installation. For example the print() function that is used to print to the console.
Other types of built-in functions include float() which returns a floating type number, input() which allows user input, int() which returns an integer, etc.

User defined functions.

These are functions that a developer creates in order to perform a given task.

Functions are defined using the def keyword followed by the function name and parenthesis then a full colon.

def my_function(parameters):
    """Docstring"""
    statement
    return
my_function()

The function body consists of an optional docstring that is written inside triple quotation marks. It's optional but advisable as good practice to include a docstring at the start of your function as way to describe what the function is supposed to do.

The statement refers to the code in the function. It could be an if statement, a for loop, a print statement or any other code that maybe added to the function. This must be indented.

The return statement is a keyword that exits a function optionally passing back an expression to the caller.
The return statement can be written without any arguments and in that case its the same as return None so it will just exit the function.

However, there can be arguments added after the return statement. The return statement can consist of a variable, or expression which is returned at the end of the function execution.

Finally the function call which is done by writing the name of the function followed by parenthesis. The parenthesis is filled with arguments that are passed when calling the function. Sometimes they can be left empty. The function call is de-indented and at the same margin with the def keyword.

The parenthesis in the function definition can either be left empty or filled with parameters.

Function arguments.

An argument is a value that is sent to the function when it is called. It's important to note that by default a function should be called with the correct number of arguments, meaning that if your function expects two arguments, it must called with two arguments not more not less lest it throws an error.

There are different types of arguments in python functions.

Default arguments.

This is an argument that assumes a default value if a value is not passed in the function call for that argument.

def car_brand(brand="Toyota"):
    print("I drive a " + brand)

car_brand("Benz")
car_brand("Jeep")
car_brand("Volvo")
car_brand()

The above code will produce the following when run.

I drive a Benz
I drive a Jeep
I drive a Volvo
I drive a Toyota

The last function call was provided no argument so when it was called, the default argument that was supplied in the function definition was passed.

Keyword arguments.

When using keyword arguments, you provide names to the parameters as you pass them through the function definition so during the function call, the caller identifies the arguments by the parameter names.
This allows you to place arguments out of order since the python interpreter is able to use the keywords provided to match the values with the parameters.

def my_friends(friend1, friend2, friend3):
    print("My best friend is " + friend1)

my_friends(friend3 = "Mark", friend1 = "James", friend2 = "Sophie")

This function will return:

My best friend is James

The order in which you call the arguments doesn't matter.

Arbitrary keyword arguments

If you don't know how many keyword arguments will be provided into your function, add two asterisks ** before the parameter name in the function definition.
Usually the keyword **kwargs is used to represent keyword arguments.
The double asterisks allow us to pass any number of keyword arguments.

def favorite_place(**kwargs):
    print("My favorite city is " + kwargs["city"])


favorite_place(country="England", city="London")

This code will produce the output below:

My favorite city is London

Arbitrary arguments (*args)

If you don't know the number of arguments that will be passed into you function, add an asterisk (*) before the parameter name in the function definition. The function will receive a tuple of arguments and access them accordingly.

Using the *, the variable that we associate with the * becomes an iterable meaning you can do things like iterate over it.

def friends(*args):
    for friend in args:
        print(friend)

friends("Marcus", "James", "John", "Oliver")

The code above iterates through the args and prints out each friend passed in the friends function. You can pass as many arguments in friends as you want and they will all be printed out.

Anonymous functions.

Anonymous functions aren't declared using the def key word. Instead, the key word Lambda is used.

A Lambda function can take any number of arguments but return just one value in form of an expression. They are restricted to a single expression.

lambda arguments: expression

lambda x,y: x+y

Here x,y are the arguments and x+y is the expression.

An advantage of using Lambda functions is that you can write a function in one line of code making it concise.

add = lambda x, y: x + y
print(add(5 , 6))

The above lambda function adds two numbers together.

When the same function is written with a function definition, It is longer

def add(x, y):
    return x + y

print(add(5, 6))

yet both these functions return the same result.

I hope this brief introduction makes functions in python a bit easier for you to understand. Cheers.

Python Basics, Python 101!

Kitibwa Rich — Sat, 24 Jul 2021 12:53:05 +0000

What is python?

Python is an interpreted, object oriented ,dynamically typed, high level programming language. This means that instead of executing all of the source code at once, python executes it line by line. Its high level built-in data structures combined with dynamic typing make it suitable for rapid application development.

Python has applications in a wide range of areas including:
Artificial intelligence and machine learning.
Web development
Game development
Digital signal processing

Python Datatypes

A datatype is an attribute of data which tells the compiler or interpreter how the programmer intends to use the data.

In python there are a variety of data types including strings, float, int, boolean.

A string is a collection of characters enclosed in quotation marks .It could be double ("")or single ('')quotation marks but one must ensure that they don't mix them up.

x = "hello world"

A float is a decimal number

num_float = 0.42

An int is a number without any decimals

num_integer = 25

Boolean has two types; true or false.

You can easily get the data type of a variable in python using the type() function

type(x) will return str data type.

Data structures

Python is made up of a variety of data structures some inbuilt and some can be user defined.
Data structures are code structures that define how data is stored and organized.
Python has four built-in data structures i.e. lists, dictionaries ,tuples and sets.

Lists

A List is an array-like data structure that contains an ordered collection of items.
ordered means that every item in a list has a position.
Lists are mutable (can be changed).

A list is created by defining a list name and the items are put in square brackets.
For example
my_list = []

The items are separated by comas.

my_list = [a,b,c,d]

If you want to get an element from a list you use zero based indexing, meaning that the first element is at position 0

get_first_item = my_list[0]

This will return the first item in the list which is a.

Lists have many methods which can be used to perform operations on them.
For example
append() which is used to add an element at the end of the list
insert() which is used to add an element at a specified position.
copy() which is used to return a copy of the entire list.

Tuples

A tuple is like a list but it is immutable meaning it cannot be changed once it's declared. Tuples are also ordered meaning that they have a defined order and it will not be changed. A tuple is declared using parenthesis ().

my_tuple = (oranges,mangoes,apples)

It's also possible to declare a tuple with one element. To do this, ensure that you add a coma after the element in parenthesis so that python can know that it's a tuple.

one_tuple = (banana,)

If you never want to change your elements they should be declared in a tuple since it's immutable.

Set

Sets are unordered collections meaning that the elements follow no specific order (are unindexed). They are declared with curly brackets {}.
Sets are mutable, they can be changed, items can be removed, added or replaced.

my_set = {1,2,3,4,5}
Sets are used when we need to confirm the presence or absence of an item in a set. In other words, they are used for membership tests.

Dictionary (Dict)

A dictionary is a collection of key/value pairs. A dictionary is initialized using curly brackets {} and filled with colon : separated keys and values (key : value). Dictionaries are ordered and changeable .

my_dict = {
 "Name": "James",
 "age":25,
 "Nationality": "Ugandan"
}

Note that the keys in dictionaries can not be duplicated.

Functions in python

A function is a set of instructions that you want to use repeatedly in a program. Instead of writing these instructions every time you need them, they can easily be written in a function once and for all. The function just needs to be called in case you need to use the instructions.

A function is created using the def key word.

def my_function():
    print("Hello")

The function can be called by using its name followed by parenthesis

my_function()

Parameters are specified in the function definition by putting them in the parenthesis. If you have more than one parameter, they can be separated using comas

def my_add_function(a,b):
    return(a+b)
my_add_function(1,2)

Here a and b are parameters

An argument is what is passed through when calling the function.

1 and 2 are arguments.

Control flow

Control flow is the order in which a program executes its instructions.
Control flow in python is regulated by control statements and loops.

Python conditions and if statements

Python has a variety of logical operators used to perform logic in control flow.

These include:

Equals: a == b
Not Equals: a != b
Less than: a < b
Less than or equal to: a <= b
Greater than: a > b
Greater than or equal to: a >= b

If statement

Often, you need to execute some statements only if some condition holds, or choose statements to execute depending on several mutually exclusive conditions. The Python compound statement if, which uses if, elif, and else clauses, lets you conditionally execute blocks of statements.

Usually if statements are used with logical operators as shown in the example below

a = 12
b = 5
if b > a:
  print("b is greater than a")
elif a == b:
  print("a and b are equal")
else:
  print("a is greater than b")

In the first condition b is less than a so it will print false.
In the second a is not equal to b so it will print false
then in the third it will print 'a is greater than b' since its true.

Remember that in python indentation is very important.

Loops.

Loops are used to iterate over a sequence.

For loop

The key word for is used.

countries = ["Uganda", "Kenya", "Tanzania"]
for x in country:
  print(x)

This will print each country.

While loop

While loop executes a set of statements as long as a condition is true.

i = 1
while i < 4:
  print(i)
  i += 1

We can add a break statement to stop the loop even if the while condition is true.

i = 1
while i < 4:
  print(i)
  if i == 3:
    break
  i += 1

Using the continue statement, we can stop the current iteration, and continue with the next.

i = 0
while i < 4:
  i += 1
  if i == 3:
    continue
  print(i)

I hope this brief introduction was helpful and insightful.