DEV Community: diiiiana99

Rails API User Authentication in React A detailed tutorial on Rails/React user authentication

diiiiana99 — Mon, 09 May 2022 17:51:58 +0000

API for Rails
Let's begin by establishing the API that will be used to authenticate our users in our react app.

Prerequisites
Please make sure the following are installed on your computer before beginning this portion of the course. This will make it easier for you to follow along without any problems.

Rails >= 6.0 should be installed.
Install PostgreSQL and set it up. Installers for Ubuntu may be found here.
Install your preferred text editor.
Rails new auth-api —api -d=postgresql creates a new Rails app. This script builds a new API Rails app called auth-api with the database Postgresql. Change to the app directory; cd auth-api

Construct a User model.



rails g model User email, password_digest

Now let's create the database and migrate the schema.



Runrails db:create and rails db:migrate

Update Gemfile
Add gem 'bcrypt' and gem 'racks-cors', :require => 'racks/cors'

Install the gems by running bundle install

Set up the session storage.
The user's session will be saved across the app using this file settings.

Create a file called session store.rb in config/initializers.



if Rails.env == "production"
  Rails.application.config.session_store :cookie_store, key: "_authentication_app", domain: "https://link-to-your-production-app.com/"
else
  Rails.application.config.session_store :cookie_store, key: "_authentication_app"
end

Let's set up the CORS middleware (Cross-Origin Resource Sharing).
CORS (Cross-Origin Resource Sharing) is a method that uses extra HTTP headers to instruct browsers to allow a web application operating on one origin to access resources from another origin. When a web application accesses a resource from a domain, protocol, or port other than its own, it makes a cross-origin HTTP request. Find out more here.

Inside config/initializers, create the file cors.rb and paste the code below into it.



Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins "http://localhost:3000"
    resource "*", headers: :any, methods: [:get, :post, :put, :patch, :delete, :options, :head], credentials: true
  end

  allow do
    origins "https://link-to-production-app.com/"
    resource "*", headers: :any, methods: [:get, :post, :put, :patch, :delete, :options, :head], credentials: true
  end
end

Create the sessions controller
rails g controller Sessions

app/controllers/sessions_controller



class SessionsController < ApplicationController
  include CurrentUserConcern

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

    if user
      session[:user_id] = user.id 
      render json: {
        status: :created,
        logged_in: true,
        user: user
      }
    else
      render json: { status: 401 }
    end
  end

  def logged_in
    if @current_user
      render json: {
        logged_in: true,
        user: @current_user
      }
    else
      render json: {
        logged_in: false
      }
    end
  end

  def logout
    reset_session
    render json: { 
      status: 200, 
      logged_out: true 
    }
  end
end

Add the user's current worry.
Create a new file current user concern.rb in the app/controllers/concerns folder and add the following code to it.




module CurrentUserConcern
  extend ActiveSupport::Concern

  included do
    before_action :set_current_user
  end

  def set_current_user
    if session[:user_id]
      @current_user = User.find(session[:user_id])
    end
  end
end

The current user concern variable will be used to identify logged-in app users. We made it a worry so that other controllers could access it. Continue reading.

Editing the User Model
Add the line has secure password to app/models/user.rb. That line is required for bcrypt to encrypt our user passwords.

Add validation to the model as well



class User < ApplicationRecord
  has_secure_password
  validates_presence_of :email, :password
  validates_uniqueness_of :email
end

Update our routes



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

  delete :logout, to: "sessions#logout"
  get :logged_in, to: "sessions#logged_in"

  root to: "static#home"
end

Let's make the registrations controller for new user registration.
Let's provide our new users the chance to register now that our software is operating as planned.

Create the registrations controller.rb file in app/controllers.

Registrations for rails g controller



class RegistrationsController < ApplicationController
  def create 
    user = User.create!(
      email: params["user"]["email"],
      password: params["user"]["password"],
      password_confirmation: params["user"]["password_confirmation"]
    )

    if user 
      session[:user_id] = user.id 
      render json: {
        status: :created,
        user: user
      }
    else
      render json: { status: 500 }
    end
  end
ens

Update the Application controller
Open app/controllers/application_controller.rb and change it to



