DEV Community: bellagerken

User authentication in flask / react

bellagerken — Wed, 19 Jul 2023 14:46:46 +0000

In order to allow users to login to a website and identify themselves, we can implement authentication into our application. To do this, we need to implement the use of cookies and sessions. Cookies are information that gets sent to client from the server. That information gets stored on the browser and each request that follows get sent back to the server. A session allows users to be remembered, where cookies can track user interaction throughout the duration of their session.

In order to begin the process of authenticating users, we must set up a POST login in the backend. Doing this would look something like this:

class Login(Resource):

    def post(self):
        user = User.query.filter(
            User.username == request.get_json()['username']
        ).first()

        session['user_id'] = user.id
        return user.to_dict()

This allows users to post a username and begin a session. On the frontend side, it would look something like this:

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>
  );
}

This creates a form for the user to enter in their information, and once they click submit their login info will be posted to the back-end and the session will begin.

A problem that arises after logging in is if the user refreshes the page, the front-end has no way of remembering who they are. In order to solve this problem, we can implement a class starting in the back-end called "check_session". The code for this class would look something like this:

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')

On the front-end:

function App() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetch("/check_session").then((response) => {
      if (response.ok) {
        response.json().then((user) => setUser(user));
      }
    });
  }, []);

  if (user) {
    return <h2>Welcome, {user.username}!</h2>;
  } else {
    return <Login onLogin={setUser} />;
  }
}

Here, we are using state to keep the user logged in after checking to see if there is a session running.

Lastly, to log the user out of the session the solution is simple. From the backend, the code will look like this:

class Logout(Resource):

    def delete(self):
        session['user_id'] = None
        return {'message': '204: No Content'}, 204

api.add_resource(Logout, '/logout')

Simply put - the backend sets the session equal to none. On the front end, the code looks something like this:

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

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

Once the user clicks on the button, they will log themselves out and the session will end.

How to build a GET Api using Flask

bellagerken — Fri, 30 Jun 2023 12:20:40 +0000

In order to make a GET request in a front end React application from the server, the server needs to be set up in that it sends an object array in JSON format. On the front end, you might see something like this:

function tripList() {
  const [trips, setTrips] = useState([]);

  useEffect(() => {
    fetch("http://localhost:4000/trips")
      .then((r) => r.json())
      .then((trips) => setTrips(trips));
  }, []);

  return (
    <section>
      {trips.map((trip) => (
        <TripItem key={trip.id} trip={trip} />
      ))}
    </section>
  );
}

To set up the back end of the GET request, there are some initializers to be set up first. At the top of an app.py file, you will start with something that looks like this:

from flask import Flask, jsonify, make_response
from flask_sqlalchemy import SQLAlchemy
from flask_migrate import Migrate

from models import db, User, Review, Game

app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///app.db'
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
app.json.compact = False

migrate = Migrate(app, db)

db.init_app(app)

Using jsonify allows us to serialize our arguments (lists or dictionaries) as JSON and subsequently returns a response. make_response is what is used to send back the data. To begin setting up the GET request, we can start by settings up an @app.route('/trips') to our list of trips. From there, we want to define a function called def trips. Next, the idea is to grab all of the trips that we have a put them in a list, which we will then jsonify and send the response via make_response. To begin, we want to set up an empty list and set it equal to a variable such as "trips". Next, we will use query to get all of our trips which will look like: Trips.query.all(). However, it's important to serialize each trips in all trips and to resolve that issue we can create a for loop. Within the for loop, the next step is to create the dictionary object for the trip. For example:

for trip in Trips.query.all():
    trip_dict = {
       "date": trip.date,
       "location": trip.location
    }

Next, we want to append these trip_dict's to the empty list that we created. After that, we can create a variable called "response" and set it equal to make_response(jsonify(trips), 200). Lastly within the function we want to return the response! This is how you set up a GET request in Flask. See below for the full code under @app.route.

@app.route('/trips')
def trips():

    trips = []
    for trip in Trip.query.all():
        trip_dict = {
            "date": trip.date,
            "location": trip.location,
        }
        trips.append(trip_dict)

    response = make_response(
        trips,
        200,
        {"Content-Type": "application/json"}
    )

    return response

How to create a game of hangman in python

bellagerken — Fri, 09 Jun 2023 12:07:46 +0000

def get_word():

