DEV Community: Chevy Vall

Flask me how to Login!

Chevy Vall — Thu, 20 Mar 2025 21:34:13 +0000

Many applications and websites need a way to keep track of and coordinate session and user information on the back end. While there are a plethora of ways to implement these features, Flask-Login easily provides us with the most important. The examples routes I'll be showing use flask-RESTful to organize the api, and I'll be showing as simple an implementation as I can manage. Let's take a look.

First, we install:

$ pip install flask-login

Next, we'll import and create our LoginManager class, then initialize it with our app, assuming that we're using a config file:

# config.py
from flask_login import LoginManager
login_manager = LoginManager()
login_manager.init_app(app)

Our app.py imports:

# app.py
from flask_login import login_user, logout_user, current_user

from config import app, db, api, login_manager
from models import User

That's a lot of imports! Let's break them down: login_user is a function that takes a user and stores them as the current_user and adds their id to the session. logout_user clears the current_user and cleans up relevant cookies from the session.

We'll also need provide a user_loader callback to pull the user from our database based on the id stored in session. We don't have to interact with this function directly after it's implemented.

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

We also have to provide the corresponding class method in our model:

# models.py
from flask_login import UserMixin

class User(db.Model, UserMixin):
    __tablename__ = 'users'

    id = db.Column(db.Integer, primary_key=True)
    username = db.Column(db.String, unique=True, nullable=False)
    password = db.Column(db.String, nullable=False)

    @classmethod
    def get(self, id):
        return User.query.get(id)

You may have noticed we're inheriting from UserMixin as well. Flask-login requires your model to have the following properties and methods:

    def is_authenticated(self):
        return True
    def is_active(self):
        return True
    def is_anonymous(self):
        return False
    def get_id(self):
        return str(self.id)

While you can overwrite these, UserMixin allows you to shortcut including these by providing default implementations if you don't need the extra functionality.

Back in our app.py we can take a look at handling request to log in:

class Login(Resource):
    def post(self):
        data = request.json
        user = User.query.filter_by(username=data.get("username")).first()
        if user is None or not user.authenticate(data.get("password")):
            response = make_response({'error':'Invalid username or ID'})
            response.status_code = 401
            return response

        login_user(user)
        return make_response(user.to_dict(), 201)

The call to login_user is the magic here, this will store the id of the user that was passed to us in session so that we can easily authenticate and reload the user on a page refresh, as well as set the current_user to the user passed. We'll return a copy of the user so our front-end can log in too.

Our logout is even simpler:

class Logout(Resource):
    def get(self):
        logout_user()
        return make_response('logout successful', 200)

logout_user will clear our the current user's id from session and the current_user object. We'll return a simple message for our front end.

And that's it! Flask-login includes many more features than these but this should get you off the ground if you just need a basic login management system.

Validatorian

Chevy Vall — Thu, 14 Nov 2024 17:35:03 +0000

Validations are a method of ensuring that our databases only receive the type of information that is appropriate for each attribute. After all, we wouldn't want a surprise type of data to find it's way into our code and cause unexpected behavior. Fortunately, SQLAlchemy has a package that makes validations quick and easy!

Let's look at some simple examples. Imagine we have a simple model, Sandwich. Here we have already initialized our database and are importing it from a configuration file.

from config import db

class Sandwich(db.Model):
    __tablename__ = 'sandwiches'

    id = db.Column(db.Integer, primary_key=True)
    name = db.Column(db.String)
    description = db.Column(db.String)
    price = db.Column(db.Float)

If we want to add validations to any of these attributes, we'll need to import the validations package first.

from sqlalchemy.orm import validates

And then, write our function with the '@validates' decorator inside the model.

    @validates('name')
    def validate_name(self, key, value):
        if not value:
            raise ValueError('Name cannot be empty.')
        if type(value) != str:
            raise ValueError('Name must be a string.')
        return value

So what's going on here? Let's break it down. The @validates is a decorator that lets our ORM know to pass any values received with the key of 'name' through our validation function before adding them to the database. The value we return is what is finally given to our database. The "key" argument is the key that is being evaluated, in this case 'name', the value is the value of that key, so the actual name(hopefully in text) that we are trying to add. So here we are checking to make sure that the name attribute passed in is not empty, and that is in in fact a string. If not, we raise an error.

