Forem: Connor Holland

Custom Hooks in React

Connor Holland — Wed, 30 Jun 2021 18:45:19 +0000

During my final project at flatiron school, I found myself writing most if not all my react components as functional components. As we know, with functional components we have to use hooks to be able to access things like state and life cycle methods. When I started to use hooks, I found that using hooks in functional components made everything so much easier. With that I wanted to figure out how to write my own hooks. For example lets create a custom hook that is similar to useState but also synchronizes to local storage.

First lets define our hook, like so...

const useLocalStorage = () => {
}

Something to notice is that to follow react hook conventions we want to put use in front of our hook name. In this case we are creating a hook to save some data to out local storage. The next thing we want to do is use reacts useState hook. We would add it like so.

const useLocalStorage = () => {
  const [name, setName] = useState(localStorage.getItem('name') || '');
}

What we are essentially doing is giving the hook its own state which will return a name saved in local storage if it exists. Next we want to add a way to set the local storage name. Wee would use the useEffect hook that react gives us.

const useLocalStorage = () => {
  const [name, setName] = useState(localStorage.getItem('name') || '');

React.useEffect(() => {
 localStorage.setItem('name', name);
}, [name]);

 return [name, setName]
}

What this is now doing is that when we set the name in the state it will trigger the useEffect and set the name stored in state to the localStorage variable 'name'. With that we now have our hook! We can call it like we do with useState.

const [name, setName] = useLocalStorage()

Ta da! You know created and called your own hook!

Using Firebase API for authentication

Connor Holland — Sun, 27 Jun 2021 22:17:46 +0000

To start things off this blog will mainly cover setting up the Firebase API for authentication and not setting up an actual project in firebase.

To kick things off this blog assumes you already created a project in firebase and enabled authentication. For this project we are using authentication with password and email.

The first thing you will want to do is find the api-key in your firebase project and create a variable called API_KEY in your .env file. Once, that is completed we can move on and begin talking about creating a user using the firebase API.

Something to note is that for my project and my auth, I am using a react frontend and a rails API as my back end.

To begin creating a user, let's begin creating a class function in our users model which will look something like this.

def self.create_user(email, password)
end

Great, now that we have our function defined, we can now add the code to call the api. In order to do requests to the firebase API, I recommend installing the HTTParty gem (bundle install 'httparty'). Once we have that installed we can now use that to call a post request to the url that is required via the documentation. Our function should now look like this...

def self.create_user(email, password)
resp = HTTParty.post("https://identitytoolkit.googleapis.com/v1/accounts:signUp?key=#{ENV['API_KEY']}",
        :body => {
            email: email,
            password: password
            }.to_json,
        :headers => {'Content-Type' => 'application/json'}
        )

        if resp.key?('idToken')
            User.create(email: resp["email"], uid: resp["localId"])
            return {message: 'Success', token: resp['idToken']}
        else
            return {message: resp["error"]["errors"][0]}
        end
end

Here we are creating a local variable called resp (short for response) and using the .post to send a post request to "https://identitytoolkit.googleapis.com/v1/accounts:signUp?key=#{ENV['API_KEY']}". Make sure to set the key to the api key you defined in your .env file earlier. We then need to pass in a hash that includes the payload or the data we want to pass to the API which is done in the body key. Make sure to put .to_json at the end of the body to convert it to json. We then also need to set our headers 'Content-Type' to 'application/json' to tell the api that we are sending data in the json format. Once we call this method and pass in valid data, if it works, the firebase API should return a successful response which I am handling with the conditional at the bottom which is specific to my project but you can in reality handle that however you want. Ta-da! We now have a function that connects to the firebase API to create a user! In my application, I am calling it in my users create action and grabbing the email and password from my react frontend which can be found in the params.

Now that we know how to create users, how can we sign in via the firebase API? Well, it's actually very similar to how we created a user. In my backend I created a sessions controller and in my create action I am doing a post request to the API passing the email and password. My create action looks like this.

def create
        resp = HTTParty.post("https://identitytoolkit.googleapis.com/v1/accounts:signInWithPassword?key=#{ENV['API_KEY']}",
        :body => {
            email: user_params['email'],
            password: user_params['password'],
            returnSecureToken: true
        }.to_json,
        :headers => {'Content-Type' => 'application/json'}    
        )

        if resp.key?("idToken")
            render json: {message: "Successfully logged in!", token: resp['idToken'], localId: resp['localId']}
        else
            render json: {message: "Error logging in!", error: resp["error"]}
        end
    end

As you can see the format is very similar to how we created a user. Somethings to notice however, is that when you successfully sign in the API will then send back a token. You have to enable this token by adding "returnSecureToken: true" to our body in the hash we are sending to the API. Another thing to note is the url that we are sending the post request is slightly different to the one for creating a user.

Since my backend isn't handling sessions, there is no need to have a sign out function. I am handling the signed in and signed out functionality in my frontend by using the token that this function returns. And thats it! You know have basic authentication using the firebase auth API.

The crazy world of javascript functions

Connor Holland — Mon, 24 May 2021 18:10:30 +0000

When I first began learning about javascript, the one thing that was by far the most confusing was the different types of functions that javascript has to offer.

The two key ways to declare functions is through function declarations and function expressions.

Let's begin by taking look at an example of a function declaration.

function greeting(name) {
return `Hello, ${name}!`
}

greeting("Tom")
// => "Hello, Tom!"

