DEV Community: jgarbero-source

Ruby on Rails: Authentication and Authorization

jgarbero-source — Tue, 02 Aug 2022 22:08:00 +0000

Before learning about authentication and authorization, I always thought that users and their profiles were a black box that I would never understand. But when I discovered how to create and utilize profiles during my time at Flatiron School, I realized how simple of a process it actually is. In this blog, I'll be teaching you how to do it!

Creating a User to be Authenticated

Let's start with authentication. Authentication is the process through which your application verifies that a user has been created. Prior to any model creation, it's important install the gem BCrypt, which allows you to encrypt and thereby protect clients' passwords.

gem 'bcrypt', '~> 3.1.18'

Now, let's go ahead and create some models, along with their controllers, serializers, and routes. We can do so with the following code:

rails g resource Recipe title servings ingredients recipe
rails g resource User name password_digest bio
rails g resource Review content user_id:integer recipe_id:integer

To be compatible with BCrypt, it's important to create your password column as password_digest so that BCrypt can encrypt that password. An important note: the only time you will refer to the password as password_digest is here. Everywhere else (react, rails, etc.), you will refer to it as password. This is only so BCrypt knows to specifically encrypt that part in the database. Once you have migrated these files, go into your User.rb and put has_secure_password. This allows BCrypt to function.

Before we create a user, how can we ensure that we are signed in as a user, the application remembers who we are? We can do this through cookies. Inside of our application_controller.rb, we must have written include ActionController::Cookies. This allows us to create sessions, which in essence allocates each user a session when they are logged in. This allows the application to essentially "remember" a user by associating all of the actions done in that session with the user to which it belongs.

Next, we must create our routes. To create an appropriate route to create a user, go into /config/routes.rb and put the following code: post "/signup", to: "users#create". This opens up the route to create a user. Now, let's go to ourusers_controller.rb` file. Inside, we have to create an appropriate landing pad for our route. We have to create a user with the given parameters.

  def create
    user = User.create!(user_params)
    session[:user_id] = user.id
    render json: user, status: :created
  end

private

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

This code allows us to create a user and assign a session to it. Once this code runs and works, we have created a user!

Authenticating and Authorizing a User

Okay, so we've created the user, but how do we actually login and start a session with it? Let's look back at our routes. In order to create a session with our user, we must post the following inside routes.rb: post "/login", to: "sessions#create. Similar to before, this sets up our route to be able to login.

Now, let's head to our sessions_controller.rb file. Now, let's think about what we need to do here. We need to find our user in the database that we've created, and we need to make sure that they are created. But don't we also need to make sure that user is who they say they are? Users prove who they are by giving us a correct password. We must not only validate that the user exists (authentication) but also ensure that the user is who they say they are (authorization). So, we can do the following:

def create
     user = User.find_by(username: params[:username])
     user&.authenticate(params[:password])
     session[:user_id] = user.id
     render json: user
end

`Theuser&.authenticate` bit does two things: it ensure that the user exists, and that password provided matches the encrypted one that we have in our database. In the case that the user provides the wrong password, we can provide them with errors:

  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

``
Because of the need to authorize and authenticate the user, we cannot hoist this error into the application controller. It must be written this way. Here, we are authenticating and authorizing the user. If they pass both tests, we start a session for them, and they are logged into the application.

When it is time to logout of the application, the procedure is much simpler. In our routes.rb file, we create the following line: delete "/logout", to: "sessions#destroy". In our sessions_controller.rb, we can create our landing pad with the following code:

  def destroy
    session.delete :user_id
    head :no_content
  end

``
This deletes the session associated with that user, successfully logging said user out. As you can see, the procedure for authenticating and authorizing is fairly simple. If there is interest, I can go ahead and write a future blog post about how to set this up on the frontend in react, creating a fullstack authentication and authorization app feature. Either way, I plan on writing about it soon. I hope this can help someone!

I thought Sinatra was just a singer...?

jgarbero-source — Mon, 11 Jul 2022 23:52:43 +0000

Who (or what) is Sinatra?

When I first started learning about Ruby, I heard the word Sinatra thrown around a lot. And when I heard it, all I hear was Frank Sinatra's 'My Way' ringing in my ear. What does Frank Sinatra have to do with Ruby, or even coding? Even when I started learning about it in the context of Ruby, I still had a hard time understanding it, so I devoted some time to understanding it more thoroughly. Now, I'd like to share with others what I've learned because Sinatra is pretty cool!