The very first thing to be done is create a list of possible words to be stored as a variable called word_list. Then call the random.choice method in order to get a new word each time the user plays.

word = random.choice(word_list)
        return word.upper()

def play(word):

Next create a method that contains all the code for playing the game. To start, you can declare a few variables and printed a few statements like this:

word_completion = "_" * len(word)
guessed = False
guessed_letters = []
guessed_words = []
tries = 6
print("Let's play Hangman!")
print(display_hangman(tries))
print(word_completion)
print("\n")

"word_completion" represents underscore symbols times the length of the random word that was chosen. "guessed" represents whether or not yet the player has correctly entered all the right letters of the word. The letters and words that the player guesses will be appended to a list, and tries represents how many more chances they have until the hangman is complete. Additionally, there are some statements that direct the user to play, and print(display_hangman(tries)) refers to the next method to be created in which 7 different hangman stages will need to be created and stored as a list. The index of each hangman will be related to the number of tries the player still has to guess the correct answer. Additionally, the empty underscores will be shown to the player (word_completion) before the game begins.

The next step is to start a while loop as the user has not guessed the answer and their tries to win are greater than 0. To begin, initialize a variable called guess and set it equal to input("Please guess a letter or word: ").upper() where the player will enter their guess. Then, create an if/else statement block that first checks if the length of the guess is equal to 1 and if it is apart of the alphabet. Within that 'if' statement, create another that checks if 'guess' is in 'guessed_letters', and print: print("You already guessed the letter", guess). If guess is not in the word: print(guess, "is not in the word."). Here, the 'tries' variable will decrease by 1 (which will also cause the hangman to gain a body part since tries is related to its index), and the empty guess_letters list will append the guess. Else, if the guess is in the word, create a print statement that notifies the player, append the guess to 'guessed_letters', and create a variable for creating a list of 'word_completion'.

In relation to the first if statement created, finish it by then creating an elif statement that checks if the length of the guess is equal to the length of the word (and is a part of the alphabet). Within that elif statement create another if statement that checks if guess is in guessed words in which print: print("You already guessed the word", guess). If not in the word, print: print(guess, "is not the word."). Decrease the tries by one and append the guess to 'guessed_words' list. Else, guess = True and word_completion = word.

else:
        print("Not a valid guess.")
    print(display_hangman(tries))
    print(word_completion)
    print("\n")

Lastly, create a print statement if the player correctly guessed the word that says something like:

if guessed:
print("Congrats, you guessed the word! You win!")

else:
print("Sorry, you ran out of tries. The word was " + word + ". Maybe next time!")

Now your hangman code is complete!

For reference, see below an example of how you can create a visual hangman:

def display_hangman(tries):
    stages = [ 
                """
                   --------
                   |      |
                   |      🤠
                   |    👋👔👋
                   |      👖
                   |     👟👟
                   -
                """,
                # head, torso, both arms, and one leg
                """
                   --------
                   |      |
                   |      🤠
                   |    👋👔👋
                   |      👖
                   |     👟
                   -
                """,
                # head, torso, and both arms
                """
                   --------
                   |      |
                   |      🤠
                   |    👋👔👋
                   |      👖
                   |      
                   -
                """,
                # head, torso, and one arm
                """
                   --------
                   |      |
                   |      🤠
                   |    👋👔
                   |      👖
                   |     
                   -
                """,
                # head and torso
                """
                   --------
                   |      |
                   |      🤠
                   |      👔
                   |      👖
                   |     
                   -
                """,
                # head
                """
                   --------
                   |      |
                   |      🤠
                   |    
                   |      
                   |     
                   -
                """,
                # initial empty state
                """
                   --------
                   |      |
                   |      
                   |    
                   |      
                   |     
                   -
                """
    ]
    return stages[tries]

What I learned about React Components

bellagerken — Wed, 17 May 2023 12:02:46 +0000

When learning Javascript for the first time, all of our code to render information on a webpage was on one index.js file. While this is convenient for a small website, as more complex websites are built with lots of different pieces, it can be difficult to keep your code organized.

React introduces a way to organize your data in a way that will allow the programmer to render independent and reusable pieces to the DOM. Components contribute to the functionality and presentation of our code, which becomes more and more helpful as our web applications become more complex. The simple goal of a React component is to contain a smaller section of code that describes what should be rendered to the
DOM.

