DEV Community: ronakvsoni

Log in with JWT Authentication in Rails and React

ronakvsoni — Mon, 04 Jan 2021 02:56:07 +0000

What is JWT?

JWT stands for JSON Web Token.

Why JWT?

JWT defines a compact and self-contained way for securely transmitting information between parties as a JSON object. An example of what you can use it for is Authorization.
Today I’m going to go through how to set up a login using JWT with a Ruby on Rails back end and a React front end.

The back end

Application Controller

We’ll need 3 methods here. A secret_key, encode, and decode method.

secret_key

def secret_key
    "anything" #a string of your choosing
end

we’ll be using this inside the encode method

encode

def encode(payload)
    JWT.encode(payload, secret_key, 'HS256')
end

In the encode method, we are passing in a payload. We then encode the payload, the secret key, and we are using the ‘HS256’ algorithm.

decode

def decode(token)
   JWT.decode(token, "anything", true, {algorithm: 'HS256'})[0]
end

The decode method takes in a token. Note that the secret key here is actually the string you used, and NOT the secret_key method. JWT.decode will return an array which is why we have the [0] at the end.

The Login

Routes. Note the post and get requests.

When the user logs in from the front end, we find the user by what ever param you‘re checking for.

What to take note of here is the lines:

payload = {user_id: user.id}
token = encode(payload)

We want our payload to be unique to that user. No user should ever have the same id so it's a safe bet that the payload that will be encoded will be unique.
The token is the result of encoding the payload. We will be sending the user object and this encoded token to the front end.

token_authenticate

The way this will work might make more sense when we get to the front end. But essentially what is happening is when the user refreshes the page, normally they would be logged out. Since we are using JWT we can “stay logged in” on reload of the page.

In the login method, we sent the token to the front end. That token is stored in the browser’s local storage. When the page is refreshed, the front end sends the token from local storage and tries to find the user based on the token that was stored.

token = request.header["Authenticate"]
user = User.find(decode(token)["user_id"])

The token is sent to the back end through headers. (We’ll see this on the front end section). Then we find the user by decoding the token.

Front End

On the front end, when the user first logs in, we send a fetch request to the back end.

If we look back at the login method on the backend, we sent back an object of {token: token, user: user}

So when we get our response, we need to take our token that we received and store it in local storage. To do this we write:

localStorage.setItem("token", data.token)
// remember data is {token: token, user: user}

We also set the user to data.user. In this example code, I’m using Recoil.js. But you could use the useState hook, this.state in a class component, or writing to the Redux store.

the user can log in, receive their token and store it in local storage. If they refresh the page they will still have to log in. That's not what we wanted!

Authenticating the token

So here I have this useEffect hook acting as a componentDidMount lifecycle method living in my App.js component. If the page is refreshed, it will check the local storage for the token. If a token exists, it will send a get request to /login.

get "/login", to: "users#token_authenticate"
#i put my method in the users controller.

But it’s a get request. How do we send data to the backend through a get request?
If you notice, we sent the fetch request with headers.

headers: {"Authenticate": localStorage.token}

In the back end we had

token = request.headers["Authenticate"]

We passed the token through the headers! Pretty Nifty.

So now, the backend checks to find a user based on that decoded token and sends that user object back to the frontend.

The user now essentially stays logged in even if the page refreshes. But also at this point, if the user logs out, he’s still logged in! We’re almost there.

The Logout

Right now the token is still stored in local storage. All we have to do is clear the token when the user logs out.

I have setUser({}) because I am using Routes with some conditional rendering. If the user object is empty, it routes the app to a log in page.

Summary

So the flow of what just happened is,

On a successful log in, the backend will encode a token and find a user and send it to the front end.
The front end stores the token into local storage
If the the page is reloaded, the app will send a request to the back end to authenticate the token stored in local storage. If it is authenticated, it will send back the user object back to the front end.
Logging out will clear the local storage token from the browser.

Creating a Full Stack Application: Ruby on Rails as Backend and React as Frontend

ronakvsoni — Mon, 28 Dec 2020 20:53:08 +0000

Want to put your skills to the test by building out your own application? Here are the steps on how to create and connect to GitHub a Rails API and React app!

Introduction
Overview
Early Steps
Creating the Rails API(Backend) & Connecting to GitHub
Creating the React frontend & Connecting to GitHub
Conclusion
Resources