Essentially, Sinatra is a DSL, or domain-specific language, that allows you to create a mock frontend web application with using just Ruby and libraries developed from Ruby (e.g., ActiveRecord). I've been told by my instructors as Flatiron School that Sinatra is like training wheels for Ruby on Rails. Ruby on Rails is a powerful framework for development that provides the user with ample code and resources to create an efficient and powerful application. Sinatra, with much less code and an easier set up, makes web development possible for Ruby beginners.

How do you set up Sinatra?

A fellow Flatiron student has a blog post that thoroughly describes the steps to set up Sinatra here. But some things have changed! So, I will provide a more up-to-date version here.

1). Create a config file with both a database.yml and environment.rb file.

database.yml:

default: &default
  adapter: sqlite3
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  timeout: 5000

development:
  <<: *default
  database: db/development.sqlite3

test:
  <<: *default
  database: db/test.sqlite3

production:
  <<: *default
  database: db/production.sqlite3

This ensures that you can link your files to a database.

Environment.rb file:

ENV['RACK_ENV'] ||= "development"

require 'bundler/setup'
Bundler.require(:default, ENV['RACK_ENV'])

require_all 'app'

This connects your app folder with your models and controller to the rest of your files. Both of these are necessary for Sinatra to function.

2). Ensure that you have the correct gems in your gemfile.

Here are the gems you will need to install, among others of your choice:

source "https://rubygems.org"

gem "sinatra", "~> 2.1"

gem "thin", "~> 1.8"

gem "rack-contrib", "~> 2.3"

gem "rack-cors", "~> 1.1"

gem "activerecord", "~> 6.1"

gem "sinatra-activerecord", "~> 2.0"

gem "rake", "~> 13.0"

gem "sqlite3", "~> 1.4"

gem "require_all", "~> 3.0"

group :development do
  gem "pry", "~> 0.14.1"
  gem "rerun"
end

3). Create the config.ru file.

This file is what allows you to use the application controller, which functions as the intermediary between your frontend code and your ruby code. It is essential to have this file.

require_relative "./config/environment"

use Rack::Cors do
  allow do
    origins '*'
    resource '*', headers: :any, methods: [:get, :post, :delete, :put, :patch, :options, :head]
  end
end

use Rack::JSONBodyParser

run ApplicationController ## Most critical yet forgotten line!

4). Create an application controller.

This is a file that should be created in your app/controllers folder. It looks similar to a regular model, but with some important differences.

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

  get "/" do
     { message: "I love Frank Sinatra!" }.to_json
  end

  get "/games" do
     Game.all.to_json
  end
end

After this, if you were to run bundle exec rake server, you would be led to http://localhost9292 and there find the message I've written above in json! If we were to go to http://localhost9292/games, we would see an array of all the game objects written in json!

If you're familiar with Javascript and React, you know that in order to get any sort of information from a website, you need to make a fetch request. When we make such requests, we use a URL that has our data (like localhost). For example:

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

What we've essentially done is set up our own link that we can then call upon in a fetch request. Instead of finding a server with data, we can make our own!

What we can also now do is create any sort of link in our controller folder that can summon any portion of our data using Ruby and ActiveRecord. Do we just want to render one instance of a particular model? Or do we want to render the first 10 of another? The beauty of using Sinatra in this way is that we can easily gather this information and send it to our frontend in a way that doesn't require us a lot of effort.

So, not only is Sinatra a fantastic singer, but it's also a handy tool that we as Ruby beginners can prepare ourselves for Ruby on Rails!

Sources

React Router: Understanding How We Interact with Web Pages Today

jgarbero-source — Wed, 22 Jun 2022 01:20:27 +0000

Have you ever wondered how modern web pages functioned? I remember I always wondered how it was that web pages were able to store so many different pages, forms, and information. It always seemed like a vast library to me. As I initially learned Javascript in a coding bootcamp at Flatiron School, I thought it was exciting that I was able to learn basic code, but I was disappointed that I wasn't learning how actual web pages functioned. It seemed like there was a big disconnect. What does a "for-loop" have to do with creating a website that can store my information under my username? Well, up until we started learning React, I had no idea. But once we started learning about React and React Router, I learned that there is a way, built on basic Javascript and HTML, that we can create websites with different pages that allow us to metaphorically create a vast building with a complex structure and rich interior.

What is React Router?

React Router is a program that provides comprehensive human interaction with a webpage. One of the ways that I'll highlight this is through URL route matching. To understand URL route matching, we first need to understand location. To demonstrate, I'll use a website that I'm currently building with some others at Flatiron School. It's still a work in progress, but I'm eager to show what we have. Here is a picture of our website home.

As you can see, there are the words "Home", "Search", and "Favorites" near the top. What React Router allows us to do is we can click on each of these words and they can take us to a different "room" of the building of our website. In other words, they can take us to another page of the website. At the click of one of those words, we change the URL, and we are sent to another page.