We can also run multiple attributes through the same decorator by adding them to it's arguments.

    @validates('name', 'description')
    def validate_text(self, key, value):
        if not value:
            raise ValueError(f'{key} cannot be empty.')
        if type(value) != str:
            raise ValueError(f'{key} must be a string.')
        return value

This function validates our name and description attributes, but we won't usually have the same validations to perform on different attributes. Depending on how different and how many validations we have we can do it a couple of different ways. We can run a separate validator for our other attributes, let's add a length validation for our description and price validations too:

    @validates('name')
    def validate_name(self, key, value):
        if not value:
            raise ValueError('Name cannot be empty.')
        if type(value) != str:
            raise ValueError('Name must be a string.')
        return value

    @validates('description')
        def validate_description(self, key, value):
        if not value:
            raise ValueError('Description cannot be empty.')
        if type(value) != str:
            raise ValueError('Description must be a string.')
        if not 10 <= len(value) <= 200:
                raise ValueError('Description must be between 10 and 200 characters.')
        return value

    @validates('price')
    def validate_price(self, key, value):
        if type(value) != float:
            raise ValueError('Price must be a float.')
        if not 1 <= value <= 15:
            raise ValueError('Price must be between 1 and 15')

Or, we can keep the same validator for both and use the key argument passed in to adjust which validations are run for each attribute.

    @validates('name', 'description', 'price')
    def validate(self, key, value):
        if key != 'price:
            if not value:
                raise ValueError(f'{key} cannot be empty.')
            if type(value) != str:
                raise ValueError(f'{key} must be string.')
            if key == 'description':
                if not 10 <= len(value) <= 200:
                    raise ValueError('Description must be between 10 and 200 characters.')
        else:
            if type(value) != float:
                raise ValueError(f'{key} must be a float.')
            if not 1 <= value <= 15:
                raise ValueError('Price must be between 1 and 15')
        return value

Hmm, this is a little messy, let's refactor into 2 separate validators.

    @validates('name', 'description')
    def validate_text(self, key, value):
       if not value:
            raise ValueError(f'{key} cannot be empty.')
        if type(value) != str:
            raise ValueError(f'{key} must be string.')
        if key == 'description':
            if not 10 <= len(value) <= 200:
                raise ValueError('Description must be between 10 and 200 characters.')

    @validates('price')
    def validate_price(self, key, value):
        if type(value) != float:
            raise ValueError('Price must be a float.')
        if not 1 <= value <= 15:
            raise ValueError('Price must be between 1 and 15')

That's better! Here's our completed model:

from sqlalchemy.orm import validates
from config import db

class Sandwich(db.Model):
    __tablename__ = 'sandwiches'

    id = db.Column(db.Integer, primary_key=True)
    name = db.Column(db.String)
    description = db.Column(db.String)
    price = db.Column(db.Float)

    @validates('name', 'description')
    def validate_text(self, key, value):
        if not value:
            raise ValueError(f'{key} cannot be empty.')
        if type(value) != str:
            raise ValueError(f'{key} must be string.')
        if key == 'description':
            if not 10 <= len(value) <= 200:
                raise ValueError('Description must be between 10 and 200 characters.')

    @validates('price')
    def validate_price(self, key, value):
        if type(value) != float:
            raise ValueError('Price must be a float.')
        if not 1 <= value <= 15:
            raise ValueError('Price must be between 1 and 15')

That's it! Validations are one easy tool to make sure your databases stay right and proper.

Build an ORM workshop.

Chevy Vall — Wed, 10 Jul 2024 03:38:12 +0000

SQL is the most common programming language used for managing databases, and is used in many large companies for it's robustness and simplicity. But what if we want to integrate it into a larger and more versatile program? This is where an Object Relational Manager comes in! In this post I will talk about and show some examples of the basics of communicating with an SQL database using sqlite3. Most of this will be done through a standardized ORM like SQAlchemy in a professional setting, but it's good to understand what's going on under the hood.