Introduction

For my latest project, I built a full-stack application with a Rails API backend and a React/Redux frontend. In addition to being my latest project, it is also my last project with the Flatiron School because I have now graduated! I truly enjoy being a full stack developer and plan on building out more side projects; graduating isn’t the end but the beginning for me.
Since I’m planning on working with React for the frontend and Rails API for the backend, I took out my handy-dandy notebook to document what I’m doing. When I tried to write down the steps on how to create the backend and frontend repositories locally and have them be connected on GitHub, I started to mix them up. So to keep track of the steps and for anyone else who needs a reminder, I’m leaving this step-by-step guide here!

Overview

The following guide will be written with deployment in mind. To make an app easier to deploy, it’s better to have the backend and frontend live on two separate repositories (repos) on Github. That being said, though they will live on two separate repos remotely, locally you can have them live in the same folder. Therefore, as you work keep two code editors and terminals open, one to work on for the frontend and one for the backend. This means that you will be pushing your code to both repos.
Tip: Since you will have two terminals open, keep in mind which GitHub repo you will be making your commits to; when I’ve pushed my code sometimes I forget which terminal I’m in so I’ve written commit messages to my backend with my frontend in mind and vice versa (oops! 😅)

Early Steps

Before we create the frontend and backend, let’s create a directory to hold them locally.

Create a new project directory (folder) on your local computer where you want your project to be.

mkdir <new-project-name>

Tip: I suggest using “backend” as the app name since this is in the project directory.

Note: the --database=postgresql creates the database with Postgres

Change to the newly created folder with

cd <app_name>

Run in your terminal:

rm -rf .git
git init

Create a new repository on GitHub by navigating to https://github.com/new
Name and create the repository on GitHub

Tip: I suggest using “app-name-backend” as the repo name; the name you give it here does not need to be the same as what it is locally.

Note: Do NOT Check the “initialize with readme” button.

Go back to your terminal and run the following:

git add .
git commit -m "first commit"
git remote add origin … (your SSH)
git branch -M main
git push -u origin main

Creating the React frontend & Connecting to GitHub

Before we do anything we’ll first need to install the create-react-app on your computer with npm. If you already have it installed you can skip this, however, if you’re not sure you can still run the following command:

npm i -g create-react-app

Fun Fact: The "i" flag means to install and the “-g” means to install globally

If you haven’t changed back to your project directory:

cd ..

Create a new React app with:

create-react-app <app_name>

Tip: I suggest using “frontend” as the app name since this is in the project directory.

Change to the newly created folder with:

cd <app_name>

Run in your terminal:

rm -rf .git
git init

Create a new repository on GitHub by navigating to
https://github.com/new
Name and create the repository on GitHub

Tip: I suggest using “app-name-backend” as the repo name; the name you give it here does not need to be the same as what it is locally.

Note: Do NOT Check the “initialize with readme” button.

Go back to your terminal and run the following:

git add .
git commit -m "first commit"
git remote add origin … (your SSH)
git branch -M main
git push -u origin main

Conclusion

Yay, you’ve created your Rails API and React frontend and connected them to GitHub!

These may be simple steps we do everyday but sometimes you need to be reminded of the basics. Now that you created your project!! Yay!!

Resources

📖 https://kbroman.org/github_tutorial/pages/init.html
📖 https://docs.github.com/en/free-pro-team@latest/github/importing-your-projects-to-github/adding-an-existing-project-to-github-using-the-command-line

React+Redux Code With Redux Thunk Package

ronakvsoni — Thu, 22 Oct 2020 07:56:01 +0000

React + Redux are widely-used and popular technologies for developing the client-side of the web project. Such a bundle allows extending the product’s capabilities by simplifying the development of its features. Of course, that’s nothing ever perfect and these technologies are not an exception. In this article, I will show you how to avoid the challenges when using React +Redux and why you сan use Redux Thunk to streamline the development process.
JavaScript is a language with an asynchronous cycle of events. It means that all the logic is executed in one thread, but the sequence of the executable code is not defined by default. For example.

fetch('https://jsonplaceholder.typicode.com/todos/2').then((resp) => {
   console.log('data is fetched ');
});
console.log('Next statement after fetch');

When executing the code described above, the following actions will happen:

Data request
Message output “Next statement after fetch”
Data fetch
Message output “Data is fetched”

