DEV Community: Erick Vargas

Setting up Password Authentication With B-Crypt

Erick Vargas — Wed, 29 Jun 2022 16:00:40 +0000

Phase-4 at FlatIron school brought-forth several new topics including rails, validations, deployment, and authorization. One of the topics I was having trouble with in this phase was password authentication. As such I chose to write my phase-4 blog about the topic. While I had a hard time wrapping my head around this topic, I am writing this to further push my understanding and to give a different point of view, perhaps to someone who is also struggling with the concept. For this example we'll be using rails and react to set up password authentication for users.

Cookies

Before we can begin adding our routes and creating our methods, we need to make sure cookies are enabled in the application configuration file.

config.middleware.use ActionDispatch::Cookies
config.middleware.use ActionDispatch::Session::CookieStore

#This is for security
config.action_dispatch.cookies_same_site_protection = :strict

We will also need to make sure to add include ActionController::Cookies in our application controller in order for all controllers to have access to cookies. Cookies are important because it is what will allow us to store the user in a session.

Login

We'll start with the login route. For a user to log in we will need a route and a post method in the SessionsController, as we are creating a session for the user that will be logged in.
The route we'll use will also be a post request and go in the routes.rb file.

post "/login", to: "sessions#create"

In the Sessionscontroller we'll add

class SessionsController < ApplicationController
  def create
    user = User.find_by(username: params[:username])
    if user&.authenticate(params[:password])
      session[:user_id] = user.id
      render json: user, status: :created
    else
      render json: { error: "Invalid username or password" }, status: :unauthorized
    end
  end
end

In the code above we are creating a session, where if the password passed in from the params matches the password we have stored in the database, we set the session [:user_id] to the users id.
The front end will look something like this:

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

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

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

Above we can see that we are making our post request passing in the username and password.

Staying Logged In

One thing to note is when we refresh the page we lose the value of state which above we have set to password and username. Refreshing the page would log the user out and thus would have to log in again. We can handle this by retrieving the user data from the database once the user logs in. For this we would have to create a separate fetch route, that comes from the UsersController rather than the SessionsController.

get "/me", to: "users#show"

and in the "UsersController" we add a find method to find the user associated with said account.

class UsersController < ApplicationController
  def show
    user = User.find_by(id: session[:user_id])
    if user
      render json: user
    else
      render json: { error: "Not authorized" }, status: :unauthorized
    end
  end
end

On the front end we can do a fetch request to keep the user logged in.

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

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

Creating A User

To keep things short B-crypt is a gem that allows us to store our passwords in the database in a secure way. Passwords stored as a hash rather than the real value of the password which would be a security risk. When we create a password in a data-table it isn't stored in a password column, but instead in a column named password_digest. It is important that this column be named password_digest if we want to use B-crypt. In the user model we'll make sure to add has_secure_password in order to hash and salt all passwords.

class User < ApplicationRecord
  has_secure_password
end

The has_secure_password we added also provides two instances for our "User" model which are password and password_confirmation This will allow us to create a new user and add password and password-confirmation fields in a signup form.
*Another bonus is it allows us to raise exceptions to handle any errors.

Just like before we'll add a create method for a signup form in our front end.

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

  private

  def user_params
    params.permit(:username, :password, :password_confirmation)
  end
end

The params we are permitting for our create method are the username, password and password-confirmation fields which can be seen below.

function SignUp({ onLogin }) {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [passwordConfirmation, setPasswordConfirmation] = useState("");

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

  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="username">Username:</label>
      <input
        type="text"
        id="username"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
      />
      <label htmlFor="password">Password:</label>
      <input
        type="password"
        id="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      <label htmlFor="password_confirmation">Confirm Password:</label>
      <input
        type="password"
        id="password_confirmation"
        value={passwordConfirmation}
        onChange={(e) => setPasswordConfirmation(e.target.value)}
      />
      <button type="submit">Submit</button>
    </form>
  );
}

Deleting a Session
We can now sign in and sign up users, but what if we want to delete the current session or logout? It is very similar, where we'll need a route in our route.rb file, a delete method in our "SessionsController" and a request made from our front end, that will be triggered when we click on a Logout button.

#route
delete "/logout", to: "sessions#destroy"

#method in SessionsController
def destroy
  session.delete :user_id
  head :no_content
end

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

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

User authentication for phase-4 was by far one of the most challenging topics for me to comprehend at first, but was still very engaging to learn. As I finish phase-4, I am now able to create full-stack applications. However, there is still much to learn and I am eager to see what else there is out there.

Sources:
Accessing A Session
B-Crypt
Has-Secure Password
FlatIronSchool

Creating web-API routes with Active Record & Sinatra

Erick Vargas — Tue, 07 Jun 2022 04:20:55 +0000

Javascript, and react have been some very fun and interesting topics to learn about in these last couple of weeks. Phase-3 which included: Ruby, Active Record and Sinatra is no exception. It is very exciting to think that I can now create the not only the front-end of an application but now the back-end as-well. A topic that certainly stood out for me was building Sinatra applications, but more specifically, building web-API routes.

