Forem: jkap100

Redirect with React Router v6

jkap100 — Wed, 04 May 2022 13:36:20 +0000

Issue
Building an app that will redirect a user back to the login page if not authenticated.

Solution
We can use Navigate with react router 6 and some simple conditional logic in order to redirect the user back to login when they attempt to view a page and is not authenticated.

Lets assume we have a backend set up that will accept a POST request in order to authenticate a user. Our front end is set up to send a send a POST fetch request and if authenticated store that user in state. The front end fetch could look something like this.

const body = {
  username: username,
  password: password,
};

fetch("/login", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify(body),
}).then((r) => {
  if (r.ok) {
    r.json().then((user) => setCurrentUser(user));
    navigate("/home");
  } else {
    r.json().then((err) => setErrors(err.errors));
});

Now we can utilize React Router v6 and Navigate to redirect the the user based on whether or not we have an authenticated user stored in state (currentUser).

Make sure you have installed React Router v6 which can be done with this command :npm install react-router-dom@6.

Next make sure you have imported BrowserRouter, Navigate, Routes, Route from react-router-dom.

import { BrowserRouter, Navigate, Routes, Route } from "react-router-dom"

Once you have your routes set up we can add the following bit of logic to check whether an authenticated user is in state. The following code assumes I have page that shows dogs.

<Route 
  path="/dogs"
  element={
    !currentUser ? <Navigate to="/login" /> : <DogsShow />
/>

In english this asking if not currentUser then navigate to /login else render DogsShow.

And there you have it a quick and easy way to add redirect logic to your app.

Rails - Validations & Error Handling

jkap100 — Mon, 02 May 2022 18:32:26 +0000

VALIDATIONS

One of the principal strengths of Rails is providing a structure on which to build a database, Rails offers an incredibly useful gem called Active Record. Active Record handles the M-model of the MVC paradigm, and is an ORM system that allows objects to be mapped to a database. In simple terms, Active Record allows translation and conversion so that Ruby can be used to perform more complex tasks within Rails.

When using a database, there needs to be checks that the data being added, removed or altered is in order, and is not a threat to the security or functionality of the database. Active Record includes validation features so data offered to the database can be validated before being accepted and persisted. In this blog we will cover an overview of Active Record validations and error handling.

Let's say you are setting up a Rails application with a User class with the following attributes: username, age and address.

Imagine a scenario where a form is submitted from the client side. What would happen if the user didn't include a name or submitted their age as a negative number or included fields that should't be edited/updated by the user. Obviously, this is invalid data, and we would want to include validations that prevent them from being saved to the database.

The client side of an application can validate form data, but there needs to be an insurance on the server side, which, ideally, is inaccessible. This is where Active Record validations come in. Validations can be used in different ways, but a great place to start is with the helpful validation helpers that Active Record provides. These helpers are established to provide common use validations like whether a required field was entered, or an entry matches the required length of characters. Adding some validations for our use attributes could look something like this.

class User < ApplicationRecord

  validates :name, presence: true
  validates :age, numericality: {
    greater_than_or_equal_to: 1
  }
  validates :address, length: { minimum: 6 }

end

Here we are validating that a POST request includes a name, age is number greater than or equal to 1 and that address has a minimum character count of six. if we try to create a new user and any of these validations fail, then we will get an error. These are just simple examples and there are many other validation options that can be utilized when building your backend. There is also the ability to create custom validations which you can reference here.

ERROR HANDLING

Now that we've seen how Active Record can be used to validate our data, let's see how we can use that in our controllers to give our user access to the validation errors, so they can fix their typos or other problems with their request.

We can use a tool like postman to help with testing our API. I have set up a simple create rout for creating a new user.

class UsersController < ApplicationController

  def create
    user = User.create(user_params)
    render json: user, status: :created
  end

  private

  def user_params
    params.permit(:name, :age, :address)
  end

end

Here is what would happen if we try and submit a POST request without including the user age.

Request:

{
"name": "Blizz",
"address": "12345 Street"
}

Response:

{
"name": "Blizz",
"age": null,
"address": "12345 Street"
}

The server still returns a user object, but it is obvious that it is not saved successfully. The model validation prevented the bad database, but we did not receive any information regarding why the information was not saved(error). In order to provide context, we can update the user controller to change the response if the user was not save successfully.

There are three different ways we can go about using the controller to return errors:

If/else statements
Rescue
Rescue_from

If/Else

Using an if/else will look something like this:

class UserController < ApplicationController

  def create
    user = User.create(user_params)
    if user.valid?
      render json: user, status: :created
    else
      render json: {errors: user.errors}, status: :unprocessable_entity
    end

  end

This is a perfectly acceptable way to handle validation errors. But abiding to DRY code rules, writing all this code for every single error would be very time consuming, especially when the status codes you're targeting are repetitive and generic enough messages. Here is the error that is returned when sending the same POST request from earlier.

{
  "errors": {
      "age": [
        "is not a number"
      ]
    }
}

Reviewing the server will also show that the 422 Unprocessable Entity status code was returned:
Completed 422 Unprocessable Entity in 8ms (Views: 6.5ms | ActiveRecord: 0.2ms | Allocations: 3821

Rescue

A more efficient way to return errors is to use rescue which looks like this:

class UserController < ApplicationController

  def create
    user = User.create!(user_params)
    render json: user, status: :created
  rescue ActiveRecord::RecordInvalid => invalid
    render json: {errors: invalid.record.errors.full_messages), status: :unprocessable_entity
  end

  private

  def user_params
    params.permit(:name, :age, :address)
  end

end

There are a few now concepts to be aware of to ensure rescue functions properly:

The addition of the rescue section tells the exception operator what to execute if it runs into errors. It's important to anticipate what Active Record errors you will receive so you can properly diagnose the message and status. In this example you can tell the error is an unprocessable_entity error which ahs a 422 status code. You can reference rails status codes here.
In the rescue block, the invalid variable is an instance of the exception itself. From that invalid variable, we can access the actual Active Record instance with the record method, where we can retrieve the errors.
The addition of ! at the end of the create call. This is the exception operator. By adding the exception operator, the instance method will know that if the methed produces a nill result, it will skip to find the rescue associated with its error, which is the ActiveRecord:RecordInvalid in this case.

Rescue_from

We can still improve our code by making it more DRY using rescue_from. The below example shows how you can handle all ActiveRecord::RecordInvalid exceptions using the rescue_from method.

class UsersController < ApplicationController

  rescue_from ActiveRecord::RecordInvalid, with: :render_unprocessable_entity_response

  def create
    user = User.create!(user_params)
    render json: user, status: :created
  end

  private

  def user_params
    params.permit(:name, :age, :address)
  end

  def render_unprocessable_entity_response(invalid)
    render json: {errors: invalid.record.errors}, status: :unprocessable_entity
  end

end

As you can see rescue_from is the most scalable way to handle errors of the three options. The best part is you can write rescue_from in your application controller and all other controllers will inherit the rescue_from. Note that you will need to make a new rescue_from to handle each different type of error.

Mass Assignment

jkap100 — Thu, 28 Apr 2022 23:48:07 +0000

Mass assignment is the practice of assigning values to multiple variables or object properties all at once.

Mass Assignment is an extremely common practice. A couple examples: multiplayer video games passing a lot of state data and storing it and in pretty much every enterprise application where there are a lot of customizable for fields that are getting stored in a database.

Mass Assignment vulnerabilities occur when a user is able to initialize or overwrite server-side variables or objects which are not intended by the application. This can be done by manually crafting a request to include additional parameters in a request, which could result in a malicious user adversely affecting application functionality. Essentially this is a really easy way for someone to wreck your database.

Mass assignment attacks first became popular to attack ruby frameworks however it is absolutely not limited to ruby. This type of vulnerability can have alternative names depending on the language/framework being used:

Mass Assignment - Ruby on Rails, Node.js
Auto binding - ASP NET MVC, Spring MVC
Object injection: PHP

Let's walk through an example

Assume we have an application where a user is going to sign up in the system. When a user is signed up the following parameters are set:

First Name
Last Name
Email
Password
Admin (true/false)

The code could look something like this:

class User < ActiveRecord: :Base
   attr_accessor :email, :password, :admin, :first_name, :last_name

The user is signed up based on the parameters which are passed to the server from the front end. What this means it is common for the developer to only be checking or validating whether all the fields are being set when the user is created.

As a result if a malicious user was to assume or guess there was an admin field and if the admin field was se to true the this malicious user would have admin privileges within the application. This could be accomplished by sending a JSON request that looks something like this:

{
"email": "user@test.com",
"password": "myPassword*",
"admin": "true",
"first_name": "malicious",
"last_name": "user"
}

Clearly a significant security risk.

GitHub Example

GitHub was exploited by a mass assignment attack in 2012 by a user named Egor Homakov. Egor Homakov's hack caused widespread alarm among developers. According to GitHub, he exploited a vulnerability in the site's public key update form that gave administrator privileges, letting him commit a file to the Ruby on Rails project. All in all, logs showed Homakov compromised only three accounts. But there was potential for significantly worse damage.

"The root cause of the vulnerability was a failure to properly check incoming form parameters, a problem known as the mass-assignment vulnerability" GitHub co-founder Tom Preston-Werner wrote in a blog post. "In parallel to the attack investigation we initiated a full audit of the GitHub codebase to ensure no other instances of this vulnerability were present".

The GitHub attack was instrumental in bringing mass assignment vulnerabilities to light.

Defending agains mass assignment attacks (in brief)

You should try to disable the automatic mapping of properties whenever possible; all properties should be mapped manually, and others should be ignored.
You should not rely on a blacklist to block the data that the user is not allowed to edit but instead you should rely on a whitelist that enable users to edit specified objects. Whitelisting denies access to resources and only the "owner" can allow access. Blacklisting allows access to all with the provision that only certain items are denied.
Rely on the functions of the framework when whitelisting instead of writing your own. These functions have been tested many times over so they are more likely to be safe than a custom-built solution.
If you have the resources, you should investigate the request and responses that reach the API and what properties they can have. Test if parameters the user cannot edit are actually read only by sending them a request and trying to edit them.

Conclusion

Utilizing mass assignment can make the work of developers easier but it potentially will also help malicious users to exploit vulnerabilities. Therefor, it is important to think critically about the function of every parameter within an application and make sure you understand what it means and what all the options are for that specific property and to utilize available security measures.

Custom Hooks in React

jkap100 — Wed, 27 Apr 2022 16:22:11 +0000

** REACT HOOKS**

Hooks were introduced in React 16.8 which let you use state and other React features without needing to write a class. The primary reason for introducing hooks was to solve a wide range of problems including:

It's hard to reuse stateful logic between components
Complex components become difficult to understand
Classes confuse both people and machines

A detailed explanation of these issues are discussed within React Docs

React has create a number of useful hooks that are ready for use (useState, useEffect etc.). If you are interested in learning more about built in React hooks reference here.

CUSTOM HOOKS

Often times it is desirable to use the same stateful logic between multiple components. Traditionally this has been achieved by having higher-order components and then rendering props. Creating custom hooks allows for the use of the same stateful logic but without the requirement of adding additional components.

When creating a custom hook the first thing that you need to do is give the hook a name that begins with "use". This is a convention used by React so that React can perform behind the scenes work to ensure your code will perform as expected.

CREATING OUR OWN CUSTOM HOOK

Let's walk through an example of creating a custom hook that will fetch data and can be reusable across multiple components.

To begin I have created a very simple React app that has only an App and Index component. It also will utilize a JSON server to fetch data from a db.json. Currently in App we have imported useEffect and useState and wrote a function that will fetch all of the images in our database. Here is the code.

import "./App.css";
import React, { useState, useEffect } from "react";

function App() {
   const baseUrl = "http://localhost:3001";

   const [images, setImages] = useState([]);

   useEffect(() => {
     fetch(baseUrl + "/images")
      .then((r) => r.json())
      .then(setImages);
   }, []);

   return (
     <div>
       <h1>Fetch Data</h1>
     </div>
   );
 }

export default App;

Inspecting the console will show that the array of image objects has successfully been fetched and stored in state.

The first step to building the custom hook is to create a new component where we will writ code to create the custom hook which I have will call useFetch.js. Make sure to import useState and useEffect.

A way to save a little time getting started writing the code for useFetch is to copy the code we have in the App component and then make updates so that it will be reusable. Replace images and setImages with data and setData. This allows for the ability to fetch different types of data during future use. You may be wondering if calling both the useState and arrow function parameters "data" will cause an issue. It does not as the arrow function parameter is local inside the function.

The next step is to return some values from the useFetch function. To do this create an object and place data inside of it. In this examples only have one value to include however in other uses it is possible to include multiple values within the object in order to achieve the desired results from the hook thats being written.

The last thing to do is pass the endpoint of the url into the usFetch function. This also means that the url needs to be set as a dependency to useEffect. To do so add it to the array. What this means is that whenever the url changes it will re-run the function to fetch the data. Now we are done with useFetch.js. Here is the code:

function useFetch(url) {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch(url)
     .then((r) => r.json())
     .then(setData);
 }, [url]);

  return { data };
}

export default useFetch;

Now it is time to import the useFetch function inside the Aoo component and use it. At the top of app import useFetch from "./useFetch". Inside the app function se data as a variable equal to useFetch and pass in the url. It looks like this:

import "./App.css";
import React, { useState, useEffect } from "react";
import useFetch from "./useFetch";

function App() {
   const data = useFetch"http://localhost:3001/images";

   return (
     <div>
       <h1>Fetch Data</h1>
     </div>
   );
 }

export default App;

Now going back and inspecting the console it would show you the Fetch hook and images have been successfully fetched and stored in state

CONCLUSION

A huge benefit of custom hooks is reusability. When written and used properly they can eliminate writing the same code across multiple components that use the same common stateful logic. If you want to learn more about building your own custom hooks visit here

Using the JavaScript array method flatMap()

jkap100 — Thu, 24 Feb 2022 20:25:24 +0000

INTRODUCTION - flatMap()

This tutorial will demonstrate how to use the map(), flat() and flatMap() array methods in JavaScript. flatMap() is a newer array method which was introduced in es2019. As described by MDN web docs flatMap can be used as a way to add and remove items (modify the number of items) during a map. In other words, it allows you to map many items to many items (by handling each input item separately), rather than always one-to-one. In this sense, it works like the opposite of filter. In simple
terms, this method gives you the ability to map, but also to remove or even add new items in the resulting mapped array. The same results of flatMap() can be achieved by using a map() followed by a flat() but using flat map is more efficient and provides for cleaner code.

REFRESH - How flat() works

The flat() method creates a new array with all sub-array elements concatenated into it recursively up to the specified depth. Let's look at an example of using the flat method.

const numberArray = [
1,2,[3,4,5],6,[[7,8],[8,9],[10,11,12]],13,[[14,15],[16,17]],[18]
];

Using the flat() method on the above numberArray will create a new array by removing the nested arrays at a specified depth. The default depth is one level.

let flatArray = numberArray.flat();
console.log(flatArray);

Running this code will provide the following RESULT =>

As you can see, we now have an array that no longer has nested arrays. There are however elements within the new array that are still arrays. These can be removed if we had run the flat() method at a depth of 2. See below.

let flatArray = numberArray.flat(2);
console.log(flatArray)

We now have a flat array where each element is an individual number from the numbersArray!

REFRESH - How map() works

The map() method creates a new array from calling a function on every array element in the array that's called. There are a few important things to note about the map() method:

map() does not execute the function for an empty element.
map() does not change the original array.

Map is similar to forEach() however forEach() does not return anything and is affecting the original array. map() provides a new array built out of all the return values.

Here is an example of using the map() method:

let skiResorts = [
  "Meadows",
  "Crystal",
  "Big Sky",
  "Kicking Horse",
  "Jackson Hole",
  "Alta",
  "Park City",
  "Crested Butte",
  "Aspen"
];

let nameLengths = skiResorts.map(function (item, index, array) {
   return item.length;
});

console.log(nameLengths);

In this example the map() method is being used to create an array of the length of each string within the skiResorts array. Here are the RESULTS =>

USING THE flatMap() METHOD

The following example will demonstrate how flatMap() can be a useful tool to non-destructively transform messy data into a usable format. Check out the following skiResorts array.

let skiResorts = [
  "Meadows",
  ["Crystal", "Stevens Pass"],
  "",
  "    ",
  "Park City,Deer Valley,  Canyons,  ",
  "Crested Butte, Aspen, A Basin",
  "Revelstoke",
  ["Kicking Horse", "Fernie", "Lake Louise"]
];

A couple of things to notice:
-It is an array of ski resort names
-There are entries that are arrays of resort names
-There are empty entries
-There are entries that have a string of resort names separated by commas
-Spacing is inconsistent

The following steps will show how to compress this list where every entry in the array is a single ski resort.

Step 1

let resortsArr = skiResorts.flatMap((entry) => {
  if (Array.isArray(entry)) return entry;
});

console.log(resortsArr);

In this function entry represents each line in the skiResorts array. The if statement is checking to see if each entry is an array and if true then return the array. Here are what the RESULTS look like=>

Notice that the entries within the skiResorts array that are not arrays are returned with undefined.

Step 2

This step will deal with the empty string entries by adding an else if condition to the conditional.

let resortsArr = skiResorts.flatMap((entry) => {
  if (Array.isArray(entry)) {
    return entry;
  } else if (typeof entry === "string" && entry.trim() === "") {
    return [];
  }
});

Here the function is checking to see if each entry is both a string and empty, if true it will return an empty array. The reason to return an empty array is to allow for the removal of the empty arrays. Remember that this function is performing a map and then a flat. The map will return the same number of entries as the original array and then the flat will do a filtering and remove the empty arrays. Check out the RESULTS =>

Step 3

Tie to deal with the strings

let resortsArr = skiResorts.flatMap((entry) => {
  if (Array.isArray(entry)) {
    return entry;
  } else if (typeof entry === "string" && entry.trim() === "") {
    return [];
  } else {
    return entry.split(",");
  }
});

console.log(resortsArr);

A final conditional has been added to the above function. entry.split will return the strings that have multiple resort names and turn them into arrays. See the RESULTS =>

This is close to our desired results however there are still some extra spaces that need to be taken care of.

Step 4

This is the final step. Take a look at what has been added to the resortArr function.

let resortsArr = skiResorts.flatMap((entry) => {
  if (Array.isArray(entry)) {
    return entry;
  } else if (typeof entry === "string" && entry.trim() === "") {
    return [];
  } else {
    return entry.split(",").map((txt) => txt.trim());
  }
});

console.log(resortsArr);

Here a map has been added that uses the .trim() method to remove all the extra spaces in any of the entries within the array. Look at what the resortsArr looks like now. RESULTS =>

resortsArr is now an array where every entry is a single ski resort name (string).

CONCLUSION

flatMap() can be a very useful tool to efficiently and elegantly clean up data in a non-destructive manner.