For those who haven’t deal with asynchronous programming before, such a flow of actions may seem weird, as the message “Next statement after fetch” is last in the list and had to be executed in the last turn as well.

This peculiarity also becomes an obstacle, as the events in Redux dispatch synchronously by default. Synchronous execution of the code leads to problems with the app that requires a lot of API requests. The diagram below shows the basic idea of Redux.
This is a linear cyclical flow of executing a certain logic. Such an approach works well and is stable when this refers to executing the linear code on the client. But in most cases, working with JavaScript on the client involves work with the network and solving the queries for receiving or updating certain data.

Each request is an asynchronous code with the callback. For this reason, when the complex client logic is implemented, it may cause some mess in code and, as a result, a number of potential errors.

Of course, it’s not what we want to achieve.

Solution

So how the programmer can simplify his/her life when it comes to the situation described above? They can do it by rendering the parts of the asynchronous logic from the components into the actions.

In such a way, the block “Action” from the diagram turns from the linear code into the set of logic that can contain branching and callbacks. Also, you can call the next actions or the whole cascade of actions if necessary. Fewer words, more actions. Let’s get straight to the examples.

Implementation

This solution is based on the Redux support of the Middleware conception. Middleware in Redux allows conducting the processing or response to the event that was dispatched before the event will get into the reducer and influence the state.

import { applyMiddleware } from "redux";

const store = createStore(
  reducers,
  initialState,
  applyMiddleware(
    middlewareOne,
    middlewareTwo
  )
);

In most cases, middleware is the function that processes the event and renders it to the next middleware or reducer. The functions of the middleware are similar to the chain of functions, each of which dispatches the action to the next function.

You can read more here. This information is enough to understand the main point of the solution described below.

Redux Thunk package

This is a middleware package for Redux that allows to write action creators that return function instead of the action object. In addition, the internal function receives two parameters dispatch and getState.

It allows to conduct a certain logic inside the action creator, analyze the current state and dispatch the action or a number of them. It depends on the logic and you can do it not only linearly but in the callback of some network request as well.

It gives a significant flexibility in building the project logic. Below, you can see how it looks in practice

In Redux

const action = (payload) => {
    return ({
        type: ‘some_action_type’,
        payload,
    });
};

dispatch(actionCreatorFn(payload));

With middleware redux-thunk

const actionCreatorFn = (payload) => (dispatch, getState)  => {
    // some internal logic
    dispatch({
        type: ‘some_action_type’,
        payload,
    });

    // some other internal logic
    if (condition)  {
        dispatch({ type: ‘other_action’ });
    } else {
        dispatch({ type: ‘third_action’ });
    }
};

dispatch(actionCreatorFn(payload));

In such a way, there can be come set of logic inside the action creator with the several dispatched actions. Also, the action can be dispatched in the callback of some data request. If nothing is dispatched, there will be no any error and the state will remain in the current state without any changes.

Advantages of this approach

Unloads the components from the logic
Reduces the need to import the Redux components (Store /
Dispatch) into the components of React or the app’s logic
Simplifies the asynchronous code
Makes the project more simple and comprehensible

Connecting the middleware during the project initialization

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers/index';

// Note: this API requires redux@>=3.1.0
const store = createStore(
  rootReducer,
  applyMiddleware(thunk)
);

Now let’s imagine a real case where we can use the feature described above. For example, it can be the data upload that consists of the chain of the requests of the following structure:Above is the chain of the requests, where the data from the previous request are used as the parameters for executing the next one. In addition, after the execution of the request a branching can occur, where not one but several requests will be executed.

const initCurrentUser = () => (dispatch, getState) => {
 fetch('/user').then((response) => {
   const { currentUserId } = response;
   dispatch({
     type: 'set_current_user_id',
     payload: { currentUserId },
   });
   dispatch(getUserExtendedInfo(currentUserId));
   dispatch(getUserContactsList(currentUserId));
   dispatch(getUserInboxMessages(currentUserId));
 });
};

const getUserContactsList = (userId) => (dispatch, getState) => {
 fetch(`/user/${userId}/contacts`).then((response) => {
   const { contactsList } = response;
   dispatch({
     type: 'set_user_contacts',
     payload: { 
       userId,
       contactsList,
     },
   });
 });
};