How does React Router work?

As I mentioned, when I click on one of those words, we are sent to another page of the website. But what happens under the hood? Well, let's take a look at part of our App.js.

import React, { useEffect, useState } from 'react';
import { Route, Switch } from 'react-router-dom';
import Header from './Header';
import NavBar from './NavBar';
import Search from './Search';
import Favorites from './Favorites';
import Home from './Home';
import '../assets/css/App.css';

//...code here...

return (
    <div className='app'>
      <Header />
      <NavBar />
      <Switch>
        <Route exact path='/search'>
          <Search />
        </Route>
        <Route exact path='/favorites'>
          <Favorites />
        </Route>
        <Route exact path='/'>
          <Home />
        </Route>
      </Switch>
    </div>
  );

First, we import Route and Switch from react-router-dom. What Route does for us is render the page that we want it to based on what the current URL is. That is, if the url ends with '/search', it will dispaly the search component. The other components still exact, but route allows us to render them as null so they are invisible to the eye. Switch is what allows us ro freely look for other components by changing the URL. Once we call another component through the URL such as '/favorites', that component will render instead because of switch.

How then do we get it to appear in a bar at the top of the page? Let's take a look at NavBar.

import React from 'react';
import { NavLink } from 'react-router-dom';

function NavBar() {
  return (
    <>
      <NavLink exact to='/'>
        Home
      </NavLink>
      <NavLink exact to='/search'>
        Search
      </NavLink>
      <NavLink exact to='/favorites'>
        Favorites
      </NavLink>
    </>
  );
}

In our NavBar component, we import NavLink. This allows us to do multiple things at once. Not only can we set our URLs and where they will take us, but they can also make it so that when we click on those words, they take us to the new page. The NavBar component then renders the bar we see up top with these words. Now, we have full functionality of our multiple pages, and we've only rendered a single page website! React Router is pretty awesome.

So Should I Learn React Router?

With the way that web pages function now, it only makes sense to learn how React Router works. It's ultimately pretty simple as well. Everything still functions as components, but you have a clean way of putting them all on a page. I'm excited to learn more about React Router given its versatility, so I hope you are, too!

SOURCES

What Exactly Is a State in React?

jgarbero-source — Thu, 09 Jun 2022 12:13:03 +0000

By my title, you're probably wondering if this is an article about political theory. It's even better--or worse! We're talking about React! Based on my studies in college, I never thought I would be writing about programming over political theory, but here I am, and I'm pretty happy about it!

When I first started learning how to code in Javascript, I found it a bit frustrating how the interaction between the user and the browser was so dry. "Why isn't what I'm typing directly affecting the DOM?" I wondered. I figured since I was new that it was just something I didn't understand, but I was still curious. Then, I had a meeting with a coding instructor to get some help on a lab. When he looked over my code, and said parenthetically, "Hmm...this is a bit redundant but probably not worth teaching you to write it better. It won't be necessary once you get to React anyways." At that point, I was too overwhelmed to wonder what React was, but I had an idea that it would provide some sort of answer to my curiosity.

And it did!

WHAT IS REACT?

React is a framework (or library) used on the front end of programming. It is entirely built out of vanilla Javascript, and it allows us to construct websites in particular ways. With JSX, the code that is used in React, you can construct building blocks for websites, known as components, that not only allow you to easily construct pleasantly organized websites but also facilitate direct user manipulation of the website (what I was talking about earlier!). It does this through what is called a Stateful Component!

WHAT IS A STATE?

To understand a state component in React, it's useful to understand a prop. For a parent component to pass useful information to a child component, it uses props. These props cannot change unless their parent allows it. Their parents are strict! On the other hand, states allow us to update information in the component (the building blocks of webistes) without informaiton from the parent. Think of them as the disobedient children when compared to props. Essentially, states turn the DOM from static to dynamic because they allow users to directly manipulate the DOM.

HOW DOES A STATE WORK?

In order to use a state, you must import it from react.

import React, { useState } from "react";

Let's say we want to create a button that, when pressed, adds to a counter. That counter starts at 0 and increases by 1 each click. In order to do that, we must create a Counter function and initialize the state inside of it.

import React, { useState } from "react";

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

     return <button>{count}</button>
}

This code might look at a little strange at first. Why do we do it this way? We could always write it this way:

const countState = useState(0) // this gives [0, setStateFunction]
const count = countState[0];
const setCount = countState[1];

While this this exactly the same as the code above, the former is much cleaner. Essentially, useState creates an array, where the first [0] value is the default state, and the second [1] value is the function that can change that state. By destructuring in the first former code, we are able to create this array in a clean way. In our example, count has a default state of 0, and setCount gives us the ability to change this count.