Before we start talking to our database we'll need to import sqlite3 into our python file.

import sqlite3

After importing it, we set up our connection to our database and the cursor through which we'll interact with it. Not that if the file you are trying to connect to doesn't exist, this line will create it before connecting.

CONN = sqlite3.connect('pets.db')
CURSOR = CONN.cursor()

In order to track our database information in python, we'll create a class that corresponds to the information contained in a database table. For our example we'll create a database of pets for the user to track.

class Pet:
    all = {}

    def __init__(self, name, species, id=None):
        self.id = id
        self.name = name
        self.species = species

In this example, id, name, and species are columns in our table, and each instance of the class would be a row. We will use the dictionary class attribute all to store individual instances of rows from our database so that we don't have to pull them from the database every time we reference them. We'll leave ID as None on initialization, as it will be assigned after we create our actual database entry for the object.

Now that our framework is starting to come together, let's look at some examples of running SQL code through our class to build and manipulate our database. Before we do anything, we need to create a table. The syntax is near identical to SQL itself, but is passed as a special string to our CURSOR to run on our database.

    @classmethod
    def create_table(cls):
        sql = """
            CREATE TABLE IF NOT EXISTS pets (
            id INTEGER PRIMARY KEY,
            name TEXT,
            species TEXT)
        """
        CURSOR.execute(sql)
        CONN.commit()

Next we'll need to be able to add information into our database. After all, what's a database table without information to organize? We'll do this with a class method 'create' to create an instance, and an instance method 'save' to save itself into the database and the class.

    @classmethod
    def create(cls, name, species):
        pet = cls(name, species)
        pet.save()
        return pet

    def save(self):
        sql = """
            INSERT INTO pets (name, species)
            VALUES (?, ?)
        """

        CURSOR.execute(sql, (self.name, self.species))
        CONN.commit()

        self.id = CURSOR.lastrowid
        type(self).all[self.id] = self

Note that we wrote in '?' symbols instead of the actual values we want to use in our SQL code. The CURSOR.execute function can recognize these and will replace them in order with the values that we pass to it. In this case, self.name and self.species. Then we grab the id of the newly inserted row from the database, and use that as the key for our python dictionary of our instances.

Now that we have the basics of creating information for our database we can write a short test script to demonstrate.

from pet import Pet

def seed_database():
    Pet.create_table()
    fido = Pet.create("Fido", "Dog")
    print(fido)

seed_database()

What will this print to the console?

<pet.Pet object at 0x7f8fc4940cd0>

We are creating an object at least, let's update Pet class to override the basic print functionality, we can do this with the special function 'repr'.

    def __repr__(self):
        return f"<Pet {self.id}: {self.name}, {self.species}>"

This function take the instance of the class and returns a formatted string to easily display our information.

<Pet 1: Fido, Dog>

This shows that it's working, but it's nothing you couldn't do with just Python objects. The obvious advantage of a database is that it's saved to a separate file so your data persists between executions of your program. Let's separate this into a simple script to seed the database, and one to print it out to demonstrate. And while we're at it, we'll add a few more functions to our Pet class.

import sqlite3

CONN = sqlite3.connect('database.db')
CURSOR = CONN.cursor()

class Pet:
    # Dictionary of objects saved to the database.
    all = {}

    def __init__(self, name, species, id=None):
        self.id = id
        self.name = name
        self.species = species

    def __repr__(self):
        return f"<Pet {self.id}: {self.name}, {self.species}>"

    @classmethod
    def create_table(cls):
        """ Create a new table to persist the attributes of Animal instances """
        sql = """
            CREATE TABLE IF NOT EXISTS pets (
            id INTEGER PRIMARY KEY,
            name TEXT,
            species TEXT)
        """
        CURSOR.execute(sql)
        CONN.commit()

    @classmethod
    def drop_table(cls):
        sql = """
            DROP TABLE IF EXISTS pets;
        """
        CURSOR.execute(sql)
        CONN.commit()

    @classmethod
    def create(cls, name, species):
        """ Initialize a new Pet instance and save the object to the database """
        pet = cls(name, species)
        pet.save()
        return pet

    def save(self):
        sql = """
            INSERT INTO pets (name, species)
            VALUES (?, ?)
        """

        CURSOR.execute(sql, (self.name, self.species))
        CONN.commit()

        self.id = CURSOR.lastrowid
        type(self).all[self.id] = self

    def update(self):
        sql = """
            UPDATE pets
            SET name = ?, location = ?
            WHERE id = ?
        """
        CURSOR.execute(sql, (self.name, self.location, self.id))
        CONN.commit()

    def delete(self):
        sql = """
            DELETE FROM pets
            WHERE id = ?
        """

        CURSOR.execute(sql, (self.id,))
        CONN.commit()

        # Delete the dictionary entry using id as the key
        del type(self).all[self.id]

        # Set the id to None
        self.id = None

    @classmethod
    def get_all(cls):
        sql = """
            SELECT *
            FROM pets
        """

        rows = CURSOR.execute(sql).fetchall()

        return [cls.instance_from_db(row) for row in rows]