const getUserInboxMessages = (userId) => (dispatch, getState) => {
 fetch(`/user/${userId}/inbox`).then((response) => {
   const { inbox } = response;
   dispatch({
     type: 'set_user_inbox',
     payload: {
       userId,
       inbox,
     },
   });
 });
};

const getUserExtendedInfo = (userId) => (dispatch, getState) => {
 fetch(`/user/${userId}/info`).then((response) => {
   const { userInfo } = response;
   dispatch({
     type: 'set_user_info',
     payload: {
       userId,
       userInfo,
     },
   });
   dispatch(getArticleDetails(userInfo.lastArticleId));
 });
};

const getArticleDetails = (articleId) => (dispatch, gestState) => {
 fetch(`/article/${articleId}`).then((response) => {
   const { articleDetails } = response;
   dispatch({
     type: 'set_article_details',
     payload: {
       articleId,
       articleDetails,
     },
   });
   dispatch(getAuthorDetails(articleDetails.authorId));
 });

};

const getAuthorDetails = (authorId) => (dispatch, getState) => {
 fetch(`/author/${authorId}/details`).then((response) => {
   const { authorDetails } = response;
   dispatch({
     type: 'set_author_details',
     payload: {
       authorId,
       authorDetails,
     },
   });
 });
};

dispatch(initCurrentUser());

This code describes the cascade data upload (illustrated in the diagram above). Here you can see the opportunity to despatch the next action creators in the action creator or dispatch the actions that will influence the state and also execute the action dispatch separately in the callback (asynchronously). The technique, described above allows to significantly simplify development.

Redux thunk is a middleware that allows to unload the components from the logic and simplify the asynchronous code. Such approach is not compulsory but useful on the big projects when code complexity becomes a roadblock on your way to success.

Facebook Authentication Login on React App

ronakvsoni — Fri, 09 Oct 2020 19:45:48 +0000

A comprehensive step by step React.js tutorial on adding Facebook login to the React.js application with a fully working example

Nowadays, Facebook login is part of the authentication mechanism beside Google login on web applications or mobile apps. Actually, using the Facebook log in can be done in just the Front-end side because it uses Facebook SDK for Javascript. Luckily, there is a react-facebook-login module that we will use for this React.js FB login

This blog divided into several steps:

Step #1: Set up a Facebook App
Step #2: Install create-react-app and Create React.js App
Step #3: Install and Configure react-facebook-login
Step #4: Display Sign In With Facebook Button and Basic User Profile
Step #5: Run and Test React.js Login App

The following tools, frameworks, and modules are required for this tutorial:

Node.js (with NPM or Yarn)
React.js (min. version 16.8) 3.react-facebook-login 4.Terminal or Node Command Line
IDE or Text Editor (I am using Visual Studio Code)

Before going to the main steps, make sure, you have installed Node.js and can run NPM or Yarn. To check them, type these commands.

node -v
npm -v
yarn -v

Step #1: Set up a Facebook App

To setup, a Facebook App and get an App ID/Secret, go to Facebook Developers Apps https://developers.facebook.com/apps/. Login with your Facebook developer's account or credentials.Click the + Add a New App button or MyApps -> Create App button.Enter the display name (we use MyReactApp name) then click the Create App ID button. Make sure to use the valid name allowed by Facebook Developers.After checking the captcha dialog and click submit button, now, you can see App ID and Secret, write it to your notepad.Click the Settings menu on the left menu then click Basic. Scroll down then click the + Add Platform button then choose the website. Fill site URL with the callback URL for OAuth authentication callback URL, we are using this callback URL http://127.0.0.1:1337/auth/facebook/callback.Click the Save Changes button and now the Facebook apps are ready to use with your React.js application

Step #2: Install create-react-app and Create React.js App

To create a new React.js application, we will use the create-react-app tool. The create-react-app is a tool to create a React.js app from the command line or CLI. So you don’t need to install or configure tools like Webpack or Babel because they are preconfigured and hidden so that you can focus on the code. Type this command to install it.
sudo npm install -g create-react-app
Now, we can create a new React.js app using that tool.
create-react-app react-fblogin

cd ./react-fblogin
Open the project in your IDE or text editor and see the content of package.json.

  "dependencies": {
    ...
    "react": "^16.13.0",
    "react-dom": "^16.13.0",
    "react-scripts": "3.4.0"
  },

