DEV Community: Denzel

User Authentication in flask

Denzel — Mon, 16 Oct 2023 02:06:08 +0000

Intro

User authentication is used in many web applications. Companies like Google, Meta, Amazon, and other companies all use user authentication to keep track of user information such as Usernames, ID's, passwords, and many other things. It's important to learn user authentication for company projects or personal ones.

How it works

User authentication is simply the process of identifying the user and accessing their information. Imagine a user entering a site like Facebook. They log in to their account then once they're in they can view all their personal information like posts, likes, and profile information. Then once they're done, they log out and cannot view their personal information until they log back in. While the user is browsing through Facebook user authentication happening in the background. At the start, the user is introduced to a login page where they first have to enter the correct information for their account. If the information is incorrect, Facebook cannot authenticate the user. Once the user enters the correct information Facebook logs them in their account, the application keeps the user's sensitive information until the user logs back out.

Getting Started with login

The first thing we need is a view to handle the login route in our backend. We can make a class called that handles POST requests for /login:

class Login(Resource):
    def post(self):
        username = request.get_json().get('username')
        password = request.get_json().get('password')

        user = User.query.filter_by(username=username).first()

        if user and user.authenticate(password):
            session['user_id'] = user.id
            return user.to_dict(), 200
        else:
            return {'error': 'Unauthorized'}, 401

api.add_resource(Login, '/login')

Let's break down the code. class Login(Resource): This code tells us that we are making a class called "Login" that inherits "Resource". Whenever a class inherits Resource it lets us know that the class will be handling HTTP requests. Next we have:

def post(self):
      username = request.get_json().get('username')
      password = request.get_json().get('password')

This tells us that we will be using a post method and it gets JSON data that has username and password parameters. Lastly, we have the authentication part:

        user = User.query.filter_by(username=username).first() 
        if user and user.authenticate(password):
            session['user_id'] = user.id
            return user.to_dict(), 200
        else:
            return {'error': 'Unauthorized'}, 401

We first look in our database and see if we can authenticate a user that has the username from the JSON data with this line of code:

user = User.query.filter_by(username=username).first()

Then if we find that the user is in our database and the user's password matches, we set the session to the user's id and return the user's information along with a status code 200. But if we cannot find the user we will return a JSON response with an error and a status code of 401. To finish with our backend, we add

api.add_resource(Login, '/login')

This code means that if the user tries to access the endpoint /login it will run the class.

Now onto our frontend:

function Login({ onLogin }) {
  const [username, setUsername] = useState("");

  function handleSubmit(e) {
    e.preventDefault();
    fetch("/login", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ username }),
    })
      .then((r) => r.json())
      .then((user) => onLogin(user));
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
      />
      <button type="submit">Login</button>
    </form>

The Login component first creates a username state variable and a setUsername function to update the state. Next, we can take a look at the handleSubmit(e) function. First, we use e.preventDefault(); to prevent the default behavior of the event. Then we can fetch our /login endpoint:

   fetch("/login", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ username }),
  })

This code tells us that we will be making a POST request that expects the header Content-Type to be JSON data. Then the body: JSON.stringify({ username }) converts the username state variable into JSON string. .then((r) => r.json()) then parses the JSON data. Once the JSON is parsed, .then((user) => onLogin(user)); calls the onLogin function prop with a user argument.

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
      />
      <button type="submit">Login</button>
    </form>
  );

Lastly, the Login function will return this form that takes in the username input and calls the handleSubmit function once the <button type="submit">Login</button> is pressed.

How to stay logged in

To stay logged in we can make this simple route:

class CheckSession(Resource):

    def get(self):
        user = User.query.filter(User.id == session.get('user_id')).first()
        if user:
            return user.to_dict()
        else:
            return {'message': '401: Not Authorized'}, 401

api.add_resource(CheckSession, '/check_session')

The CheckSession class is similar to the Login class we made in our backend except instead of defining a post method we will be defining a get method. We first look if the user is in our database then if we find the user we can either return a user dictionary or return a message that says "Not Authorized" with a status code of 401 if the user was not found in the database.