So, if setCount allows us to change the value of count, let's create a function inside Counter that allows us to do that.

import React, { useState } from "react";

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

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

  return <button>{count}</button>;
}

Not only does this new function add to our count variable, but it also automatically re-renders. What makes state so powerful is that it allows us to manipulate the DOM without having to find any buttons or forms. It allows us to change the screen without having to interact with things behind the scenes.

React provides us with state, which allows us to directly change what is on our screen without having to directly tamper with the HTML. This allows to write more powerful, versatile, and cleaner code. In understanding state, I now see how a majority of websites I interact with work! When I began to understand it, it felt like I was actually a computer programmer because I was understanding how things work now, whereas before I was just learning how to write Javascript. I hope after this article you feel a little more like a computer programmer, too!

SOURCES

State: https://reactjs.org/
Props vs. state: https://github.com/uberVU/react-guide/blob/master/props-vs-state.md
How to use useState: https://blog.logrocket.com/a-guide-to-usestate-in-react-ecb9952e406c/#:~:text=useState%20is%20a%20Hook%20(function,function%20to%20update%20this%20value.

What's the deal with algorithms?

jgarbero-source — Fri, 03 Jun 2022 16:22:24 +0000

Growing up, math was always my favorite subject. I loved being able to look at a set of numbers and instructions and then be able to transform that into a solution using a prescribed method. It made me feel secure and confident. For that reason, I knew I wanted to go into some sort of engineering field. After a pursuing a career in social science for a while, I finally decided that I wanted to pursue an engineering career, but I was unsure what type of engineering that would be. I planned to return to undergrad and earn another bachelors in civil, mechanical, electrical, and software engineering. I was learning more toward the first three because I knew that I would be able to use more of my mathematical skills. However, as I looked deeper into which types of engineering I enjoyed and wanted to pursue as a career, software engineering quickly rose to the top. I thought, “this is great! A career that I enjoy with financial stability. But where is the math?!” While software engineering definitely requires technical thinking, in the beginning, it didn’t seem like a field that would make me use mathematical reasoning. That is until I discovered algorithms and their role in the field!

What are algorithms?

Simply put, algorithms are a set of clear, discrete, step-by-step instructions that accomplish a task and/or solve a problem (Rao 2019). A day-to-day example of an algorithm is a recipe with a set of instructions. For example, to bake a cake, you must:

 Preheat the oven
 Gather dry ingredients
 Mix dry ingredients
 Gather wet ingredients
 Mix wet ingredients
 Mix both wet and dry ingredients
 Put batter into a pan
 Put into the oven and bake for 40 minutes
 Meanwhile, mix ingredients for frosting
 Take cake out and let it cool
 Frost the cake
 Enjoy!

While it might not seem like it, we just created an algorithm! We created a step-by-step solution to accomplish the task of baking a cake. Every day, we use algorithms, whether we are following google maps, using a recipe to bake a cake, or reading a sign on the road. Clearly, algorithms are important. But I understand what you may be thinking: okay, sure, algorithms are important, but this seems a little elementary. Why is it important to understand algorithms if they’re something we take for granted? There are many good answers to this question, but I will answer it for the field of computer science.

Why do we need algorithms?

Let’s say you have to give a set of instructions to someone on how to make a sandwich. How would you do it? You would probably tell them get the following ingredients: bread, jelly, and peanut butter. You tell them to put the jelly on one slice of bread, peanut butter on the other, stack the bread, and then eat it. Pretty simple, right? But what if that person didn’t now what peanut butter was? Or didn’t know how to spread the peanut butter? Or didn’t know that you should stack the bread in a way where the peanut butter and jelly was on the inside of the bread? You’d become quickly exasperated in such a situation. But this is the life of programmers everywhere. Daily, we deal with a machine that requires such explicit instructions. So, we’ve learned to appreciate the algorithm.

This might sound counterintuitive, but computers are not smart. If you told a computer to make you a sandwich, it would throw up its hands and tell you “ERROR!” Why? A computer doesn’t know what peanut butter is, or how to spread it. In other words, a computer needs very specific instructions. This is where algorithms come to the rescue. If we try to talk to the computer like a human, it won’t listen. If we talk to it in a language it understands, it will do what it tells us to do. Algorithms thus help us break down problems into a way that a computer can understand and solve. And because computers can do great things, the power to control with algorithms computers gives us great power.

How do we write algorithms?