That React version is the version that already uses React Hooks as default. Now, src/App.js doesn't use class anymore. For sanitation, run this React app for the first time by type this command.
yarn start

Step #3: Install and Configure react-facebook-login

We will use the React Facebook Login module/library found on the NPMJS with the name react-facebook-login. To install it, type this command.
yarn add react-facebook-login
Because now the Facebook Login force to use HTTPS only, we need to modify this React.js app to run with HTTPS. Open and edit package.json then modify "start" in the "scripts" object.

  "scripts": {
    "start": "HTTPS=true react-scripts start",
    ...
  },

Step #4: Display Sign In With Facebook Button and Basic User Profile

Now, we will display the sign in with the Facebook button and show the basic user profile after login successful. For UI we will use the React Bootstrap module. Type this command to install it.

yarn add react-bootstrap bootstrap
To use Bootstrap CSS from CDN, open and edit public/index.html then add this before the closing of .

    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
      integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
      crossorigin="anonymous"
    />

Next, open and edit src/App.js then replace all React.js codes with this.

import React, { useState } from 'react';
import FacebookLogin from 'react-facebook-login';
import { Card, Image } from 'react-bootstrap';
import './App.css';

function App() {

  const [login, setLogin] = useState(false);
  const [data, setData] = useState({});
  const [picture, setPicture] = useState('');

  const responseFacebook = (response) => {
    console.log(response);
    setData(response);
    setPicture(response.picture.data.url);
    if (response.accessToken) {
      setLogin(true);
    } else {
      setLogin(false);
    }
  }

  return (
    <div class="container">
      <Card style={{ width: '600px' }}>
        <Card.Header>
          { !login && 
            <FacebookLogin
              appId="562118384400275"
              autoLoad={true}
              fields="name,email,picture"
              scope="public_profile,user_friends"
              callback={responseFacebook}
              icon="fa-facebook" />
          }
          { login &&
            <Image src={picture} roundedCircle />
          }
        </Card.Header>
        { login &&
          <Card.Body>
            <Card.Title>{data.name}</Card.Title>
            <Card.Text>
              {data.email}
            </Card.Text>
          </Card.Body>
        }
      </Card>
    </div>
  );
}

export default App;

Step #5: Run and Test React.js Login App

To run this React.js Facebook Login app, simply type this command.
yarn start
The browser will automatically open and you will see this page if there's no Facebook login session.Click the Login with Facebook button then it will be a Facebook login dialog pop up.

-Fill the username and password that use as a Facebook Developers account because in previous Facebook App setup we use development mode. Then click the login button.

-Click the Continue as "your_name" button and it will be back to the previous page with this data.

Thank you for reading!!

Sources

https://www.npmjs.com/package/react-facebook-login
https://www.youtube.com/watch?v=tr0nttQtwZg&feature=emb_title

Attaching Event Handlers to dynamically created JavaScript elements

ronakvsoni — Wed, 30 Sep 2020 14:28:13 +0000

When working with JavaScript, you can sometimes need to create new elements on-the-fly, and from that, you’ll need to do something with that new element. It might be a click, which more often than not will need to execute a function.

The problem with dynamically created elements, is that they aren’t born with the same event handlers as the existing elements. Let’s say we have a list of items that you could click on to toggle/add a class name, when a new element is created and appended to that same list - it won’t work - the event handler attachment is missing. This tutorial is going to cover a pure JavaScript way of dynamically attaching event handlers to newly created elements, so they
merge in seamlessly with your other elements.

Table of contents

Creating some markup
Creating an onclick function
Attaching an onclick function
Dynamically creating elements
Attaching the event dynamically
Practical usage
Keeping functions outside the loop
Demo function

Creating some markup

Let's create some HTML to get started from, I am going to take the list scenario into account here, and create a simple <ul> with some links inside

<ul id="links">
<li class="dynamic-link">List item 1</li>
<li class="dynamic-link">List item 2</li>
<li class="dynamic-link">List item 3</li>
<li class="dynamic-link">List item 4</li>
</ul>

Creating an Onclick function

To create an onclick function is simple,we just our element, and setup a click handler:

var element = document.getElementById('id');
element.onclick = function() {
  // onclick stuff
}

It’s good practice to setup functions separately and then call them like so, especially when dealing with loops:

var element = document.getElementById('id');

