DEV Community: EmilyFernschild

Basics of Rails Password Protection

EmilyFernschild — Fri, 18 Nov 2022 21:29:52 +0000

In this blog, we will be using bcrypt for authentication in our rails backend. Password protection can be an extensive topic but I am going to keep this to just the 'need to know stuff' for now. Hopefully this will help you be able to implement authentication in your own project!

What is Authentication?

Authentication in simple terms is a way of verifying who you are. I often mix up authentication and authorization:

Authentication is a confirmation of user identity, while authorization determines whether you can access a particular resource [1].

Hopefully this quick definition of both will help you not mix them up like me! Having your authentication work properly is important for authorization later, they rely on each other.

Basics of bcrypt

Important concepts to know about how bycrpt works is that it uses hashing and salt algorithms to encrypt passwords for protection. The hashing algorithm turns plain text passwords into a jumble of letters and numbers. A key aspect of this is that they can't be turned back into plain text after they have been hashed. Salting is an added layer on top of hashing that creates a more unique jumble of letters and numbers for every password. The combination of hashing and salting each password ensures that each encrypted password is very secure.

Three Main Steps

1) The first step is to add the bcrypt gem to your Gemfile.

gem install bcrypt

2) In your Users table, the key word to have as your password column is 'password_digest'. ⭐ Note: only use 'password_digest' here and use just password everywhere else (including in your frontend!).

//schema.rb
 create_table "users", force: :cascade do |t|
    t.string "first_name"
    t.string "last_name"
    t.string "username"
    t.string "password_digest"
    t.datetime "created_at", precision: 6, null: false
    t.datetime "updated_at", precision: 6, null: false
 end

3) In your model, in our case our User model, include the macro 'has_secure_password'.

class User < ApplicationRecord
  has_secure_password
  //the rest of your model 
end

Example of use in a Login

after you do these step you can write something like this for a login feature on your application:

class SessionsController < ApplicationController
    skip_before_action :authorize, only: :create
    // for login feat
    def create
      user = User.find_by(username: params[:username])
      if user&.authenticate(params[:password])
        session[:user_id] = user.id
        render json: user
      else
        render json: { errors: ["Invalid username or password"] }, status: :unauthorized
      end
    end
end

Conclusion

These are the three steps to get your passwords protected. I hoped this helped in clearing up any confusion you may have had about encrypting passwords! If you missed it, here is the link to bcrypt!

Resources:
[1] D. Mamla, “Authentication and authorization in rails tutorial,” Nopio, 10-May-2021. [Online].

Sinatra with Active Record: GET requests using "include:"

EmilyFernschild — Thu, 27 Oct 2022 16:27:18 +0000

Happy Spooky Season! In this blog, I will be discussing a Ruby Sinatra backend with a React frontend. In this phase of my bootcamp, we started learning about the backend and things are finally starting to all come together. So I will be going over what GET requests look like from both backend and frontend along with how helpful include can be!

Hades gives spooky vibes right?

Frontend GET request

First, lets quickly review what a GET request is.

GET is an HTTP request method that is used to obtain resources from servers [1].

A GET request simply put "gets" data from your server, which in our case is our Sinatra backend. Let's take a look at what our request would look like from our front end:

// ./App.js
const [demons, setDemons] = useState([])

 useEffect(() => {
    fetch("http://localhost:9292/demons")
    .then((r) => r.json())
    .then((data) => setDemons(data));
  },[])

Here we are using our localhost url for our fetch so that we can get our demons data from our backend. This is important because this is how we connect our frontend to our backend.

Backend GET

To get your GET request working you need both you frontend fetch request and your backend request so that they can work together to pass the data from one to another. So our backend GET request would look like this:

class ApplicationController < Sinatra::Base
  set :default_content_type, 'application/json'

  get "/demons" do
      demons = Demon.all
      demons.to_json
  end

end

This is telling us that when using the route "/demons" get all the demon data in our database and return it to json format. If you go to your localhost route, you can see the data that the request is retrieving. Here is a sample of what our demon data will look like:
Perfect! Now you might be asking yourself, do we get the same data from our frontend? Lets find out, we can use console.log() to view the data being sent to our frontend in our fetch request. The data in our console will look something like this:

Now we have successfully connected our frontend and backend. Congratulations you just learned how to use GET requests to retrieve data from our backend and use it in our frontend!

`include:`

All of our demons guard souls in the underworld, meaning we have a one to many relationship where a demon has many souls and a soul belongs to a demon. So what if you wanted to not only fetch the demons but also its associated souls? we could do something like this:

  get "/demons" do
      demons = Demon.all
      demons.to_json(include: :souls)
  end

The include: allows use to have access to the souls that are related to the demons. So now with this small change our database will look something like this:
This now gives us every soul associated with that particular demon with the use of a foreign key (in this case that would be the demon_id). The foreign key is what allows us to connect the demons to the souls and therefor allows us to include this relationship in our database.
Now we can have access to this souls data from our frontend! An idea for what we could do in the frontend now is something like listing the souls for each demon to display them on our website! 👻