class ApplicationController < ActionController::Base
  skip_before_action :verify_authenticity_token
end

The line skip before action:verify authenticity token disables the controllers' forgery prevention. This is critical for resolving the ActionController:: Exceptions for InvalidCrossOriginRequest. More information may be found here.

The Rails portion of the application is now complete. Let's perform one more test by creating a user from the console to ensure that our model is functioning properly.

App in Reactjs
It's time to develop the Reactjs app and connect it to our Rails backend now that we've finished configuring the Rails API.

Prerequisites
Before proceeding, make sure you have the following installed and functioning on your computer.

Nodejs. Installers for Ubuntu may be found here.

Make a react app

Run npx create-react-app name-of-app . This creates a new react app with the name chosen.

Run npm start to ensure everything is working properly. If you built your app correctly, you should see this.

Create components
Let's install some packages that we'll use later before we start building our first component.

Run npm install --save react-route react-router react-router-dom axios

React-route will be used to generate our routes, axios will be used to communicate with our Rails API, and react-router and react-router-dom will be used to render the matching Route>.

Open src and make two new folders called components and auth. Create a new file registration and move app.js to components. Add the following code to js in the auth folder.

Open src and make two new folders called components and auth. Create a new file registration and move app.js to components. Add the following code to js in the auth folder:



import React, { Component } from "react";
import axios from "axios";
import { Link } from "react-router-dom";

export default class Registration extends Component {
  constructor(props) {
    super(props);

    this.state = {
      email: "",
      password: "",
      password_confirmation: "",
      registrationErrors: ""
    };
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }

  handleSubmit(event) {
    const {
      email,
      password,
      password_confirmation
    } = this.state;
    axios
      .post(
        "http://localhost:3001/users",
        {
          user: {
            email: email,
            password: password,
            password_confirmation: password_confirmation
          }
        },
        { withCredentials: true }
      )
      .then(response => {
        if (response.data.status === "created") {
          console.log("Registration data", response.data)
        }
      })
      .catch(error => {
        console.log("registration error", error);
      });

    event.preventDefault();
  }

  handleChange(event) {
    this.setState({
      [event.target.name]: event.target.value
    });
  }

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <div className="form-group">
            <input
              className="form-control"
              type="email"
              name="email"
              placeholder="Email"
              required
              value={this.state.email}
              onChange={this.handleChange}
            />
          </div>

          <div className="form-group">
            <input
              className="form-control"
              type="password"
              name="password"
              placeholder="Password"
              required
              value={this.state.password}
              onChange={this.handleChange}
            />
          </div>

          <div className="form-group">
            <input
              className="form-control"
              type="password"
              name="password_confirmation"
              placeholder="Password Confirmation"
              required
              value={this.state.password_confirmation}
              onChange={this.handleChange}
            />
          </div>

          <button type="submit" className="btn btn-primary btn-sm">
            Register
          </button>
          <p>
            Have an account? <Link to="/">Login</Link>
          </p>
        </form>
      </div>
    );
  }
}

To begin, we construct a state object containing the parameters we require from a user in order to register successfully. Only the email, password, and password confirmation parameters are supported by our API.

Our handleSubmit method will use axios to send a POST request to the API when the form is submitted. If the user's credentials are legitimate, a successful login will transport them to the dashboard, and their login status will be updated to logged in.

The login.js component should now be added to the auth subdirectory.



import React, { Component } from "react";
import axios from "axios";

export default class Login extends Component {
  constructor(props) {
    super(props);

    this.state = {
      email: "",
      password: "",
      loginErrors: ""
    };
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }

  handleSubmit(event) {
    const { email, password } = this.state;
    axios
      .post(
        "http://localhost:3001/sessions",
        {
          user: {
            email: email,
            password: password
          }
        },
        { withCredentials: true }
      )
      .then(response => {
        if (response.data.logged_in && response.data.patient) {
          this.props.handleSuccessfulAuth(response.data);
        } else {
          this.props.handleSuccessfulDoctorAuth(response.data);
        }
      })
      .catch(error => {
        console.log("login error", error);
      });

    event.preventDefault();
  }