Finishing with logout

The last thing to do now is log out. When you've finished browsing through a website the last thing to do to keep others from accessing your information is to logout. We can log out by creating this route:

class Logout(Resource):
    session['user_id'] = None
    return jsonify({'message': '204: No Content'}), 204

api.add_resource(Logout, '/logout')

As you can see it's very simple. This class sets the session's user_id to None and returns a message that says "No Content" and a status code of 204. This means that there will be no user in the current session. Now let's make the front end part:

function Logout({ onLogout }) {
  function handleLogout() {
    fetch("/logout", {
      method: "DELETE",
    }).then(() => onLogout());
  }

  return (
    <header>
      <button onClick={handleLogout}>Logout</button>
    </header>
  );
}

This code is essentially the opposite of logging in. We first send a fetch request to the /logout endpoint with the method of DELETE. After the request is made we use .then and call the onLogout function prop. Lastly, we need to make a button that will call the handleLogout function and once this button is pressed the user will officially be logged out.

Conclusion

To be a software developer, it is crucial to learn how User authentication works. It is used in many applications to protect users such as yourself from breaches of private and sensitive data as well as keep your information secure. By understanding how user authentication works, you have added one more skill to your arsenal as a software developer.

Resources

What is user authentication?

Explore how user authentication identifies and verifies users to ensure they have permission to access the information and systems they are requesting.

techtarget.com

Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.

A new tool that blends your everyday work apps into one. It's the all-in-one workspace for you and your team

furry-shrimp-4f0.notion.site

Flatiron School Resources:

Bootcamps in Software, Cyber, Data & Design | Flatiron School

Flatiron School is a coding bootcamp with online and on-campus courses in coding, data science, cybersecurity, and product design courses.

flatironschool.com

How to get started with SQLAlchemy

Denzel — Mon, 28 Aug 2023 03:57:37 +0000

What is SQLAlchemy

SQLAlchemy is an ORM (object-relational-mapper). It's an open-source Python library that gives us the tools to transfer data from an SQL database table into Python objects and classes. This gives developers the power to manipulate and manage databases while having the versatility of writing Python Code.

Task

Let's say there's an upcoming basketball league and the commissioner for the league has tasked you to organize the data for the league. The commissioner wants you to keep track of the wins and losses for each team as well as the stats of the players in the team. How can we do this?

Models

Assuming you already have Python and a virtual environment setup-
First we need to install SQLAlchemy. In your terminal write:

pipenv install alchemy

Next, we need to start importing from the library. These imports are essential to work with the databases you will be making. In a new file, we need to write:

from sqlalchemy import create_engine, Column, Integer, String, ForeignKey
from sqlalchemy.orm import relationship, sessionmaker
from sqlalchemy.ext.declarative import declarative_base

Base = delcarative_base() #This will help us avoid from rewriting code

Now, let's make our classes. These classes are the tables in our database. They can also be referred to as data models:

class League(Base):
    __tablename__ = 'leagues'
    id = Column(Integer, primary_key=True)
    name = Column(String)
    teams = relationship('Team', backref='league') #one-to-many relationship with Team class

class Team(Base):
    __tablename__ = 'teams'
    id = Column(Integer, primary_key=True)
    name = Column(String)
    league_id = Column(Integer, ForeignKey('leagues.id'))
    league = relationship('League', backref='teams') #many-to-one relationship with League class
    players = relationship('Player', backref='team') #one-to-many relationship with Player class

class Player(Base):
    __tablename__ = 'players'
    id = Column(Integer, primary_key=True)
    name = Column(String)
    age = Column(Integer)
    team_id = Column(Integer, ForeignKey('teams.id'))
    team = relationship('Team', backref='players') #many-to-one relationship with Team class