Our seed script:

from pet import Pet

def seed_database():
    Pet.drop_table()
    Pet.create_table()

    fido = Pet.create("Fido", "Dog")
    lucy = Pet.create("Lucy", "Turtle")
    borris = Pet.create("Borris", "Goldfish")

seed_database()

And our final test script that adds one more entry to the database and displays it's contents.

from pet import Pet

def add_and_display():
    Pet.create("Bob", "Chicken")

    for pet in Pet.get_all(): 
        print(pet)

add_and_display()

Now if we want to reset our database and give it some initial values, we simply run:

$ python lib/seed.py

We can see that it persists by running:

$ python lib/display.py

<Pet 1: Fido, Dog>
<Pet 2: Lucy, Turtle>
<Pet 3: Borris, Goldfish>
<Pet 4: Bob, Chicken>

Each time we run our display script it will add another Bob to the table!

<Pet 1: Fido, Dog>
<Pet 2: Lucy, Turtle>
<Pet 3: Borris, Goldfish>
<Pet 4: Bob, Chicken>
<Pet 5: Bob, Chicken>

This is far from everything that goes into a good ORM, but it's a good framework to understand what's going on under the hood of a standardized Object Relational Manager.

Routing, Client Side

Chevy Vall — Thu, 18 Apr 2024 01:56:27 +0000

Client side routing is a programming method that lets us use custom urls and a browser's history functions to navigate through a single page application. To accomplish this I've learned to use React Router, which gives us the ability to route different url extensions to separate components in our app, and display them only when the user is on that "page".

Remember to install react-router-dom first!

>npm install react-router-dom

After successfully installing react-router-dom into our repository, we must import it into our app, then import the functions that we need from it.

import ReactDOM from 'react-dom/client'
import { createBrowserRouter, RouterProvider } from "react-router-dom"

Next we create our router object using the imported function.

const router = createBrowserRouter([
  {
    path: "/",
    element: <Home/>
  }
]);

We then create a ReactDOM root and assign the application's root to it. We then have this root render our application through the imported RouterProvider component, passing our router object as a prop.

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <RouterProvider router={router} />);
)

After setting all of this up, our application should be running and we're ready to start routing!

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import Home './Home';

import { createBrowserRouter, RouterProvider } from "react-router-dom";

const router = createBrowserRouter([
  {
    path: "/",
    element: <Home />
  }
]);

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <RouterProvider router={router} />);
)

Once that's all set up, the only thing we need to do to add a new route is add the path and corresponding element to our router object.

const router = createBrowserRouter([
  {
    path: "/",
    element: <Home />
  },
  {
    path: "/donate",
    element: <DonationForm />
  }
]);

One could navigate to either /home or /donate now by typing the extensions into their browser, but if we want to make this a little more user friendly we'll have to add links. NavLinks are a special component that will navigate to the given url extension.

function NavBar() {
  return (
    <div className="NavBar">
        <nav>
          <NavLink
            to="/"
            className="nav-link"
          >
            Home
          </NavLink>
          <NavLink
            to="/library"
            className="nav-link"
          >
            Library
          </NavLink>
          <NavLink
            to="/donate"
            className="nav-link"
          >
            Donate
          </NavLink>
        </nav>
    </div>
  );
}