For this example we'll be using a data table called Dogs with the following attributes: name, breed, age, trait and image, as-well as a Dog model. Our goal is to develop web-based API routes that can be used to receive requests from a front end application in the JSON format.

class Dog < ActiveRecord::Base 

end

These routes will go in a folder named controller. While not doing this won't kill your app, it is a common pattern in web development followed by many web app developers. This pattern is known as the MVC or Model-View-Controller, which is used to separate the different types of components an app might have. The include the models which work with the database, and controllers which are in charge of receiving user requests.
Depending on the front end request the user makes, we will modify our web-API routes. We will mainly focus on the GET, POST, PATCH and DELETE crud methods. We'll start with the GET request.

GET Request

We first want to let the application controller know this is a get request, instead of using def which is how we begin most ruby methods, we'll start with get. Then we define what we want our route to be, in our case we'll use "/dogs". Thanks to active record we can also access all our dogs from the database using Dog.all, we then convert these objects to JSON formatted strings and thats it!

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


  get '/dogs' do
    dogs = Dog.all
    dogs.to_json
  end

end

We can double check to make sure our web-API route works by making a fetch request, which should return an array of objects with the correct keys corresponding to our column names. Which it indeed it does!

[
  {
        "id": 162,
        "name": "Bella",
        "breed": "French",
        "age": 2,
        "trait": "Curious",
        "image": "https://images.unsplash.com/photo-1616312513065-28cf4313abda?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1yZWxhdGVkfDE0fHx8ZW58MHx8fHw%3D&w=1000&q=80"
    },
    {
        "id": 163,
        "name": "Tony",
        "breed": "Beagle",
        "age": 1,
        "trait": "Couragous",
        "image": "https://images.unsplash.com/photo-1611306133736-56a3b973b2cc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8YmVhZ2xlJTIwZG9nfGVufDB8fDB8fA%3D%3D&w=1000&q=80"
    }
  ]

POST
If the user wants add a new dog to our database, we need a way to access the data submitted in the body of the request. We can access this data through the params hash.
To make the post route we can use use the same route used for the patch request, as the user is adding an additional dog instance to our already existing dog database. We are however creating a new dog, instead of using Dog.all which lists all our dog instances in the data base, we would instead use Dog.create followed by our params to match our database attributes to the received data.

post "/dogs" do
    dog = Dog.create(name: params[:name], breed: params[:breed], age: params[:age], trait: params[:trait], image: params[:image])
    dog.to_json
 end

PATCH

A patch request is similar to a post request but with an added bonus. If a user wants to edit the name of one of dogs in the database, we need a way for our route to specifically edit that particular dog. We'll define our route as "/dogs/:id" as each of our dog instances has its own id thanks to active record. We start by first finding the specified dog by the user. Once again we use active record, Dog.find(params[:id]). Now that we have the specified dog, we can update our database accordingly.

 patch '/dogs/:id' do
    dog = Dog.find(params[:id])
    dog.update(
      name: params[:name],
      breed: params[:breed],
      age: params[:age], 
      trait: params[:trait],
      image: params[:image]
    )
    dog.to_json
  end

DELETE

A delete response much like the patch request needs the id of the specified dog we want to delete. The route we'll use is "dogs/:id", find the dog in our database and then delete said dog, Dog.find(params[:id]).destroy.

 delete "/dogs/:id" do
    dog = Dog.find(params[:id])
    dog.destroy
    dog.to_json
  end

There are many possibilities when accessing the data in our database when making API routes. We can make it so we only return the first five instances in our database Dog.all.limit(5) in a fetch request, or order them alphabetically. We can edit how we want our data to be returned to the user based on the request.

Being able to set up our own web API is the highlight of this phase for me, although learning active record is a close second. I am very excited to see what new things I'll learn in the ruby on rails section, and what kind of projects I'll be able to create.

Components & Props

Erick Vargas — Mon, 16 May 2022 15:07:41 +0000

Intro about React

With a new phase comes new things to learn, and this phase the focus revolved around REACT. With react we are able to vastly expand on what we had learned about basic Javascript.

To make use of REACT and apply what we have learned our group decided to create an app that made use of of Reacts many functions. Our goal was to create an app that would minimally have multiple components, make use of client side routes, and be able to incorporate an external API. The API we decided on was a database comprised of zoo-animals which included several facts about such animals.

Making use of Components

One of my favorite things about react is the use of components and how easy it is to keep track of ones code. You can easily find exactly what you're looking for, granted you organized your own code to begin with.
Our first step consisted of fetching data from our json file, and setting that equal to our state. However using state will cause our fetch function to re-render again and again as soon as the data extracted is set equal to state. To prevent this we used the useEffect hook to make sure our fetch function only runs once.