Conclusion

I hoped this blog helped you understand GET requests and all the ways you can connect your backend data to your frontend! I also hope that you can utilize include: in your future projects. Happy coding!

Resources:
[1] D. Landup, “Get HTTP request in react,” Stack Abuse, 28-Sep-2022. [Online]. Available: https://stackabuse.com/get-http-request-in-react/. [Accessed: 27-Oct-2022].

Basics of useState hook: How to use it and Where to put it?

EmilyFernschild — Thu, 06 Oct 2022 22:35:34 +0000

As I went into learning React in phase 2 of my coding bootcamp, after just learning JavaScript in phase 1, I realized how much easier it could make my life. I was so excited to learn React but it came with its ups and downs. For me, the hardest concept to grasp was props and state. I had the hardest time figuring out where to put state! In the beginning I found that I would have to lift state very often. That would result in me getting confused within my code, not knowing which way was up or which way was down.

Don’t you love that there's a Supernatural meme for everything?

Don’t worry though! I will give you all the tips and tricks that helped me in figuring out how to use state and especially where to put it! Hopefully it will prevent you from making similar mistakes that I kept making. 😊

Quick reminder of props:

Before we get into state, it's important to understand what props are:

Props stand for properties and is a keyword used in React. These props pass the data between the different components [1].

A component in simpler terms is a function and a prop is an argument that is passed into that function. There are two key things to remember about props: that they only get passed down from a parent to a child component and that the data that is being passed down can’t be changed by the child. Here is an example of using props:

/components/App
import Home from "./Home";
// pass this data down as props to the child component
import user from "../data/user";
function App() {
return (
    <div>
      <Home name = {user.name} />
    </div>
  )}
export default App;

/components/Home
function Home(props) {
  return (
    <div id="home">
      <h1>{props.name} is a Web Developer</h1>
    </div>
  )}
export default Home;
//=> Cindy is a Web Developer

In this example, we are importing data from an object (user) and passing down a prop of name to the child component (Home) from the parent component (App). Now in Home, we can access the name being passed down by the use of the curly braces and dot notation: {props.name}. As you can see here the name being passed down from user is Cindy, there is no way to change this other than going into the object user and manually changing it. If the data is something that you want to change, well that's where the state hook comes in to save the day!

What is a useState hook?

You might be thinking to yourself, what is a hook? Well, React says that:

A hook is a special function that lets you “hook into” React features. For example, useState is a hook that lets you add React state to function components [2].

Awesome, what is state exactly? Well state is data that is in your component, that is similar to a prop, but is expected to change over time. AKA users interacting with the DOM, for example a like button or a form submit. State is really helpful because it provides us a way of updating our data within our component.
The way a state hook works is that useState returns an array with 2 variables: a reference variable to the current value of state and a setter function for setting/updating state. An important tidbit about setter functions is that it triggers a re-render of the page every time state is changed! This is why state is so great in comparison to vanilla JavaScript, it automatically re-renders only when it needs to based on if state is changed.
I know this can be a little confusing, especially if you are mostly a visual learner like me, so let's look at some basic steps of how to use state!
First step is to import useState:

import { useState } from "react";

Second is to create your new state variable, let’s create a like button:

const [likes, setLikes] = useState(0);

Next use your state, we want a button to display the increasing likes:

function LikeButton(){
  const [likes, setLikes] = useState(0);
  return(
  <div>
    <button>{likes}</button>
  </div>
  )
}

Lastly, we want to set the state to update the number of likes every time the button is clicked:

function LikeButton(){
  const [likes, setLikes] = useState(0);
  return(
  <div>
    <button onClick={() => setLikes(likes + 1)}>{likes}</button>
  </div>
  )
}

And that's it! Now we have a like button that will show the amount of times it's been clicked!

When do you need State?

React give us three great questions to review when you’re wondering whether or not you need to create state:

Is it passed down from a parent via props? If so, you might not need state.
Does it remain unchanged over time? If so, you might not need state.
Can you compute it based on any other existing state or props in your component? If so, you might not need state [3].

Tip💡: what I did when learning was write these on a sticky note and put it on my monitor so that I could easily refer back to it!

What is Lifting State?

I mentioned lifting state earlier and how when I was learning about useState I found myself having to lift state often. That is because I would put state in the wrong place! Lifting state is moving state to the closest common ancestor of the components that need it. In simpler terms, it is moving state up to its parent component. Note: if there isn’t a good parent component, you can always make one!

Where should State live?