Above is an example of a function declaration. We can see that the function is declared using the 'function' keyword. It is then followed by the name of the function, in this case 'greeting'. Next, we are taking in a argument 'name' which then will be interpolated into our return string. Thus, when we call greeting and passing in a name like 'Tom', we can fairly expect it to return "Hello, Tom!"

Next, let's take a look at function expressions. Functions have similar syntax to function declaration, however something to note is that function expressions are not hoisted. This means we cant call the function expression before we actually declare it. Function expressions can also be declared without a name. This is what is known as a anonymous function. A lot of time you may see function expressions that are anonymous written like this...

let sum = function(num1, num2) {
return num1 + num2
}

sum(1, 2)
// => 3

We can see that we are creating a variable called sum and setting it to an anonymous function that takes in two numbers and then sums them. We then call this function expression by initializing the variable and passing in two numbers.

Setting up OmniAuth 2.0 in rails

Connor Holland — Sun, 18 Apr 2021 17:00:09 +0000

I just finished my rails project for flatiron school. The overall project was fun to do and I learned a ton about rails in a week or so. The hardest part about the project was incorporating a third party authentication to my application. In my case I wanted to sign in through facebook. However, I ran into problems with omniauth saying that I was using an older version. The problem for that was because a newer version of omniauth came out and required additional configuration to get it up and running. The steps to setup third party authentication through Omniauth is by doing the following...

First, we need to add a few gems to our gemfile.

gem "thin", "~> 1.8"
gem "omniauth-facebook", "~> 8.0"
gem "omniauth-rails_csrf_protection", "~> 1.0"

The most important gem here for omniauth to work is that last one. This is because there were some security issues and in order to deal with those, we need to add the csrf_protection gem to our gemfile. Now in my case I am just doing facebook but if you wanted to authenticate through other strategies like github, you would need to add gem "omniauth-github" to the gemfile.

The next step is to tell the Omniauth builder what providers we are using and setup each providers api-key and app-secrets. In the case of facebook, you would find these in the facebook developer page. To set this all up we will need to create a new file called omniauth.rb in our initializers folder. Inside that file we will need to add the following code...

Rails.application.config.middleware.use OmniAuth::Builder do
  provider :facebook, ENV['FACEBOOK_APP_ID'], ENV['FACEBOOK_APP_SECRET']
end

Here all we are doing is telling omniauth builder what providers we are using by supplying each providers app-id-key and app-secret.

Once that is all setup we will now need to create a new route for the callback. In my application this route looks like this...

get "/auth/facebook/callback", to: "omniauth_callbacks#facebook"

Essentially what this is doing is after we sign in with facebook we are redirected to this url which will then call a action called facebook. In my application, I created a new controller called omniauth_callbacks_controller.rb which I implemented the following code.

class OmniauthCallbacksController < ApplicationController

  def facebook
    user = User.find_or_create_by(uid: auth[:uid], provider: auth[:provider])
    if user
      user.password = "facebook_auth"
      session[:user_id] = user.id
      user.save
      redirect_to user_portfolios_path(user)
    end
  end

  def auth
    request.env['omniauth.auth']
  end

end

What all this code is doing is essentially fetching my facebook information when I signed in through facebook and creating a new user in my users table using that information. Something important to note is in order to fetch all that user information we need to create a method called auth. The request.env['omniauth.auth'] is how omniauth fetched all the user information when logging in with facebook under the hood.

If you look at the hash that this method returns you will see that there are some attributes, we need to add to our users table. Thus, I needed to create a new migration to add the provider and the uid to my user table. What the facebook action is doing is its finding or creating a user by the uid that is being passed in and setting the session[:user_id] to the id of the users account matching the uid. Then it is redirecting the user to the main page.

Now in order to actually setup a button that sends us through the authentication process we will need to add a button like this...

<%= button_to "Sign in with Facebook", "/auth/facebook", method: :post, id: "fb-btn" %>

Important things to note about the button. With the newer version of omniauth, for security reasons it no longer uses get requests so in our button we need to explicitly tell it to make a post request which will then allow us to start the authentication process for facebook.

My experience with HTML and Bootstrap 5

Connor Holland — Wed, 24 Mar 2021 22:42:03 +0000

One of my weaker areas in developing web application is by far using html and css to style the web page. In my second milestone project for Flatiron school, I developed a Sinatra web application in which I needed to incorporate html and css to style my web pages and make it look pretty. While building the backend of the application was fairly easy, I definitely felt like I spent most of my time working with the HTML and CSS aspect.

In my application I incorporated Bootstrap 5 to help with styling of some aspects of my app like the buttons and log-in page. At first I was super confused at some of the classes that Bootstrap uses. For example...

<td><form class="edit" action="/stocks/<%= stock.id %>" method="get">
          <input type="submit" class="btn btn-primary" name="" value="Stock Info">
        </form></td>

At first glance I was confused with the class names like "btn btn-primary". But with further investigation the reason for that is to help tell Bootstrap how I want to style a specific element. For example in the snippet above, I am telling Bootstrap to style the input element to look like a blue button called Stock Info. Bootstrap has many classes like this to help provide styling to your project with ease.

You can apply this concept to other elements like creating a flash alert. For example...

  <div class="container-c alert alert-danger" role="alert">
    <%= flash[:notice] %>
  </div>

This code snippet will provide a red looking alert at the top of the page when I get an error message. The reason for the look comes from the class name "alert alert-danger".

The more I used this concept the more natural it felt using Bootstrap to help style with ease.