  handleChange(event) {
    this.setState({
      [event.target.name]: event.target.value
    });
  }

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <div className="form-group">
            <input
              className="form-control"
              type="email"
              name="email"
              placeholder="Email"
              required
              value={this.state.email}
              onChange={this.handleChange}
            />
          </div>
          <div className="form-group">
            <input
              className="form-control"
              type="password"
              name="password"
              placeholder="Password"
              required
              value={this.state.password}
              onChange={this.handleChange}
            />
          </div>
          <button type="submit" className="btn btn-primary btn-sm">
            Login
          </button>
        </form>
      </div>
    );
  }
}

We have our login and registration components ready at this stage. So let's get started.

The Dashboard and Home components
For unauthenticated users, we require a home component, and for authorized users, we need a dashboard component.

A login form and a link to register will be on the main page. After logging in, users are brought to the dashboard, where they can logout.

Add home.js to src/components to build the home component.



import React, { Component } from "react";
import Login from "./auth/Login";
import { Link } from "react-router-dom";

export default class Home extends Component {
  constructor(props) {
    super(props);
    this.handleSuccessfulAuth = this.handleSuccessfulAuth.bind(this);
  }

  handleSuccessfulAuth(data) {
    this.props.handleLogin(data);
    this.props.history.push("/dashboard");
  }

  render() {
    return (
      <div>
        <h1>Home</h1>
        <h1>Status: {this.props.loggedInStatus}</h1>
        <Login
          handleSuccessfulAuth={this.handleSuccessfulAuth}
        />
        <p>
          Don't have an account? <Link to="/registration">Register</Link>
        </p>
      </div>
    );
  }
}

The App component
The App component is the topmost (parent) component.



import React, { Component } from "react";
import { BrowserRouter, Switch, Route } from "react-router-dom";
import Dashboard from "./dashboard";
import Home from "./home";
import axios from "axios";
import "bootstrap/dist/css/bootstrap.min.css";
import Registration from "../auth/Registration";

export default class App extends Component {
  constructor() {
    super();

    this.state = {
      loggedInStatus: "NOT_LOGGED_IN"
    };

    this.handleLogin = this.handleLogin.bind(this);
    this.handleLogout = this.handleLogout.bind(this);
    this.handleSuccessfulAuth = this.handleSuccessfulAuth.bind(this);
  }

  checkLoginStatus() {
    axios
      .get("http://localhost:3001/logged_in", { withCredentials: true })
      .then(response => {
        if (
          response.data.logged_in &&
          this.state.loggedInStatus === "NOT_LOGGED_IN"
        ) {
          this.setState({
            loggedInStatus: "LOGGED_IN"
          });
        } else if (
          !response.data.logged_in &&
          this.state.loggedInStatus === "LOGGED_IN"
        ) {
          this.setState({
            loggedInStatus: "NOT_LOGGED_IN"
          });
        }
      })
      .catch(error => {
        console.log("login error", error);
      });
  }

  handleSuccessfulAuth(data) {
    this.handleLogin(data);
  }

  componentDidMount() {
    this.checkLoginStatus();
  }

  handleLogin(data) {
    this.setState({
      loggedInStatus: "LOGGED_IN"
    });
  }

  handleLogout() {
    this.setState({
      loggedInStatus: "NOT_LOGGED_IN"
    });
  }

  render() {
    return (
      <div className="app">
        <BrowserRouter>
          <Switch>
            <Route
              exact
              path={"/"}
              render={props => (
                <Home
                  {...props}
                  loggedInStatus={this.state.loggedInStatus}
                  handleLogin={this.handleLogin}
                  handleLogout={this.handleLogout}
                />
              )}
            />
            <Route
              exact
              path={"/dashboard"}
              render={props => (
                <Dashboard
                  {...props}
                  loggedInStatus={this.state.loggedInStatus}
                />
              )}
            />
            <Route
              exact
              path={"/registration"}
              render={props => (
                <Registration
                  handleSuccessfulAuth={this.handleSuccessfulAuth}
                  {...props}
                  loggedInStatus={this.state.loggedInStatus}
                />
              )}
            />
          </Switch>
        </BrowserRouter>
      </div>
    );
  }
}

At this stage, we must test our app to check how it functions.