function myFunction() {
  // onclick stuff
}

element.onclick = myFunction; // Assigned

Attaching an onclick function

Taking our knowledge from above, we can loop through our HTML and attach the event handler to each <li> tag.

First I’m going to setup querySelector, a native DOM selector, in a jQuery-style way using the dollar symbol:

// querySelector, jQuery style
var $ = function (selector) {
  return document.querySelector(selector);
};

This allows us to do this to target what we need:

$('.className');

Using querySelector, let’s target our #links ID, and then find the list elements inside. We could use $(‘#links li’) but this would require querySelectorAll instead. I’ve then looped through the array of links, attaching the above ‘myFunction’ to each element.

var links = $('#links').getElementsByTagName('li');

// For each <li> inside #links
for (var i = 0; i < links.length; i++) {
  var link = links[i];
  link.onclick = myFunction;
}

That’s great, but let’s add a real function called dynamicEvent:

function dynamicEvent() {
  this.innerHTML = 'Dynamic event success.';
  this.className += ' dynamic-success';
}

// Assign it like so (this will be inside the loop)
link.onclick = dynamicEvent;

So far we’ve attached an onclick event handler to each static item on the page, which is easy. When we click on them now, they will run the dynamicEvent function and the text will change to ‘Dynamic event success.’.

Dynamically creating elements

Now we want to dive deeper and create a new <li> element using JavaScript, with some text inside, and append it to the #link unordered list. This would be easily done like so:

var li = document.createElement('li');
$('#links').appendChild(li);

Nice and easy, I’ve created a new element and appended it to our #links ID - no problem. But there is a problem! Simply appending the new list item will not magically allow me to click on it and run a function, which is often a problem when creating new elements. The link will do nothing, unless we create it and attach an event handler as well. AJAX also has this problem, pulling new information off the server will have no JavaScript readiness attached to it.

Attaching the event dynamically

This is a lot simpler than you think, in our function that will create our new element, we need to attach the event handler, and function we want to assign to it, this can be done like so:

// Create the new element
var li = document.createElement('li');
li.className = 'dynamic-link'; // Class name
li.innerHTML = dynamicValue; // Text inside
$('#links').appendChild(li); // Append it
li.onclick = dynamicEvent; // Attach the event!

All done. But let’s put it into a more practical use. “What can I use it for?” - anything! I ran into this when creating jResize and my browser-based responsive development tool (though I cheated a bit with jQuery so here’s the JavaScript way).

Practical usage

In the demo I've setup, you'll see the existing list of items,give one or two a click and watch the text change and a nice icon appear.Voila! Now, the next step is to create your own element,which I've created a nice script and small form to do exactly that. Simply type a word into the field input, and generate your element. The newly created element will be born with its onclick function attached.

Keeping functions outside the loop

JSLint likes to remind everyone that you shouldn’t create functions inside a loop, in some cases it’s okay to do, but for this tutorial I totally agree. It will save us from writing duplicated markup when running the function on both the static and dynamically created elements (which is why dynamicEvent is created outside the loop and simply called).

Demo function

For anyone interested to see how the demo works, utilizing the steps above, you can have a look through this and the comments:

(function(){

  // querySelector, jQuery style
  var $ = function (selector) {
    return document.querySelector(selector);
  };

  // Create function outside loop
  function dynamicEvent() {
    this.innerHTML = 'Dynamic event success.';
    this.className += ' dynamic-success';
  }

  // Iterate over #links <li>
  // Use querySelector to target #links and then get tag names <li>
  var links = $('#links').getElementsByTagName('li');

  // For each <li> inside #links
  for (var i = 0; i < links.length; i++) {
    var link = links[i];

    // <li> onclick, runAlert function
    link.onclick = dynamicEvent;
  }

  // Onsubmit
  $('.generate').onsubmit = function() {

    // Grab the input value
    var dynamicValue = $('.generate-input').value;

    // If empty value
    if(!dynamicValue) {

      alert('Please enter something.');

    } else {

      // Change the submit value
      $('.generate-submit').value = 'Click your item below!';

      // Create the links with the input value as innerHTML
      var li = document.createElement('li');
      li.className = 'dynamic-link';
      li.innerHTML = dynamicValue;

      // Append it and attach the event (via onclick)
      $('#links').appendChild(li);
      li.onclick = dynamicEvent;
    }

    // Prevent the form submitting
    return false;
  }
})();