Okay, let's dissect these lines of code real quick. In each class, we have __tablename__ attribute. This is what the database table will use for its name. There are also Column() objects with arguments such as String() and Integer() in them. This is what the database table will use for its columns and the datatype in that column. The Column() objects have an optional argument where you can enter a primary_key and a ForeignKey to establish relationships between the tables.

Relationships

Through the use of ForeignKey the classes will establish relationships with one another. The League class and the Team class have a one-to-many relationship meaning that there's only one league but many teams. The Team class has a one-to-many relationship as well but with the player class. There is one team with many players.

Configuring the engine

Now that we've made our classes, we can get started with creating the database. To do that, we need a few lines of code:

engine = create_engine('sqlite:///league.db')
Base.metadata.create_all(engine)

Session = sessionmaker(bind=engine)
session = Session()

engine = create_engine(): This line is what creates the connection with the database for us. Inside the create_engine() function we have 'sqlite:///league.db' that tells the database that an SQLite database should be created in the file league.db.
Base.metadata.create_all(engine): This line tells the engine that the classes that had Base as an argument will be used to create tables.
Session = sessionmaker(bind=engine): The handle to that let's us interact with the database
session = Session(): default constructor for the session object

Insert Data

Now with all of this in place, we can start inserting in data:

league = League(name='MDCrabs')
teams_data = [
    ('Ravens', league),
    ('Orioles', league),
    ('Retrievers', league)
]

players_data = [
    # Team "Ravens"
    ("Dwayne Brown", 22, 'Ravens'),
    ("Kevin Shields", 26, 'Ravens'),
    ("Mack Lee", 23, 'Ravens'),
    ("Jasper Nguyen", 24, 'Ravens'),
    ("Andrew King", 29, 'Ravens'),

    # Team "Orioles"
    ("Joseph Wilson", 30, 'Orioles'),
    ("Keith Martinez", 22, 'Orioles'),
    ("Richard White", 31, 'Orioles'),
    ("Ryan Bolt", 23, 'Orioles'),
    ("Michael Ans", 21, 'Orioles'),

    # Team "Retrievers"
    ("Ben Reef", 27, 'Retrievers'),
    ("Joseph James", 26, 'Retrievers'),
    ("Lee Daniels", 28, 'Retrievers'),
    ("Charlie Nguyen", 24, 'Retrievers'),
    ("Neil Harris", 24, 'Retrievers')
]

Do note that all the data that we are inserting matches the attributes in the models that we created previously. If we created a team, it should have the name of the team or if we created a player it should have the name and age of the player.

Finally, we can add our teams and players into the database with the following code:

# Adds teams
teams = []
for team_name, league_instance in teams_data:
    team = Team(name=team_name, league=league_instance) #Creates team instance
    teams.append(team) #Adds team instance to the teams list
    session.add(team) #Adds the team instances into the session

# Adds players
for name, age, team_name in players_data:
    team = next(team for team in teams if team.name == team_name)
    player = Player(name=name, age=age, team=team) #Creates player instance
    session.add(player) #Adds the player instance into the session

session.commit() #Updates the database to match the session

Once we've written all the code all that we need to do is run the file. We can do this by writing:

python <filename.py>

If everything is done properly you can open up your league.db database and find that these tables are showing:

Conclusion

Congratulations! You now know how to use SQLAlchemy. You've completed the task and the commissioner of the league is very happy with your work. You've been introduced to a problem, worked through a solution and now you've solved it. There will be times like these when you as a software developer will be tasked to come up with a solution to a data problem. With the use of SQLAlchemy, you have the power and versatility to write and develop scripts that will efficiently manage your data. Thank you for reading!

Sources

tutorialspoint.com

docs.sqlalchemy.org

React hooks: useState()

Denzel — Sun, 02 Jul 2023 20:58:47 +0000

Introduction

State management is a core function that gives React the ability to build interactive and dynamic applications. By using hooks, React gives developers the ability to access and manage those states. In this blog, we’ll explain the useState() hook and provide an example of how to use it.

What is useState()

In React, useState() is a built-in hook from the React library that gives you the power to add and manage state within a component. The useState() hook takes in an initial state and then returns two values.