Let's get the servers up and running: reactjs server; npm start This will run the program on port 3000 automatically.

rails s -p 3001 rails server

Home/Login Page
Let's utilize the user credentials we established while we were testing the user model to log in.

Getting Started with React Native for Beginners from a Beginner's Experience

diiiiana99 — Sun, 03 Apr 2022 23:55:23 +0000

React Native is a versatile framework that makes creating mobile apps a breeze. Because of its simplicity, developers have been able to construct a variety of tools, kits, and templates to work with, each with its own unique purpose.

It was simple for me to get started with React Native, and I'll do my best to explain it to you. It will be lot easier for you if you are a Web developer, as I previously stated. Node.js and Node Package Manager (NPM) are required for React Native, as well as Code Editor and Expo.
Is that it? Yes.

Don't worry if you don't understand something; I'm here to assist you.

1) You've installed both Node.js and NPM once you've installed Node.js (Node Package manager). NPM stands for Node Package Manager. As a result, there's no need to download it.
Now is the time to get started with React Native. Open a command window and run the following command to install React Native globally.

*install -g npm create-react-native-app
*

Using NPM, this command installs the React Native package globally(-g). It can be installed in any directory of your choice.
You can also learn more about it by going to React Native setting up the development environment.
It's a straightforward Facebook tutorial for making a react-native app.
After you've installed it, you can use VS Code or any other code editor to write code.

2)React Native's Operation:
For experienced mobile developers, the most unexpected aspect of React Native is that it is truly native.
A Cordova library or a framework built on top of it, such as Ionic, is used by the majority of popular solutions for developing mobile applications using JavaScript. You'll have access to native APIs using Cordova, but the heart of your app will be HTML and JavaScript rendered in a WebView.
While it is possible to achieve the appearance and feel of the native UI in this manner, every Cordova application will suffer from performance issues, which is especially true for graphically intensive apps and the Android platform as a whole. This will result in a poor user experience and dissatisfied customers.

3)Styling:
CSS syntax, which is written in JavaScript objects, is used to finish styling components. React Native employs a subset of Flexbox to build the layout, which is an efficient approach to divide space between components in a container. The style prop is accepted by all of the library's basic components. The style names are camelCased, e.g. marginLeft, which is a notable contrast from CSS on the web. The adoption of a Stylesheet is an excellent strategy. create method, which simplifies the code.

4)Benefits of Using React Native:

The application has a shared codebase thanks to React Native. According to Facebook's Ad Manager software, code repetition is at 87 percent, which is a staggering figure.
Another excellent feature is that you can easily import platform-specific components into the application if your team need one. The Platform module can be used to add specific components to the program by detecting the platform on which it is running.

5)Developer Experience that is Better and Smoother:

From the developer's perspective, one of the biggest arguments for designing a React Native app is that, unlike traditional iOS and Android development, React Native apps can be "instantly" updated without having to rebuild. Error reporting is also pretty good, and Chrome Developer Tools can be used to debug JavaScript code. Furthermore, because JavaScript is transpiled, the developer has access to all of the language's new capabilities, which might increase productivity.

6)Efficiency:

Quick prototyping and a high initial velocity are possible with React Native. Basic functionalities are simple to implement, and they can be expanded with native code and native views if necessary.

Takeaways
React Native is a relatively new technology that has quickly gained popularity. It boosts developer productivity, is scalable, and has the potential to save enterprises time and money.

What is Ruby and Ruby methods that I found challenging?

diiiiana99 — Mon, 14 Mar 2022 14:23:24 +0000

In previous blog postings, I discussed how difficult it was for me to understand and apply the material. Well, in comparison to the others, I'd say this step was the most difficult. This step necessitated a great deal of concentration, repetition, and, most importantly, perseverance. I'm happy to report that I made it through the ordeal and learnt a lot! In this blog, I will be discussing how Ruby methods are structured and implemented, as well as the strategy I followed to better understand them!

Active Record Methods was the subject on which I spent the most time studying. At first, I thought that writing these methods would be simple. It was in certain circumstances! It didn't take me long to figure out simple ways like retrieving an ordered list of instances or finding a single instance by a certain key. When I started learning more advanced techniques, such as identifying the most popular instance of a class or employing helper methods within other methods, I became frustrated. That's when I started having problems.

