DEV Community: gasparericmartin

The Magic of Flask Login

gasparericmartin — Fri, 26 Jul 2024 19:25:46 +0000

Frameworks, They're Great!

The use of frameworks in web development makes many different tasks significantly easier. One such framework is Flask, a lightweight WSGI web application framework in Python. While Flask provides the basic tools needed to build web applications, managing user sessions and authentication can be complex. Enter Flask-login, a user session management library that makes everyone's life that much Easier

What is Flask-Login?

Flask-Login is an extension for Flask that manages user sessions in a web application. It handles common tasks such as logging in, logging out, and remembering session data across requests. Flask-Login integrates seamlessly with Flask, allowing us to concentrate on writing more productive code as opposed to boilerplate.

Features

The User Loader Function

A core component of Flask-Login is the user loader function. This function tells Flask-Login how to retrieve a user from the database using the user ID stored in the session. This flexibility allows Flask-Login to work with various data storage solutions, including SQL databases.

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

Login and Logout Management

Flask-Login provides simple functions to log users in and out of the application. The 'login_user' function records the user's ID in the session, while the 'logout_user' function removes it, ending the user's session.

login_user(user)
logout_user()

Protecting Routes

My personal favorite and one of the most useful features of Flask-Login is the ability to protect routes. By using the 'login_required' decorator you can restrict access to certain views, ensuring that only authenticated users can access them. This is essential for protecting sensitive information or user-specific data.

@app.route('/dashboard')
@login_required
def dashboard():
    return f'Hello, {current_user.id}! Welcome to your dashboard.'

That's all folks... or not

Flask login is a wonderful tool that makes life easier when it comes to authentication. There are more features which you should explore on your own!

Constraints & Validations

gasparericmartin — Wed, 05 Jun 2024 02:52:11 +0000

All This Data

In my previous blog post, I wrote about objects and classes and how they can be used to represent entities, objects, and relationships in code. As part of that post I touched on object relational mapping, the concept of using classes to map relational databases. Using these structures to store, visualize, and manipulate data is extremely powerful, but doesn't mean much either without data, or without the right kind of data. When we write applications, we design them to perform any number of actions (ranging from simple to complex) on the data that they're given. If they are unable to perform those actions in the intended manner, or at all, errors and unexpected behavior can occur. Not only can this have a negative impact on how our application runs, it can also present security risks, especially in the case of user generated data. All of this begs the question, how do we make sure that the data our application receives is of the type(s) we originally intended? The answer lies in constraints and validations.

Ports of Entry

By using constraints and validations we can check what kind(s) of data are coming into our application, prevent unwanted data from being used, and return useful messages to the user to help them understand where they went wrong. There are multiple points at which one might validate the data in an application. The first is in the front end where a user is inputting data. The second is server side, in the the classes used to instantiate objects. The third is at the database level, when the data is being committed. The first two use validations, while the third uses constraints.

Client Side Validation

When dealing with user input, two of the major concerns are human error and security. Client side validation isn't particularly good at addressing the latter of the two, but is fantastic for the former. It allows us to check that whatever the user inputs in a form is what our application is looking for, and if it's not, giving immediate feedback and preventing that data from making it to other parts of the application. While it's entirely possible to build validator functions of one's own, there are libraries such as Formik that can help us streamline the process.

Server Side Validation

As mentioned before, client side validation isn't the most useful from a security perspective. After all, someone who's intentionally trying to feed unwanted data to an application may very well bypass the front end altogether, rendering form validation completely useless. We can implement validations in our ORMs to protect against such attacks, as well as ensure that the data coming through our ORM is what our application is designed to handle. Once again, while we can write our own validator functions, frameworks such as Flask provide validation features to streamline the process.

Database Constraints

A database constraint is functionally distinct from an ORM validation. While a validation is only checked when data is being added or updated through the ORM, constraints are checked any and every time changes or updates are made to the database. In the case of SQLalchemy there are certain constrains such as "nullable" and "unique" which are set with boolean values on columns, and others called "check constraints". As their names suggest, nullable ensures that a value is required for that column, and unique makes sure there are no repeated values in a column. On the other hand, check constraints allow us to create our own conditions, either for a specific column or for the entire table, to be checked when data is added or changed. It's worth noting that not all databases (such as mySQL) support check constraints. Additionally, there can be limitations such as with later versions of SQLalchemy where check constraints cannot be added to an existing table.