And while we're at it, we should add outlet context so that we can choose which portions of the app we want to conditionally render. This time, we'll need to use the children variable of our router.

const routes = [
    {
        path: "/",
        element: <App />,
        errorElement: <ErrorPage />,
        children: [
            {
                path: "/",
                element: <Home />,
            }, 
            {
                path: "/library",
                element: <Library />
            },
            {
                path: "/donate",
                element: <DonationForm />
            }
        ]
    }
];

This way, the default path leads to app, and app has children that it can choose to render through outlet context.

    return(
        <>
            <header>
                <Header />
                <NavBar />
            </header>
            <Outlet context={data}/>
        </>
    );

Here, the Header and NavBar components will always render, the Outlet is whatever child we are currently routed to. Data is whatever information we want to pass to the child component.
If we'd like to use the data we pass through context, we need to import and use the function useOutletContext().

import { useOutletContext } from "react-router-dom";

function DonationForm(){
    const data = useOutletContext()

We can also pass objects this way using destructuring.

<Outlet context={{books: books, setBooks: setBooks}}/>

const {books, setBooks} = useOutletContext()

Routing is neat!

For...what?

Chevy Vall — Fri, 26 Jan 2024 02:48:12 +0000

JavaScript offers a variety of options for looping through objects and arrays. For my own sake I'm going to go over JavaSript's most commonly utilized built in functions for this behavior.

The for in statement in JS will pull each key from the array in turn and assign it to the provided variable(i in this case).

const array = [1, 2, 5]
const object = {'big':'dawg', 'manners':0, 'hamburgers':[1,3,0,1]}

for(i in array){
    console.log(i)
}
for(i in object){
    console.log(i)
}

//Output: 
0
1
2
big
manners
hamburgers

If you'd like to access the corresponding element of the array or object this way, you may do so with the bracket [] operator.

for(i in array){
    console.log(array[i])
}
for(i in object){
    console.log(object[i])
}

//Output: 
1
2
5
dawg
0
[ 1, 3, 0, 1 ]

Note that if the order that you are walking through your object/array matters it is best not to use for in as the order isn't consistent between implementations.

If you need to access the element from the array directly you may do so with the for of operator. You may do this with arrays, but JavaScript will throw a TypeError if you try to iterate over an object with for of.

const array = [1, 2, 5]

for(i of array){
    console.log(i)
}

//Output:
1
2
5

Of course you can always you the classic for operator as well.

const array = [1, 2, 5]

for(let i = 0; i < array.length; i++){
    console.log(array[i])
}

//Output:
1
2
5

With the classic for operator you declare or reuse a variable to work as your index while iterating, then define at what point you will stop(i < array.length), then put in an operator to apply to the index(i++).

The last operator I'm going to discuss is the forEach operator. for each is called on an array and takes a callback function as it's only argument. The function automatically takes the value of the currently indexed element in the loop, the index itself, and the entire object.

const array = ['big', 'dawg', [1,3,0,1]]

array.forEach(function(element, index, arr){
    console.log(index, element)
})

//Output:
0 big
1 dawg
2 [ 1, 3, 0, 1 ]

If you'd like to iterate through an object using forEach, you may can do so by iterating through either the keys, values, or entries of the object by using Object.keys(), Object.values(), or Object.entries() to pull the respective information.

const object = {'size':'big', 'type':'dawg', 'pin':[1,3,0,1]}

console.log("KEYS")
Object.keys(object).forEach(function(key){
    console.log(key)
})
console.log("VALUES")
Object.values(object).forEach(function(value){
    console.log(value)
})
console.log("ENTRIES")
Object.entries(object).forEach(function(entry){
    console.log(entry)
})

//Output:
KEYS
size
type
pin
VALUES
big
dawg
> (4) [1, 3, 0, 1]
ENTRIES
> ['size', 'big']
> ['type', 'dawg']
> ['pin', Array(4)]

To recap: for in, classic for to iterate by index, for of and forEach to iterate by element directly. for in is usually best for objects as forEach and for of cannot be invoked on them. Oftentimes the choice comes down to syntax preference but one is usually preferable.