This strategy was unquestionably difficult to implement appropriately. Figuring out what my end result needs to be and then thinking about all of the various steps/code it might take to get there was one of the most beneficial abilities I utilized to go through this.

The helper method I utilized in the most popular method to help me get to my ultimate result is shown here. Originally, this method was used to determine the number of books written in a given genre. The wonderful thing about some of these simple techniques is that they can help simplify the code for more sophisticated ones. If you look at the first snip, you'll see what I mean. In the first line of code, you can see how this helper method is used. The first line of code is in charge of calculating the total number of books in each genre and returning them as an array in the books total variable.

The total number of books for each genre instance is calculated using my book count function. The second line of code locates the index with the largest books total value and saves it to the idx variable. The final line of code loops through the whole array of genre instances and returns the genre that was discovered and saved in the idx variable.

It's critical to approach these types of approaches line by line, paying great attention to what each line will yield and how that will help you get closer to your desired final result. Solving them became lot easy once I started thinking about each strategy in this way!

How Learning React Improved My Skills in JS.

diiiiana99 — Thu, 24 Feb 2022 22:18:12 +0000

For me, this phase has been a whole journey and a massive learning experience.
There were a lot of topics I wanted to write about...

It was a lot easier to understand and use ReactJS than it was JS. As a beginner developer with a JavaScript experience, it took some time to learn React and start building web apps in a matter of days. It's the V(view part) of the MVC (Model-View-Controller) model, and it's also known as a JavaScript framework. Although, React isn't completely featured, but it benefited me from the open-source JavaScript User Interface(UI) module, which aids in task execution.
The most difficult part for me was figuring out how to locate and render a single review.

At first, it was difficult to construct a dynamic web application with HTML strings since it required extensive coding, but React JS eliminated that problem and made it so much easier which made fall in love with the language. It requires less coding while providing more features which is every developers' dream, let's be honest ;). First thing that I learned that React uses the JSX (JavaScript Extension) syntax, which is a special grammar that allows HTML quotes and HTML tag syntax to render certain subcomponents. It also allows you to create machine-readable codes.

A ReactJS web application consists of several components, each with its own logic and controls which was the part I liked the most and took the longest to have that "aha" moment. These components are in charge of producing a short, reusable piece of HTML code that you may use anywhere you need it. As I progressed and moved forward, it clicked to me that reusable code makes it easy to develop and maintain my apps. These Components can be stacked with one other to create sophisticated applications from simple building blocks. Moreover, I figured that in order to populate data in the HTML DOM, ReactJS uses a virtual DOM-based technique which was very interesting to learn. The virtual DOM is quick because it simply modifies individual DOM elements rather than reloading the entire DOM every time:

Lastly, as I understood, the majority of web developers are now using ReactJS because of its benefits that make our tasks easier to divide to its own thing but also connect them with functionalities and UI engagement because it comes with a large JavaScript library. Web developers like ourselves have more freedom with the JavaScript library since we can use it in whatever way we wish. In addition, testing ReactJS applications is a breeze. It provides a platform for developers to test and debug their programs using native tools. At the end,I was very happy that I was able to tackle the fundamentals of React and even more eager to dive in deeper to create awesome projects.

A Job In Tech That Requires No Coding Skills.

diiiiana99 — Sun, 30 Jan 2022 23:03:40 +0000

What Is Software Project Management and How Does It Work?

The planning, scheduling, resource allocation, execution, tracking, and delivery of software and web projects are all part of software project management.

Software engineering project management differs from typical project management in that software projects have a specific life cycle process that necessitates numerous rounds of testing, updating, and user input. To keep up with the increasing pace of business and iterate depending on customer and stakeholder feedback, most IT-related projects are handled in an Agile manner.

Software Project Management Benefits:

It aids in software development planning.
Software development is made simple to implement.

Software project management includes issues such as monitoring and regulating.

Overall, it reduces the amount of time and money spent on software development.

I personally believe that PM positions are the crucial part of every management team. They bring developers, creatives, QAs, product developers together and manage the final product for UX.