Thank you for reading!!!

Building the User Model and Session Controller for the Authentication App

ronakvsoni — Mon, 24 Aug 2020 19:10:58 +0000

Now that our authentication app has been completely configured with our base settings, we can now start building out the authentication feature itself.

Creating the User Model

We’re gonna start by creating a User model. You can use any name for the model that you want, but the traditional approach is to use the name: User. To generate the User model, run the command:
rails g model User email password_digest
This will generate a migration file that looks like this:

class CreateUsers < ActiveRecord::Migration[5.2]
  def change
    create_table :users do |t|
      t.string :email
      t.string :password_digest

      t.timestamps
    end
  end
end

You can see that we have two string columns along with the default timestamps. On a side note, after we connect our User model to Bcrypt, the password_digest will actually represent two columns:

A regular password field
A password confirmation field

Update the database schema by running:
rails db:migrate

From this point, we can customize the actual user model. The first piece of code to add is the has_secure_password method in the app/models/user.rb file.

class User < ApplicationRecord
  has_secure_password
end

This method is going to tell the user model that that password digest field needs to be encrypted.

Let’s also add a validation that ensures that every User has an email value and that every email is unique this will update the file to look like this:

class User < ApplicationRecord
  has_secure_password

  validates_presence_of :email
  validates_uniqueness_of :email
end

Let’s test this out by opening up the Rails Console with the command rails c in the terminal. From there we can run the code:

User.create!(email: "r@dev.com", password: "asdfasdf", password_confirmation: "asdfasdf")

This showcases the magic of the password_digest field and the has_secure_password method. When we define that digest, Rails automatically knows that we want both a password and a password confirmation set of attributes in the user model, and that’s what it did for us. If you look at what gets returned when you run that command in the terminal, the other thing to note is that the password digest is no longer our ASDF that we gave it but instead, it is an encrypted set of strings, and this is tied directly to whatever the secret key is.

The way that encryption works and BCrypt works is it looks at our secret key. The application you generated has a different secret key than the application that I have. The process looks at that secret key, and it uses that as a salt. If you’ve never heard of a salt, it is a tool that an encryption algorithm uses to ensure or to hopefully ensure that the password or whatever it’s encrypting cannot be guessed.

Rails API Sessions Controller

So, now that we have a user model, now we can connect it to a controllers that will manage the data processes related to authentication.

The first step will be to create the route (also called drawing the route). Open your config/routes.rb file and add the following:

Rails.application.routes.draw do
  resources :sessions, only: [:create]
end

Now let’s create the corresponding controller that this route will point to, we can create a file app/controllers/sessions_controller.rb and add the following:

class SessionsController < ApplicationController
  def create
    user = User
            .find_by(email: params["user"]["email"])
            .try(:authenticate, params["user"]["password"])

    if user
      session[:user_id] = user.id
      render template: 'users/show'
    else

    if @user == nil
      flash[:alert] = "Username not found."
    else
      flash[:alert] = "Incorrect password."
       end
      redirect_to home_path
    end
end

Okay, so what’s going on here? If you’ve never built your own authentication, this may look a little weird. But what we’re doing is we’re we’re calling the User model and running a database query.

From there we’re performing a database query where we find the user by the email that is submitted. The params are what the front-end application is going to send.

As a preview from a future guide in this course, the user object that we will send from the React app to the API will look something like this:

{
  "user": {
    "email": "email@example.com",
    "password": "secret"
  }
}

So that is what the params code is doing in the controller, it’s grabbing the paramaters that will be sent from the front end app and it’s parsing them to retrieve the data. If you plan on sending data that is structured differently, you will need to adjust this code to match that structure.

Moving on, what does the try(:authenticate, params["user"]["password"]) code do? Because our user model is using the bcrypt gem, it automatically has access to the authenticate method. And we’re telling the system to check and see if the password that the user supplies matches the encrypted one that is stored in the database. Because all of our passwords are encrypted, we can’t simply run a query such as: User.find_by(email: params["user"]["email"], password: params["user"]["password"]). So the authenticatemethod does that for us.

If you’re an experienced Rails user and you’re curious on why I wanted to use a tool like Bcrypt as opposed to using a Gem like Devise, it’s because there’s actually quite a bit of functionality that Rails and more lightweight tools like Bcrypt provide by default that allows you to build your own authentication.