Now that we have access to our data, we could then pass this data as a prop to our ZooAnimalList component in order to extract specific parts of our object data such as name, and id just to name a few.

Having extracted the data we wanted, we could now pass on these pieces our ZooAnimalCard component which is in charge of actually displaying these pieces of information on to our DOM with the desired HTML.

Passing data between components is not the only use of props. We can also pass on functions that can be defined in one component and then be used in a completely different one. We managed to pass our data as props from one component to another in order to display our animal cards on screen with the appropriate information. However we also want to be able to submit our own card if we wish to do so. The steps needed for this would be very similar.
We first made an AnimalForm component which took user input through onchange, and onSubmit events. We make a post request to our server. Once a response is received we pass it our handleAddAnimal function as newAnimal.

The handleAddAnimal function was defined in our ZooAnimalPage component but was passed down through props. We can call a function even though it is in a completely different file! By updating our state value to include the newly added user input we can then update the DOM directly.

Components and props have been one of the most interesting and fun concepts I have learned to date. The way they work together to create such great products, it is no surprise why REACT so widely used. While there is still a lot to learn, it is definitely exciting to think of the types of applications I'll be able to create in the future.

HTTP Verbs & JSON

Erick Vargas — Mon, 25 Apr 2022 04:13:08 +0000

As someone who is new to software engineering there have been topics thrown at me left and right. While some of them are easier than others to understand, there was a particular topic that peaked my interest and that is the way JSON and servers communicate with one another. Before that I think some background information on how the internet works could help digest the information a little easier.

JSON

JavaScript Object Notation (JSON) is a type of data-interchange format used by many different coding languages including JavaScript. JSON is used as a medium of communication between a client and a server, which you can then use transport or store data between the two. An advantage JSON has over other data formats is the way its data is stored. The data is stored as text based data which is then arranged similarly as an object, or array.

Fetch/Get

There will be times when we want to retrieve data from other servers/databases using JSON. We can do this through a Get request.
When we want to retrieve data we start with the fetch function, fetch("_____"). Where we pass an argument which contains the source or source path of the information we want to obtain.

During this step a response comes back as a promise and we then pass it to our .then() function which converts it to a JSON format, or a format we can work with. In order to then pass this converted data to our next .then function however we have to return such data. If we are using arrow notation we don't have to physically type return as it is implied with arrow notation.

We then follow up with a second .then() function, that allows us receive the returned data and pass to a function where we can now work with the data.

Errors and catch:

There will be times where you will run into errors (shoker), If something goes wrong and json fails to retrieve data, we wouldn't know immediately, or at least where the error could be coming from. For this we add the catch function to give us a hint as to what could be the source of the error.

Get

Unlike fetch which only retrieves data, post on the other hand allows us to update our database with new data. While fetch only required us to have the path to our desired data as an argument, for POST and the following HTTP verbs we need to pass a second argument in the form of an object.

This object must include three components, the method, a header, and a body. The header for this case would be "POST" as we are posting data on to our database. There are more verbs that do different things but that will be later on.
The header key contains the "content type" we are sending which in our case is in the json format, and the type of information we will accept, which is also in json format.
The body key is where we add the data that we want to pass to the server. JSON however will only store text-based data so we convert any data we are passing as objects into strings. We do that through the stringify method. The data is passed and returns as a string which is then ready to be sent. All together this looks like this:

With the next couple of methods, the structure will remain relatively the same, the biggest change would be the verb we use as the method.

Put

The put request method is structured similar, but instead of of posting or adding something to the database, it instead updates an already existing set of data. In the fetch data path, an identifier is needed to access the specific data set you want to update. Most likely will be the id of the data set you want to update. The method type would change to put, and the the data you wish to add would then go in the stringify function.

DELETE

The delete request method simply deletes the specified data in the database. Again we alter the endpoint of our fetch request and change the method type to DELETE. In this case we do not need a body as we are not sending any data but instead sending a request to delete the specified data.

HEAD

This method is very similar to get/fetch except it does not require a response. This method is mainly used to to obtain meta-information without transferring actual data. Such as testing hyperlinks.

Trace

Trace is used to receive trace calls or signals that report how long a certain action is taking. This is done by looping a certain action which in turn return a trace call with data that can then be used for debugging or improving certain aspects of a program.

Options

Options is straightforward and describes the communication options for the target source. How one can access/use resources and what methods one can use to access them.

Connect

This method allows for a two way communication between the the server and the client.

Communication between servers can be tricky to understand at first, but the more you learn about it the more fascinated you become. I've used a computer for almost my entire life and never thought I'd understand how computers and servers communicate. I know it's not the entire puzzle but knowing how a small piece works is intriguing and only makes me look forward to learning more about software engineering.

Sources:
https://www.oracle.com/technical-resources/articles/java/json.html
https://www.pragmaticapi.com/blog/2013/02/14/restful-patterns-for-the-head-verb/
https://developer.mozilla.org/en-US/docs/Web/HTML/Element