Lifting state as a beginner can be confusing, so knowing where state should live is important! A lot of my instructors were teaching us in the beginning to make or draw out the hierarchy of the components to help with understanding which components are parents, siblings, or children of each other. Knowing this information is great for determining where state should go. After a lot of time being stubborn and thinking I could just visualize the hierarchy in my head, I’m here to tell you that my instructors were… that’s correct, you guessed it… they were right! So after getting confused with where state should live multiple times, I eventually tried physically drawing out the components hierarchy and just like that ... CLICK!
I hope that all of you have that click moment too! So here are a few different tips and tricks for visualizing the components and deciding where state should live!

You could try simply writing/typing out a component hierarchy like this:

    App
      |- Header
      |- List Container
          |- List

Or my personal favorite, drawing out a diagram like this:

If you're doing a small project you could just draw this too, just to have it right in front of you, choose whatever way works best for you!

Or if you’re working on a larger project where there are a lot of components, you can use a program to help you create a diagram where you can continually add to it. This option is great because you can also add where you are putting your state in each component in your diagram as you go and keep going back to add to it as you expand your project, like this:

This example is from a project that displays the name, image, and quote of characters on cards with an add new character form and a search bar!

Here are some helpful programs that I found for creating diagrams: draw.io, Figma, LucidChart, and miro. Note: in the above diagrams I used draw.io!

Conclusion:

I hope this helped clear up any confusion about how useState works and where to put state. For more resources here's a YouTube video and React link that I found helpful! Happy coding!🧑‍💻

Resources:
[1] “REACT PROPS: Different examples to implement react props,” EDUCBA, 12-Jul-2021. [Online].
[2] “Using the State Hook,” React. [Online].
[3]“Thinking in react,” React. [Online].

Basics of For Loops: To For...in or For...of?

EmilyFernschild — Fri, 16 Sep 2022 12:42:02 +0000

Going into learning Javascript, I knew a little bit from my past about the basics of a For loop. I have learned it briefly in past classes and maybe even have used it before. When I began learning more about for statements, I struggled with for...in and for...of. So now I am here to help you! Learning coding can be scary at first, but it can also be really fun. Let me show you!

What is a For Loop?

First, let’s make sure you understand for loops. To briefly define a for loop, MDN describes: "the for statement creates a loop that consists of three optional expressions, enclosed in parentheses and separated by semicolons, followed by a statement (usually a block statement) to be executed in the loop [1]". In simpler terms, a for statement gives a beginning point for where the loop should start, a way to loop through, and finally an end so that the loop can stop and not be executed forever. It then executes that loop based on the statement that follows. Here’s a simple example of adding:

let a = '';
for (let i = 0; i < 5; i++) {
  a = a + i;
}
console.log(a);
//=> "01234

A simple for loop made sense to me when I was learning, so when I was introduced for…in and for…of I had a lot of questions. My first though was, why not just use a regular for loop? Later as I kept learning, I was getting confused, what was the difference between a for…in and for…of anyway? Learning at a rapid pace, it can sometimes be easy to get confused or to forget something. So, it took me a bit to realize that a for…in is to iterate through an object and for…of is to iterate through all iterable objects such as arrays.

How Do You Use a For...In?

A for…in as MDN describes is a “statement [that] iterates over all enumerable string properties of an object (ignoring properties keyed by symbols), including inherited enumerable properties [2]”. In other words, the for…in iterates through an object's keys. Let’s say we have an object with seven key value pairs or seven dwarfs each with a number associated with them like this…

let object = { bashful: 1, doc: 2, dopey: 3, grumpy: 4, happy: 5, sleepy: 6, sneezy: 7 }

Now let's create a for…in loop to iterate through each of the seven characters in the object and log a sentence for each!

for (const dwarf in object){
    console.log(`the ${object[dwarf]} dwarf is ${dwarf}`)
}
//=> "dwarf 1 is bashful"
//=> "dwarf 2 is doc"
//=> "dwarf 3 is dopey"
//=> "dwarf 4 is grumpy"
//=> "dwarf 5 is happy"
//=> "dwarf 6 is sleepy"
//=> "dwarf 7 is sneezy"

How Do You Use a For...Of?

The difference of a for…of loop as w3schools describes is a “statement [that] loops through the values of an iterable object. It lets you loop over iterable data structures such as Arrays, Strings, Maps, NodeLists, and more [3]”. For learning sake we're going to be using an array for this example. Here is an array with three names…

const array = ['Robbie', 'Miley', 'Jackson'];

Now we're going to use a for…of loop to iterate through each name in the array and log each name with the last name attached!

for (const name of array) {
   console.log(name + ' Stewart')
};
//=> Robbie Stewart 
//=> Miley Stewart 
//=> Jackson Stewart

Conclusion:

I hope I helped you understand the difference between for…in and for…of loops and when to properly use them. I also hope that through my examples I helped in showing you that coding can be fun!

References:
[1] “For - Javascript: MDN.” JavaScript | MDN, https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for.
[2] “For...in - Javascript: MDN.” JavaScript | MDN, https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in.
[3] “The For Of Loop.” JavaScript for Of, https://www.w3schools.com/js/js_loop_forof.asp.