Continuing to walk through the code, if the system finds a user with the email that was provided, and the password matches, it will store the user object in the user variable. From that point, the method checks to see if the user variable has the database record or it is it nil.

If that conditional passes, we are storing the user’s id in the session with the code:

session[:user_id] = user.id

If your Rails’ session knowledge is a little fuzzy, this code is what stores the user’s ID inside of the encrypted cookie in the browser. This one line of code is the magic that will allow our Rails API to know which user is sending requests, such as forms, or accessing any page in our React application!

From that point, we are rendering show and sending a response back to the client, this will tell the application that the process went through smoothly and that the user has been authenticated. I’m also returning the user object..

So, now that we have the successful scenario taken care of, let’s also check to see what happens when the user was not able to log in successfully. This is a scenario where they may have forgot their email address, password, or they’re trying to hack into the system.

For all of those scenarios, we’re going to render home with an error message that says that the request was unauthorized. This is the universal flash message code that you wanna use if a user is not authenticated.

And with all of that in place, we have a working sessions controller for our Rails App SECURE!

Rails RESTful & CRUD

ronakvsoni — Thu, 13 Aug 2020 19:28:24 +0000

Rails RESTful

Generate function

Rails g model

rails g model tablename column1 column2
Tablename, this needs to be what your model is going to be called.

Rails 6 has plurallize built in so it'll make the model singular but keep the table plural as is best practice. To set them as other data types just state them as other than a string.

All the useful data types, there are more but these will get the job done most of the time.

string
integer
float
timestamp

Rails g controller

rails g controller ControllerslName controller actions
ControllersName needs to reference the model with the following convention

ModelsController
The controller actions are, by default, empty unless you specifiy them. The convention is the following order

index show new edit create update destroy

This will setup those seven routes in routes.rb as well create app/views/model and .html.erb files for each route

routes.rb
after runing rails g controller command like above the routes.rb file will be created with the following boilerplate code

Rails.application.routes.draw do
  get '/models/index'
  get '/models/show'
  get '/models/new'
  get '/models/edit'
  get '/models/create'
  get '/models/update'
  get '/models/destroy'
end

This is fine as is or it can be refactored down to a single line
resources :models.

If you only generate a controller action as needed then the routes and view file will need to be created manually as you go. This may be a better method of going about building out the basic functionality of your web app to be honest as there will be no routes that are unknown to you as the dev.

side note: I didn't follow that pattern of build only what you need as you go, and in the last code challenge I found myself lost quickly.
While troubleshooting I knew there was more in the app than I had full understanding of.
In the future I will build controller actions out 1 at a time as I need the functionality and route.

To take advantage of resources :models with only specific routes (the buils it as you go method) there is a way to have rails only create those routes you need.

resources :models, only: [:index, :show]

you can add to the list within the brackets as you build out your web app.

controller action methods

For every route you need a controller action method. These live in the ./app/controllers/models_controller.rb file. Each model has a controller and they each inherit from application_controller.rb.

This is a great file to place repeated logic in different models, just have the method in the application_controller.rb and all models will have access to the method

index

def index
  @models = Model.all
end

For index the only thing really needed is @models = Model.all as this will provide the logic needed to be able to access all data in the dB table for the model. This is useful as an index web page that lists out everything - table of contents, or all users, or all whatevers.

show

def show
  @model = Model.find(params[:id])
end

This ensures that a show page for any indivdual record in the dB table for the model can be accessed. This line of code is actually used often in other controller action methods and can be moved to a before_action macro (more on that later though).

new

def new
  @model = Model.new
end

Another brief bit of logic that makes sure the page will send a .new command to the dB to kick off the creation of a new record. Additional logic could go here that would pull in more logic for a New page in the browser.

update

def update
end

This is the best place to any logic for creating, editing, or updating a record. Placing validation logic here will ensure that when you create the update view and use form_for that a submit button will change it's wording to match the actual action. This is super cool rails magic as it will first check if the record id exists, if it does then it'll pull in the record data to your form_for form and the submit button will say 'update'. If there is no record then the form_for form will be empty and the submit button will say 'create'. Also if all routes to any of these actions (craete, or update) are set to the same route than rails again will make sure everything works as expected. Basically just user the update route and rails will take care of it.