In order to write a component, we must declare a function and name it starting with a capital letter. The capital letter differentiates javascript functions from react components, and must be used in order to render the components to the DOM. The return value for the function contains a snippet of JSX. The beauty of a React component is that if we then wanted to render this JSX multiple times, we could repeatedly call on this component so that is gets rendered with no variations. It is almost as if components are like functions for rendering sections of JSX to the DOM.

An example of a component that would create a header tag is:

function Header(){
  return(
    <div>
      <h1>Hello</h1>
    </div>
  )
}

export default Header

When finished writing a component, we export it and import it to its parent component in which it will use in its return statement. It is common of react applications to contain one main component, typically called App.js, that renders the application's top-level components.

An example of how a our Header component would be imported and returned in its parent (App) component is detailed below:

import Header from "./Header"

function App(){
  return(
    <div>
      <Header/>
    </div>
  )
}

What this translates to is:

function App(){
  return(
    <div>
      Hello
    </div>
  )
}

Overall, React components make a programmer's life much easier by organizing their code in a way that renders JSX through small sections of code that are independent, and reusable.

What I learned about scope

bellagerken — Wed, 26 Apr 2023 12:44:37 +0000

As a beginner learning javascript, the concept of “scope” was a particularly difficult one for me to grasp. However, as difficult as it was, understanding it has drastically transformed my ability to create and execute my code. Scope is the concept of whether or not we have access to variables and functions depending on where they are declared. When a variable is declared outside of a function, regardless if it’s declared with const, let, or var, that variable has what we call “global scope”. When a variable has global scope, it means we are able to access that variable everywhere in our program. Similarly, when a function is declared using the “function” declaration, accessing it has global scope because it isn’t nested within another function. With this being said, functions and variables that are declared within a function have what we call function scope. This means that they are only accessible within the function they were declared in and nowhere else.

For example, if I declared a function and variable such as:

function myFunction(){
    const myVariable = “hello”
    return myVariable;
}

If I tried to invoke “myVariable” outside of this function, javascript wouldn’t know what I was referencing and would likely return “undefined”.

Another concept that I learned while about scope is the concept of “parent scope”. As you may know, multiple functions can be nested within each other creating a chain. “Scope chain” is what we call the concept of which functions have access to which variables, and functions only have access to the variables declared in its parent functions. For example, when we declare a second function inside a first, the second function has access to the first function, also known as it’s parent function, as well as anything declared globally. However, the first function declared does not have access to the variables declared within the second function. As the third, fourth, fifth, and so-on functions get declared in the chain, the bottom ones have access to what is above them, but not below. Lastly, I learned that statements containing blocks also create their own scope, however, when variables are declared with “var” instead of “const” or “let”, they maintain their global scope. This is why it is important to use “var” with caution, and remains safer to use “const” or “let”.

When practicing for our class code challenge, the concept of scope became very prevalent while creating my code. While declaring my variables, I had initially started out declaring all of them within the first function I was using.

Take a look at a section of my code here:

function displayFirstCake(firstcake){
const cakeName = document.getElementById('cake-name')
const cakedescription = document.getElementById('cake-description')
const cakeImage = document.getElementById('cake-image')
const cakeReviews = document.getElementById('review-list')
cakeName.textContent = firstcake.name
cakedescription.textContent = firstcake.description
cakeImage.src = firstcake.image_url
}

However, later when I declared a new function and was trying to access the variable “cake reviews”, I wasn’t able to because it contained function scope and not global scope. It was here when I decided to move all my variables declared into global scope (outside of this function) because that would mean I had access within both of my functions. However, another alternative would’ve been to declare the same variable in my new function. Because my new function didn’t have access to the previous one, the same name for the variable could’ve been used in my new function as well without getting javascript confused.

Additionally, another method I used when I was struggling with the scope of my variables was to declare a variable using “let” in global scope. When I set it equal to a value in one function, then I was able to access that value in another function. This is because using “let” allows for the value of the variables to change, and also since it was declared globally, I had access to it wherever I needed. Knowing this ended up being very helpful while practicing for my code challenge.

Learning the concept of scope was crucial to my ability to learn and use javascript. Without this knowledge, one can spend an enormous amount of unnecessary time struggling to access their variables and functions. I know I will use this knowledge indefinitely throughout my coding career!