Conclusion

Validations and constraints are essential tools in order to keep our applications secure and running smoothly. Guarding against user error, bad actors, and data inconsistencies are all important parts of development. As such, there are many different tools and techniques at our disposal to streamline the process and make things easier on ourselves as developers both when writing and servicing our (and others') code. Depending on an application's intended use, these checks can be stacked on one another to create a system of redundancies to ensure that we're getting the kind(s) of data we desire, and nothing else.

Classes and Objects: Representations of Our World in Code

gasparericmartin — Mon, 13 May 2024 02:43:54 +0000

An Issue of Translation

The challenge of translating real world objects, structures, and concepts into code is one that has been tackled many, many times over, and will continue to be something that's refined by people as time goes on. Object oriented programming (OOP) seeks to address this by using a methodology which revolves around the titular "object", a structure which stores data as well as ways (referred to as "methods") of interacting with that data. In the case of the Python programming language, objects are managed through a system based on "classes" which serve as the blueprints for creating objects.

We can think of classes as the broader concept of a thing, such as a car. There are many different types of cars, all with their own unique features, and even cars of the same type can vary greatly in what parts they use under the hood, their interiors, and colors. Using classes allows us to create a blueprint for our objects, each of which is referred to as an "instance" of a class.

Building a Class

Creating a class is fairly simple. One merely has to use the "class" keyword, followed by the class name (capitalized by convention), with its properties and methods defined in an indented block underneath.

class Car():
    def __init__(self, make, model, color):
        self.make = make
        self.model = model
        self.color = color

    def drive():
        print('Vroom')

The "init" method is a special method that's called each time an instance of a class is created. It takes the essential data for initializing an object from the class as arguments.

car1 = Car('Subaru', 'Forrester', 'Green')
car2 = Car('Chevrolet', 'Blazer', 'Red')

Here we create two instances of the car class, each with their own attributes. They are distinct from each other and have their own data, but are both members of the same class. In order to access the data and methods stored in these objects, we use dot notation.

print(car1.make) # Output: Subaru
car1.drive() # Output: Vroom

While classes are used as blueprints, they are themselves considered objects. As such, we are able to define variables that are shared with all instances of a class. In contrast, instance variables are unique to their instance.

class Car():
    make = 'Subaru'

    def __init__(self, model, color):
        self.model = model
        self.color = color

car1 = Car('Forrester', 'Green')
car2= Car('Outback', 'Blue')

print(car1.model) # Output: Forrester
print(car2.model) # Output: Outback
print(car1.make) # Output: Subaru
print(car2.make) # Output: Subaru

Inheritance

Python classes can also inherit attributes and methods from another class, making them incredibly versatile. The ability to create sub classes allows even more accurate modeling of the world around us.

class Car():
    def __init__(self, make, model, color):
        self.make = make
        self.model = model
        self.color = color

    def horn():
        pass

class Sedan(Car):
    def __init__(self, make, model, color):
        super().__init__(make, model, color)

    def horn():
        print('HONK')

class Hatchback(Car):
    def __init__(self, make, model, color):
        super().__init__(make, model, color)

    def horn():
        print('beep')

In this example there are a couple of special things happening. The first is the use of super(). By using super to call the init method from the Car class, we can avoid having the repetitious code of assigning each variable passed in to self. Super can be applied to any method, but is most often used for init. The second thing is the overriding of the horn() method in each of the subclasses. This allows each of the subclasses to apply their own unique behaviors to the same method defined in the superclass. This leads to a concept referred to as polymorphism, where different classes can use the same method name in their own unique way, leading to more flexible and modular code.

Taking it Further

A great example of how classes can be leveraged for more complex use is object relational mapping. A massive amount of information is stored in databases, broken down into columns and rows. Columns dictate a kind of data to be stored, whether that be a number, string, object(!), etc. Rows are comprised of one "cell" from each column, adding up to a collection of different values, oftentimes identified by a unique, numbered column. Relational databases are comprised of multiple tables related to one another. Using a database language like SQL in conjunction with Python we can map a class to the table, each column represented as an attribute or property in the class. By creating instances of that class using the data from each row, it's possible to perform complex operations both using, and on said data. While this is a subject worthy of many, many blog posts, it serves as one of the many powerful uses for classes in object oriented programming.

All of these features allow classes to make code extremely robust, versatile, reusable, and expressive. The ways in which they reflect the world in which we live and the problems they are used to solve are fairly easy to grasp, but have immense potential. While it's incredibly straightforward to compare an object in Python to a tangible object in the real world (like a car, as in the previous examples), they can represent so much more. People, organizational structures, and even concepts can be represented by objects in code, and classes help us to organize and relate those objects to one another.

Union of the State

gasparericmartin — Fri, 08 Mar 2024 02:23:56 +0000

"Ask not what you can do for state, but what state can do for you." - A Person

The Desire for Dynamism

The process of learning new things can be both exciting and frustrating at turns, especially in cases where one is familiar with the end product of something they're learning how to build. In the case of building applications, the initial peek behind the veil that learning vanilla JavaScript provides quickly turns from fascination to a desire for more. That "more" comes in the form of a framework like React. In very reductive terms, React makes the process of development significantly less labor intensive by managing many of the menial tasks, all but eliminating the need to manually update the DOM, as well as providing powerful tools to build apps. One of those powerful tools is component state, which is incredibly important when seeking to create dynamic applications.

State

In react, state is data that changes via user interaction. By taking advantage of state in React components, we are able to make the component respond to things the user does without involving a parent component. One of the most notable properties of state that makes this possible is the fact that when state changes, the component containing that state and its children will re-render. However, before getting to the re-render we have to both import and initialize our state variable.

import { useState } from "react";

function Component() {
const [stateVariable, setStateVariable] = useState([])
}

We can see here that when initializing a stateful variable, we declare the variable itself, a setter function for making changes, and finally what the initial value of the variable will be. That initial value can be anything we choose, but in this case it's an empty array because of how this variable will be used.

State & Fetch: A Delicious Pairing

There are multiple ways in which React state's re-render behavior can be leveraged to make dynamic apps, but possibly my favorite use is for storing and then displaying data returned from APIs after successful fetch requests. When making an initial GET request to whatever API(s) our app is accessing, we can update our stateful variable(s) with the data returned.

import { useState } from "react";

function Component() {
const [stateVariable, setStateVariable] = useState([])
}

fetch('http://mysteryAPI.com/people')
     .then((response) => response.json())
     .then((data) => setStateVariable(data)

This in and of itself isn't particularly special. In fact, if this were all we were going to do, we wouldn't need to use state at all. We could simply use a non-stateful variable and render whatever data we've had returned. It's our next step where things get more interesting. When there are changes made to the data we want to display to our user, we want to render those changes as they occur. While those changes could be triggered by non-user sources, here we'll discuss user driven changes. For instance, if we have a form for the user to add another name to our database, when the user submits that form we would want what's displayed to match what's happening on the backend. This is where the pairing of state and fetch is particularly useful. Our user submits the form and a POST request is made to the API:

fetch('http://mysteryAPI.com/people', {
     method: 'POST',
     headers: {
           'content-type': 'application/json'
          }
     body: JSON.stringify(newName)
     }
     .then((response) => response.json())
     .then((data) => setStateVariable([...stateVariable, data])

Upon a successful POST request, the data returned from the API will be whatever was added to the database, in this case the new name input by the user. Using this returned data, we can update our state variable by calling our setter function and passing in an array containing a copy of the current data stored in the variable, and the new data to be added to the array. Once state has changed, the component where the variable lives and all of its children will re-render, displaying all of the names from our database wherever they're being rendered. Please keep in mind that this is a simplified explanation that does not take error handling into account.

Ultimately, this pairing of state and fetch provides a streamlined method of displaying the data we receive from our API in response to user generated requests. Instead of having to manually re-render our components each time a request is made, React does it for us every time we update state. Additionally, the ability to simply pass our stateful variable to child components and have them re-render each time it changes makes for much dryer code.

Temptation

State is a powerful tool, and it can be very tempting to use stateful variables everywhere. However, it's inadvisable to do so as it can potentially overcomplicate our code and lead to bugs. Using state sparingly is best, and while there are many cases where we may initially think that a state variable is the way to go, thinking about it for a bit longer can yield a cleaner solution.