Let’s switch up the problem. Let’s say we want to create an algorithm that determines if a word is a palindrome or not. A palindrome is a word that is spelled the same way forwards and backward (e.g., racecar, mom, dad, etc.). First, let’s think about what you would tell a human to do if they needed to determine if a word was a palindrome. What would you do? You would tell a human to look at a word and then maybe write it out backwards. If it’s the same as the original word, then it’s a palindrome! Yay!

But could you do that to a computer? If you opened up a coding simulator and typed that in, your computer would throw an error. We have to speak a language that it can understand. So, how would you start? If you’re getting overwhelmed thinking about how to begin, you’re not alone. We are not computers, so it makes sense that we don’t think like them. So how do we bridge this gap? We do it with pseudocode!

Pseudocoding is writing out an algorithm in non-technical, easy-to-understand language (Grant 2020). Instead of worrying about how to accomplish the task and the language we need to write the algorithm in, let’s first worry about how to accomplish the task. What do we need to do to get a computer to determine if something is a palindrome? Let’s start by giving it an input that’s a string (or word/collection of words).

//function takes a word

Okay, then what? Well, the computer has to reverse the word. Let’s not worry about how to do that just yet. Let’s just get the computer to reverse the word.

   //function takes a word
   //function reverses the word

Now, let’s have the computer compare these two words. To compare them, we can have the computer give these two words a name.

   //function takes a word (called word)
   //function reverses the word (called revWord)
   //function compares word and revWord

Okay, so if the words are the same, the computer should tell us. Let’s have it tell us “We have a palindrome!” If not, it can tell us “This is not a palindrome.”

   //function takes a word (called word)
   //function reverses the word (called revWord)
   //function compares word and revWord
   //if they are same, say “We have a palindrome!”
   //if not, say “This is not a palindrome.”

And we have written our pseudocode! The next step is to turn this into language that the computer can understand. Let’s begin in javascript:

function palindrome (word) {

}

Okay, that’s our first step. Now, we have the next step to reverse the word. This is not as simple, but let’s think about this. Javascript cannot reverse a string, but it can reverse an array. What if we turn the word into an array of letters? Let’s try it.

function palindrome (word) {
     let split = word.split();
}

Okay, now we have an array in the variable split. Let’s reverse that array.

function palindrome (word) {
    Let split = word.split();
    Let revArray = split.reverse();
}

Now, if we had the input of “dog”, we would have [“g”, “o”, “d”]. While we clearly see that this is reverse, it’s still an array and therefore cannot be read as a word. Let’s put it back together.

function palindrome (word) {
    Let split = word.split();
    Let revArray = split.reverse();
    Let revWord = revArray.join(“”);
}

Now it’s back to normal. Let’s take a look back at our pseudo code. We need to determine if the word is a palindrome or not. Let’s do that using an “if else” method.

function palindrome (word) {
    Let split = word.split();
    Let revArray = split.reverse();
    Let revWord = revArray.join(“”);

    If (word === revWord) {
        Return “This is a palindrome!”;
    } else {
        Return “This is not a palindrome!”;
    }
   }

And we have our function! We have told a computer to determine whether or not something is a palindrome.

What’s the point?

At this point, you may be thinking, “Okay, great, I know how to get a computer to do something, but I can pretty easily determine whether or not something is a palindrome.” Really? In 2002, Peter Norvig of Google sought out to create the longest palindrome. The previous record was over 56,000 words. Let’s look at a brief chunk of it:

“A man, a plan, a cameo, Zena, Bird, Mocha, Prowel, a rave, 
 Uganda, Wait, a lobola, Argo, Goto, Koser, Ihab, Udall, a 
 revocation, Ebarta, Muscat, eyes, Rehm, a cession, Udella, E- 
 boat, OAS, a mirage, IPBM, a caress, Etam, FCA, a mica, Ojai, 
 Lebowa, Yaeger, a barge, Rab, Alsatian, a mod, Adv, a rps, 
 Ileane, Valeta, Grenada, Hetty, Fayme, REME, HCM, Tsan, 
 Owena, Tamar…”

Would you want to look at this manually? Of course not. But we could give this to our algorithm that we just made and easily see if it’s a palindrome or not. That’s the power of understanding algorithms!

Conclusion

I love that I’ll be able to write algorithms. I think they force me to use my mathematical skills that I’ve always wanted to use in my career. They also help you accomplish tasks that are too difficult to do without computers. And not to mention that the more able you are to create algorithms to solve difficult problems, the more likely you are to land your dream programming job. For this reason, it’s important to practice as much as you can. Try looking at an algorithm once a day. Just look at one. If you can solve it, great. But as you expose yourself to this, you’ll begin to think like a computer and more easily be able to communicate with one! Good luck, and happy programming!