const [state, setState] = useState(initialstate)

How to use useState()

Let's try building this counter app above:

The first thing we must do is import useState() from the React package:

import React, { useState } from “react”

Below it, we can write the base of our component called "Counter":

import React, { useState } from “react”

 function Counter() {
  return (
    <div>
    </div>
  );
}

Now we need to initialize our state. We can do that by adding his line of code const [count, setCount] = useState(0); under the component:

import React, { useState } from “react”

 function Counter() {
const [count, setCount] = useState(0);
  return (
    <div>
    </div>
  );
}

Next, we will need two functions. A function with the name of increment() to increase the counter and another function with the name of decrement() to decrease the counter:

function increment() {
    setCount(count + 1);
  };

  function decrement() {
    setCount(count - 1);
  };

These functions will have the responsibility of updating the current state. Whenever increment() is called, we will call setCount() to update the current count by +1 OR if decrement() is called we will call setCount() to update the current count by -1.

Lastly, we can add buttons for the user to interact with:

return (
    <div>
      <button onClick={increment}>+</button>
      <span>{count}</span>
      <button onClick={decrement}>-</button>
    </div>
  );

As shown in the code above, both buttons have an event listener called onClick. Whenever a button is clicked it will call the function that is inside of it. For example, when the + button is clicked, it will call on the increment() function and increase the count by 1; whenever the - button is clicked, it will call on the decrement() function and decrease the count by 1.

And that's it! Here is what our Counter component look like in its entirety:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  function increment() {
    setCount(count + 1);
  };

  function decrement() {
    setCount(count - 1);
  };

  return (
    <div>
      <button onClick={increment}>+</button>
      <span>{count}</span>
      <button onClick={decrement}>-</button>
    </div>
  );
}

Conclusion

There are many other ways to use the useState() hook and there are also many other hooks in React for developers to take advantage of. Whether it's to manage a state or make a counter app, the useState() hook is a very powerful tool to take your React projects to the next step.

Sources

ReactJS useState Hook - GeeksforGeeks

A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles, quizzes and practice/competitive programming/company interview Questions.

geeksforgeeks.org

useState – React

The library for web and native user interfaces

react.dev

The filter() method

Denzel — Sun, 02 Jul 2023 19:12:52 +0000

The first of many

Hello!
I'm currently a student from FlatIron School learning full stack development. This will be my very first blog post as a programmer and there will be many more! The topic I want to post about will be on the .filter method but first let's start with a real world problem:

Problem

Let’s say that you work as an event organizer for a basketball tournament. You’ve been tasked to categorize 100 participants in age, height, and weight to evenly distribute the participants into teams. What’s the best way to do it? We can use the array .filter() method.

Array.prototype.filter()

In JavaScript the .filter() method is a high-order function that can be used to filter out elements from an array. It does this by creating a new array with only elements that satisfies a given condition.

Syntax:

array.filter(callback(element[, index[, array]])[, thisArg])

The .filter()method takes in a total of five parameters three of which are optional:

callback function(required)
element(required)
index(optional)
array(optional)
thisValue(optional)

Let's look at some examples of the .filter() method:

const participants = [
  {
    name: "Joe",
    age: 25,
    height: 71, // 5'11"
    weight: 160
  },
  {
    name: "Chris",
    age: 30,
    height: 74, //6'2"
    weight: 180
  },
  {
    name: "Mike",
    age: 21,
    height: 68, //5'8"
    weight: 140
  },
  {
    name: "Thomas",
    age: 45,
    height: 77, //6'5"
    weight: 200
  },
  {
    name: "Loid",
    age: 27,
    height: 67, //5'7"
    weight: 170
  }
]

In the code above we have an array of objects called participants with name, age, height, and weight keys. Let’s say we wanted to separate the participants by their height. We want to get the name of participants whose heights are above 6 foot and those who are below 6 foot. To do that we can use .filter() like this:

// Filter objects with height 72 inches and over (6'0" and over)
const sixAndOver = participants.filter((person) =>
person.height >= 72);
const sixAndOverNames = sixAndOver.map((person) =>
person.name);

// Filter objects with height below 72 inches (below 6'0")
const below6ft = participants.filter((person) =>person.height < 72);
const below6ftNames = below6ft.map((person) => person.name);

Participants 6'0" and above

const sixAndOver = participants.filter((person) => person.height 
>= 72)

This line of code takes the object array called participants then uses the .filter() method to create a new array with only the objects that satisfy the condition inside it. Inside the .filter() we get one of the required parameters, a callback function. The callback function takes in an argument of objects called person. It then returns all of the objects person that have a height value of 72 inches and over (6’0” and over) thus filtering the participants object array. Now to get the name of the participants we will use the .map() method.

const sixAndOverNames = sixAndOver.map((person) => person.name);

With this line of code, we assign a variable called sixAndOverNames that uses the map() method to return a new array with the names of the objects that are in the sixAndOver array. This gets us the names of the participants that are 72 inches and over:

// LOG: [ 'Chris', 'Thomas' ]

Participants below 6'0"

We do something similar as before but instead we get the names of participants that are below 72 inches. First, just like before, we get a new array of objects that have a height value below 72 inches using this line of code:

const belowSix = participants.filter((person) => person.height < 72);

As you can see the condition has now changed to person.height < 72. Lastly, using .map() method:

const belowSixNames = belowSix.map((person) => person.name);

we create a new array that gives us the name of those that are below 72 inches in height:

// LOG: [ 'Joe', 'Mike', 'Loid' ]

Conclude

I'm sure that there are will be many cases where you'll find yourself using the .filter() method on your array as you dive deeper into the programming world. As for myself, I can see it being used in my future projects where I need to organize large amounts of data. I hope you've enjoyed the read!

Sources:
MDN web docs
w3 Schools
Geeksforgeeks

The filter() method

Denzel — Mon, 08 May 2023 20:23:26 +0000

The first of many

Problem

Array.prototype.filter()

Syntax:

array.filter(callback(element[, index[, array]])[, thisArg])

The .filter()method takes in a total of five parameters three of which are optional:

callback function(required)
element(required)
index(optional)
array(optional)
thisValue(optional)

Let's look at some examples of the .filter() method:

const participants = [
  {
    name: "Joe",
    age: 25,
    height: 71, // 5'11"
    weight: 160
  },
  {
    name: "Chris",
    age: 30,
    height: 74, //6'2"
    weight: 180
  },
  {
    name: "Mike",
    age: 21,
    height: 68, //5'8"
    weight: 140
  },
  {
    name: "Thomas",
    age: 45,
    height: 77, //6'5"
    weight: 200
  },
  {
    name: "Loid",
    age: 27,
    height: 67, //5'7"
    weight: 170
  }
]

// Filter objects with height 72 inches and over (6'0" and over)
const sixAndOver = participants.filter((person) =>{
    person.height >= 72
});
const sixAndOverNames = sixAndOver.map((person) =>{ 
    person.name
});

// Filter objects with height below 72 inches (below 6'0")
const below6ft = participants.filter((person) =>{
person.height < 72
});
const below6ftNames = below6ft.map((person) => person.name);

Participants 6'0" and above

const sixAndOver = participants.filter((person) =>{
person.height >= 72
});

const sixAndOverNames = sixAndOver.map((person) =>{ 
    person.name
});

// LOG: [ 'Chris', 'Thomas' ]

Participants below 6'0"

const belowSix = participants.filter((person) =>{
person.height < 72
});

As you can see the condition has now changed to person.height < 72. Lastly, using .map() method:

const belowSixNames = belowSix.map((person) => person.name);

we create a new array that gives us the name of those that are below 72 inches in height:

// LOG: [ 'Joe', 'Mike', 'Loid' ]

Conclude

Sources:
MDN web docs
w3 Schools
Geeksforgeeks