DEV Community: Chukwuemeka Abuba

An Introduction to React Router - A Beginner’s Guide

Chukwuemeka Abuba — Sat, 24 Aug 2024 09:08:22 +0000

Introducing React Router

React router is one of React's important libraries for creating amazing UI. It allows users to navigate between web pages without reloading the page or interacting with the server. Since React framework doesn’t come with an inbuilt routing feature, react router is the solution and most used.

In traditional websites that are not single-page applications, when we click on a link on the website, it sends a request to a server for a brand new HTML page. React works with SPAs (single-page applications), that handle all of the browser's routing on the frontend and don't send any additional requests to the server for a new page.

In this tutorial, we will learn the following:

About React router
How to install React router
Using React router in routing between pages.

Prerequisites

To be able to install and use React router, the reader should have the following:

Node installed on their local development machine
Knowledge of using React
A basic knowledge of HTML, CSS, JavaScript

It is assumed that the reader has basic knowledge of using React and can create components.

There are four important tags needed to create a basic React router in our React application: BrowserRouter, Routes, Route, and Link.

BrowserRouter: It's a component that wraps our entire application and allows us to use the routes within it.
Routes and Route: These are the modules that allows us to set up routes.
Link/NavLink: We use this to create links between pages.

We will learn about implementing the React router in our application by creating a simple React application. Go to your preferred CMD and code editor terminal to create a React application router-tutorial.

npx create-react-app router-tutorial

The command will create a React application called router-tutorial. Then switch to in the app directory, using cd router-tutorial in your code editor and run the command bellow:

npm start

Getting Started

For this tutorial, we will be using three components: Home, About, and User. Within the src folder, we will create a folder called pages and add the files; Home, About, and User to it. For this example, I will use version 6.4.

To install React router, go to your code editor terminal, and in the root directory of your project, type:

npm install react-router-dom@6.4

Now that our router package is installed, we can start setting it up and adding a few different routes.

Next, we will install our BrowserRouter module inside our root component and wrap our entire application inside the BrowserRouter component, and inside this component, we will set up our different routes by specifying which component should be rendered for each route.

App.js :

import { BrowserRouter } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        Router Tutorial 
      </div>
    </BrowserRouter>
  );
}

export default App

Inside the div tag is where all our content is rendered when we go to a specific route. Routes are a parent component for multiple different route components. We also import Routes, Route, and Link packages into our root component.

App.js :

Next, we create and render different route inside our routes component. We set up a route component for every route in our application. since we have three routes: Home, About and User route. We also import those route to our root component so they can be rendered.

We will create a folder in our src folder with names as pages and create three files: Home.js, About.js, and User.js inside it. Then go to our root component and import the Home, About and User components into our root component.

App.js :

import { BrowserRouter, Routes, Route} from "react-router-dom";

//Pages
import Home from "./pages/Home";
import About from "./pages/About";
import User from "./pages/User";

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="about" element={<About />} />
          <Route path="User" element={<User />} />
        </Routes>
      </div>
    </BrowserRouter>
  );
}

export default App

Each route comes with two props which are, path and element. For example, the path in the route component means that if we specify /about, when we go to or click /about in our web-page, it matches with the about component and show an element. The element we want to show is the About page. The path for the home page is usually set as / or index. in this tutorial we will use backslash /.

Home.js :

import React from 'react'

function Home() {
  return (
    <div>
        <div className='home'>
            <h2>Welcome</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.               
            Qui officiis in, molestias expedita vero pariatur,
            obcaecati, sit consequatur voluptas blanditiis laboriosam       
            velit voluptatem! Magnam corrupti, eos expedita earum
            ratione fugit. Ratione quaerat nam nulla? Vitae doloremque         
            tenetur, laboriosam distinctio, modi animi similique nam,
            totam neque quas obcaecati. Tempora voluptatibus id corporis                             
            dolorum? Cupiditate porro modi cum praesentium?</p>

            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
            Qui officiis in, molestias expedita vero pariatur,
            obcaecati, sit consequatur voluptas blanditiis laboriosam             
            velit voluptatem! Magnam corrupti, eos expedita earum
            ratione fugit. Ratione quaerat nam nulla? Vitae doloremque 
            tenetur, laboriosam distinctio, modi animi similique nam,
            totam neque quas obcaecati. Tempora voluptatibus id corporis         
            dolorum? Cupiditate porro modi cum praesentium?</p>

            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
            Qui officiis in, molestias expedita vero pariatur,
            obcaecati, sit consequatur voluptas blanditiis laboriosam 
            velit voluptatem! Magnam corrupti, eos expedita earum
            ratione fugit. Ratione quaerat nam nulla? Vitae doloremque 
            tenetur, laboriosam distinctio, modi animi similique nam,
            totam neque quas obcaecati. Tempora voluptatibus id corporis 
            dolorum? Cupiditate porro modi cum praesentium?</p>
        </div>
    </div>
  )
}

export default Home

About.js :

import React from 'react'

function About() {
  return (
    <div>
        <div className='about'>
            <h2>Welcome</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.               
            Qui officiis in, molestias expedita vero pariatur,
            obcaecati, sit consequatur voluptas blanditiis laboriosam       
            velit voluptatem! Magnam corrupti, eos expedita earum
            ratione fugit. Ratione quaerat nam nulla? Vitae doloremque         
            tenetur, laboriosam distinctio, modi animi similique nam,
            totam neque quas obcaecati. Tempora voluptatibus id corporis                             
            dolorum? Cupiditate porro modi cum praesentium?</p>

            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
            Qui officiis in, molestias expedita vero pariatur,
            obcaecati, sit consequatur voluptas blanditiis laboriosam             
            velit voluptatem! Magnam corrupti, eos expedita earum
            ratione fugit. Ratione quaerat nam nulla? Vitae doloremque 
            tenetur, laboriosam distinctio, modi animi similique nam,
            totam neque quas obcaecati. Tempora voluptatibus id corporis         
            dolorum? Cupiditate porro modi cum praesentium?</p>

            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
            Qui officiis in, molestias expedita vero pariatur,
            obcaecati, sit consequatur voluptas blanditiis laboriosam 
            velit voluptatem! Magnam corrupti, eos expedita earum
            ratione fugit. Ratione quaerat nam nulla? Vitae doloremque 
            tenetur, laboriosam distinctio, modi animi similique nam,
            totam neque quas obcaecati. Tempora voluptatibus id corporis 
            dolorum? Cupiditate porro modi cum praesentium?</p>
        </div>
    </div>
  )
}

export default About

User.js :

import React from 'react'

function About() {
  return (
    <div>
        <div className='about'>
            <h2>Welcome</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.               
            Qui officiis in, molestias expedita vero pariatur,
            obcaecati, sit consequatur voluptas blanditiis laboriosam       
            velit voluptatem! Magnam corrupti, eos expedita earum
            ratione fugit. Ratione quaerat nam nulla? Vitae doloremque         
            tenetur, laboriosam distinctio, modi animi similique nam,
            totam neque quas obcaecati. Tempora voluptatibus id corporis                             
            dolorum? Cupiditate porro modi cum praesentium?</p>

            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
            Qui officiis in, molestias expedita vero pariatur,
            obcaecati, sit consequatur voluptas blanditiis laboriosam             
            velit voluptatem! Magnam corrupti, eos expedita earum
            ratione fugit. Ratione quaerat nam nulla? Vitae doloremque 
            tenetur, laboriosam distinctio, modi animi similique nam,
            totam neque quas obcaecati. Tempora voluptatibus id corporis         
            dolorum? Cupiditate porro modi cum praesentium?</p>

            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
            Qui officiis in, molestias expedita vero pariatur,
            obcaecati, sit consequatur voluptas blanditiis laboriosam 
            velit voluptatem! Magnam corrupti, eos expedita earum
            ratione fugit. Ratione quaerat nam nulla? Vitae doloremque 
            tenetur, laboriosam distinctio, modi animi similique nam,
            totam neque quas obcaecati. Tempora voluptatibus id corporis 
            dolorum? Cupiditate porro modi cum praesentium?</p>
        </div>
    </div>
  )
}

export default About

We will now introduce Link or the NavLink that we talked about earliar in this tutorial. If the Link is clicked on, it will look at the route and access the path, if the link matches the element route, it shows that page. We will be using Link instaed of NavLink for this tutorial.

App.js :

import { BrowserRouter, Routes, Route, Link} from "react-router-dom";

//Pages
import Home from "./pages/Home";
import About from "./pages/About";
import User from "./pages/User";

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <header>
          <nav className="nav-flex">
            <Link to='/'>Home</Link>
            <Link to='about'>About</Link>
            <Link to='user'>User</Link>
          </nav>
        </header>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="about" element={<About />} />
          <Route path="User" element={<User />} />
        </Routes>
      </div>
    </BrowserRouter>
  );
}

export default App

If you have been following the tutorial till now, if you run npm start in your code editor terminal, the image bellow will be dispalyed on your browser. You can now move between Home, About, and User routes.

Conclusion

I hope you have been able to create your first React router application. This tutorial only covers the basic use of React router. If you wish to learn more exciting features about the React router library, you can check out `Net Ninja React router course on youtube.

A basic Introduction to Javascript

Chukwuemeka Abuba — Fri, 23 Aug 2024 20:54:48 +0000

JavaScript was introduced in 1995 to add programs to web pages in the Netscape Navigator browser. The language has since been adopted by all other major graphical web browsers. It has made modern web applications possible, with which you can interact directly without doing a page reload for every action. JavaScript is also used in more traditional websites to provide various forms of interactivity and cleverness.

What is Javascript

Javascript is a cross-platform, object-oriented scripting language used to make webpages interactive (e.g., habing complex animations, clickable buttons etc). There are also more advanced server-side versions of javascript such as Node js, which allows you to add more functionality to a website than downloading files.

JavaScript is one of the most popular languages which includes numerous features when it comes to web development. It’s amongst the top programming languages as per Github and we must know the features of JavaScript properly to understand what it is capable of.

Features of Javascript

1.Light Weight Scripting language

2.Dynamic Typing

3.Object-oriented programming support

4.Functional Style

5.Platform Independent

6.Prototype-based

Let’s see all these features in detail so you can understand them starting from the first to the last

1. Light Weight Scripting Language

JavaScript is a lightweight scripting language because it is made for data handling in the browser only. Since it is not a general-purpose language it has a limited set of libraries. Also as it is only meant for client-side execution and that too for web applications, hence the lightweight nature of JavaScript is a great feature.

2. Dynamic Typing

JavaScript supports dynamic typing which means types of the variable are defined based on the stored value. For example, if you declare a variable x then you can store either a string or a Number type value or an array or an object. This is known as dynamic typing.

3. Object-Oriented Programming Support

Starting from ES6, the concept of class and OOPs has been more refined. Also, in JavaScript, two important principles with OOP in JavaScript are Object Creation patterns (Encapsulation) and Code Reuse patterns (Inheritance). Although JavaScript developers rarely use this feature but is there for everyone to explore.

3. Functional Style

This implies that JavaScript uses a functional approach, even objects are created from the constructor functions and each constructor function represents a unique object-type. Also, functions in JavaScript can be used as objects and can be passed to other functions too.

4. Platform Independent

This implies that JavaScript is platform-independent or we can say it is portable; which simply means that you can simply write the script once and run it anywhere and anytime. In general, you can write your JavaScript applications and run them on any platform or any browser without affecting the output of the Script.

5. Prototype-based Language

JavaScript is a prototype-based scripting Language. This means JavaScript uses prototypes instead of classes or inheritance. In languages like Java, we create a class and then we create objects for those classes. But in JavaScript, we define an object prototype and then more objects can be created using this object prototype.

7. Interpreted Language

JavaScript is an interpreted language which means the script written inside javascript is processed line by line. These Scripts are interpreted by JavaScript interpreter which is a built-in component of the Web browser. But these days many JavaScript engines in browsers like the V8 engine in Chrome use just-in-time compilation for JavaScript code.

8. Async Processing

JavaScript supports Promise which enables asynchronous requests wherein a request is initiated and JavaScript doesn’t have to wait for the response, which at times blocks the request processing. Also starting from ES8, Async functions are also supported in JavaScript, these functions don’t execute one by one, rather they are processed parallelly which has a positive effect on the processing time, reducing it to a great extent.

It is worth noting the core differences between Java and JavaScript.

Javascript and Java are similar in some ways but fundamentally different in some others.

Javascript is a free-form language compared to Java. You do not have to declare all variables, classes, and methods. Yo do not have to be concerned with whether methods are public, private, or protected, and you do not have to implement interfaces while Java is a class-based programming language designed for fast execution and type safety meaning that you can’t cast a java integer into an object reference or access private memory by corrupting the java bytecode.

ES6 Features in Javascript with Examples

Es6(ECMAScript 2015) is a major update to javascript that includes a whole lot of new features with a focus on simplicity and readability.7

Let’s find out about these new features and when and how to use it

1. The let and const keyword
Before the introduction of Es6, the var keyword was the only way to declare variables in JavaScript. With the const keyword, you can declare a variable as a constant and as a constant, it will be read-only.

Copy code
// Using let
let age = 25; 
console.log(age); // Output: 25

age = 26; 
console.log(age); // Output: 26

// Using const
const birthYear = 1998; 
console.log(birthYear); // Output: 1998

2. Arrow function

Here we use => instead of the function keyword. The arrow function makes our code more readable, clean and shorter.

// Traditional function
function add(a, b) {
  return a + b;
}

// Arrow function equivalent
const add = (a, b) => a + b;

// Usage
console.log(add(3, 5)); // Output: 8

3. Objects

Objects are simply collections of properties which are made up of key, value pairs.

// Define an object to represent a person
const person = {
    firstName: "John",
    lastName: "Doe",
    age: 30,
    job: "Software Engineer",
    hobbies: ["Reading", "Coding", "Hiking"],
};

4. Classes

The class keyword is used to formalize the pattern of simulating class-like inheritance hierarchies using functions and prototypes.

// Define a class called "Person"
class Person {
  // Constructor method to initialize an object
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

5. Promises

This simply makes asynchronous calls easy and effortless.

// Function that returns a promise
function fetchData() {
  return new Promise((resolve, reject) => {
    const success = true; // Simulate a successful operation

    setTimeout(() => {
      if (success) {
        resolve("Data fetched successfully!");
      } else {
        reject("Error fetching data.");
      }
    }, 2000); // Simulate an async operation with a 2-second delay
  });
}

6. Template Literals

Template literals simply means having variables in a string.

// Variables
const name = "Alice";
const age = 30;
const job = "developer";
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vyije2al75w3el97yrvv.png)

// Using Template Literals
const introduction = `Hello, my name is ${name}. I am ${age} years old, and I work as a ${job}.`;

console.log(introduction);

Thanks for reading, and always know that I’m rooting for you!!!!

Securing Your Node.js App: A Deep Dive into Effective Authentication Techniques

Chukwuemeka Abuba — Thu, 22 Aug 2024 15:31:43 +0000

Authentication plays a pivotal role in the security of modern web applications, ensuring a safe and personalized user experience. It involves the verification of user identities and permissions, safeguarding sensitive data and resources from unauthorized access. In this post, we will explore the significance of authentication, and its benefits to users, and discuss various authentication techniques. We will then delve into setting up different types of authentication using Node.js, my favourite framework known for its performance and flexibility.

Prerequisites

To follow through in this article, a basic understanding of the following is required:

NodeJS
ExpressJS
Command Line
Postman

What is Authentication?

Authentication is the process of verifying the identity of a user to determine if they are authorized to access specific resources. It involves asking the user "Who are you" and validating their credentials. For instance, during a login attempt, the user's input on the client side is compared with the stored data on the server side. If the information matches, the user is successfully authenticated and allowed access.

Analogous to the Cinderella story, where the prince used a shoe fitting test to authenticate the rightful owner, authentication serves to confirm and validate the user's identity.

Authentication Techniques

Local or Basic Authentication: The simplest form, where users provide a username and password, and access is granted if the credentials match those stored in the database.
Authentication by OTP: Also known as password-free authentication, this method sends a one-time password (OTP) to the user's device. The user is authenticated if the entered OTP matches the one on the server side.
Single Sign-On (SSO): This technique allows users to access multiple applications with just one sign-in. An example is using one account to access both Gmail and Gdrive.
Open Authorization (OAuth): Involves using existing login credentials from various platforms like Google, Twitter, Facebook, or Github for authentication, without requiring additional security measures.
Two-Factor/Multi-Factor Authentication (2FA/MFA): An extra layer of security is added, requiring additional checks before successful authentication, such as sending an OTP to the user's device or a token to their email address.

Now you’ve understood the different authentication techniques, let’s discuss how to implement the various types.

Session or Cookie-based Authentication:

How it works:

Upon receiving a login request from a client, the server verifies the provided credentials and proceeds to generate a session.
The session data is temporarily held in the server's memory and assigned a unique session ID.
The client stores the received session ID within a cookie for future reference.
Subsequent client requests include the current session ID from the cookie to maintain the session's continuity.
When the user initiates a logout, the server clears both the session ID stored in the cookie and removes the associated session data from the server. As a result, the same session ID cannot be reused.

Run the command below in your terminal to set up a session or cookie-based authentication:

npm install express express-session

By running the aforementioned command, the necessary modules and dependencies will be installed, enabling the implementation of session or cookie-based authentication. Below is a code snippet to assist you in this process:

Create an app.js file inside the project directory and paste the code below:

app.js:

const express = require('express');
const session = require('express-session');

const app = express();
app.use(session({
  secret: 'your-secret-key',
  resave: false,
  saveUninitialized: false
}));

// Function to generate a session id
function generateSessionId() {
  return Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
}

// Middleware to check if the user is logged in
function checkLoggedIn(req, res, next) {
  if (req.session.userId) {
    next();
  } else {
    res.status(401).send('Unauthorized: Please log in.');
  }
}
// Login route
app.post('/login', (req, res) => 
  req.session.userId = generateSessionId();
  res.send('Login successful');
});

app.get('/authenticatedRoute', checkLoggedIn, (req, res) => {
    res.send('Authenticated Route!');
});

// Logout route
app.post('/logout', (req, res) => {
  req.session.destroy(err => {
    if (err) {
      res.status(500).send('Error logging out.');
    } else {
      res.clearCookie('connect.sid');
      res.send('Logout successful');
    }
  });
});

// Start the server
const port = 8000;
app.listen(port, () => {
  console.log(`Server running on port ${port}`);
});

Explanation:

When a user initiates a login request through the /login route, a fresh session is established, and a unique userId is generated randomly. This userId is then stored within the session. Access to the /authenticatedRoute route is safeguarded by the checkLoggedIn middleware, which permits only authenticated users (those possessing a valid userId within their session) to proceed.

Whenever the user decides to log out using the /logout route, their session is terminated, and the associated session ID cookie is cleared. Before running the server with the provided code, ensure you have installed the necessary dependencies. You can then start the server by running node app.js.

Token-Based Authentication:

How it works:

Users submit their credentials(username and password) which are encoded into a string using the base64 algorithm.
The encoded string is set in the Authorization header and is sent along with each HTTP Request.

To set up token-based authentication, run the command below in your terminal:

npm install express body-parser jsonwebtoken

By running the aforementioned command, the necessary modules and dependencies will be installed, enabling the implementation of token-based authentication. Below is a code snippet to assist you in this process:

Create an app.js file inside the project directory and paste the code below:

app.js:


const express = require('express');
const bodyParser = require('body-parser');
const jwt = require('jsonwebtoken');

const app = express();
const secretKey = 'your-secret-key'; 

const users = [
  { username: 'user1', password: 'hashedPassword1' }, 
  { username: 'user2', password: 'hashedPassword2' },
];

function generateToken(username) {
  return jwt.sign({ username }, secretKey, { expiresIn: '1h' }); 
}

function authenticateToken(req, res, next) {
  const authHeader = req.headers['authorization'];
  const token = authHeader && authHeader.split(' ')[1];

  if (!token) {
    return res.sendStatus(401);
  }

  jwt.verify(token, secretKey, (err, decoded) => {
    if (err) {
      return res.sendStatus(403);
    }

    req.user = decoded;
    next();
  });
}

app.use(bodyParser.json());

app.post('/login', (req, res) => {
  const { username, password } = req.body;
  const user = users.find((user) => user.username === username && user.password === password);

  if (!user) {
    return res.sendStatus(401);
  }

  const token = generateToken(username);
  res.json({ token });
});

app.get('/protected', authenticateToken, (req, res) => {
  res.json({ message: 'Protected Resource Accessed', user: req.user });
});

const port = 3000;
app.listen(port, () => {
  console.log(`Server running on port ${port}`);
});

Explanation:

The generateTokenfunction generates a JWT with a 1-hour expiration time based on the provided username. In addition, the authenticateToken middleware uses jwt.verify to validate the token found in the Authorization header.

Upon successful validation, the decoded username is added to the request object (req.user), allowing the middleware to proceed with the request. The /login route remains responsible for user authentication and returns a JWT upon successful login. The /protected route remains protected by the authenticateToken middleware, granting access to the protected resource only when a valid JWT is provided.

Passwordless Authentication:

Passwordless authentication involves sending a magic link to the user's email address instead of traditional credentials.

How it works:

The user provides their email address during the registration process. After that, a unique magic link generated by the server is generated. The magic link is associated with the user’s account.
The magic link is sent to the user's email address. The email usually includes a call-to-action button or URL that the user can click.
When the user clicks the magic link, they are redirected to the application or website.
If the magic link is valid and not expired, the user is considered authenticated and granted access to the website or resource.

Note:

Magic links are one-time-use tokens, which means they are valid for a single authentication session. This means that once the user clicks the magic link and successfully authenticates, the link becomes invalid, thereby enhancing security.
To setup passwordless authentication, run the command below in your terminal:

npm install express body-parser nodemailer

By running the aforementioned command, the necessary modules and dependencies will be installed, enabling the implementation of passwordless authentication. Below is a code snippet to assist you in this process:

Create an app.js file inside the project directory and paste the code below:

app.js:

const express = require('express');
const bodyParser = require('body-parser');
const nodemailer = require('nodemailer');

const app = express();
const PORT = 3000;

// In a real application, use a proper database for user accounts.
const users = [
  { id: 1, email: 'user1@example.com' },
  { id: 2, email: 'user2@example.com' },
];

// Generate a magic link for the user
function generateToken() {
  return Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
}

// Send the magic link to the user's email
async function sendMagicLink(email, token) {
  try {

    const transporter = nodemailer.createTransport({
      host: 'smtp.example.com',
      port: 587,
      secure: false,
      auth: {
        user: 'your-email@example.com',
        pass: 'your-email-password',
      },
    });

    const message = {
      from: 'your-email@example.com',
      to: email,
      subject: 'Magic Link for Authentication',
      text: `Click the following link to log in: http://localhost:${PORT}/auth/${token}`,
    };

    await transporter.sendMail(message);
  } catch (error) {
    console.error('Error sending email:', error);
  }
}

app.use(bodyParser.json());

// Initialization of passwordless authentication
app.post('/login', (req, res) => {
  const { email } = req.body;
  const user = users.find((u) => u.email === email);

  if (!user) {
    return res.status(404).json({ error: 'User not found.' });
  }

  const token = generateToken();

  sendMagicLink(email, token);
  res.json({ message: 'Magic link sent to your email. Check your inbox.' });
});

// Authentication route using the magic link
app.get('/auth/:token', (req, res) => {
  const { token } = req.params;
  res.json({ message: 'Authentication successful. You are now logged in.' });
});

app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

Explanation:

The code utilizes Express and Nodemailer for passwordless authentication. It stores sample user data in the user's array. The generateToken function creates a random token for users, while sendMagicLink simulates sending the magic link via Nodemailer (in a real app, configure a proper email transporter).

The /login route initiates passwordless authentication, generating a token based on the provided email and saving it for verification. The /auth/:token route simulates authentication using the magic link.

Importance of Authentication

Security: Authentication ensures that only authorized users can access sensitive data, preventing unauthorized external access.
Privacy: It helps maintain data privacy and protects against external intrusion.
User experience: Authentication enhances user experience by providing personalized services, such as displaying account history and personal information.

Conclusion

In conclusion, authentication is crucial in verifying user identities, ensuring data security, and providing a better user experience. Different techniques can be employed based on the desired level of security and user convenience.

Write to you again soon...

Master the Essentials of Git and GitHub in Just 20 Minutes

Chukwuemeka Abuba — Thu, 22 Aug 2024 03:21:29 +0000

What is Version Control?

Version Control, also known as source control, is the practice of tracking and managing changes to files. Version control systems are systems that record changes to a file over time so that you can record versions of it later. Some of the popular version control systems is Git which is a popular control system/software.

Now, let’s move to git…

What is git?

Git is a version-control system that is used to track changes in computer files. Git is used for tracking code changes, Tracking who made changes, and Coding Collaborations. To get started with git, you need to first go to the and download and install the software.

Okay, now let’s move to GitHub

What is GitHub?

GitHub is a code hosting platform for version control and collaboration. It lets you and others work together on projects from anywhere. For you to use GitHub, you need to go to and sign up for an account

Getting interesting right? Now, let’s move to the main business of the day

Git Work Flow

4 fundamentals of git workflow

Working Directory
Staging Area
Local Repository
Remote Repository

Now, there are three states in the file in your working directory:

It can be staged: This simply means that any updates made on your files can be staged and ready to be committed.
It can be modified: Here, we are simply saying that those changes made on the files have not yet being stored on the local repository( repo in short form).
It can be committed: Those changes you made to your files can be stored in the local repository.

I hope it is getting more interesting. Don’t worry, there is still time remaining. Let’s keep learning!

Now let’s learn the basic git commands

$ git init

This will make git to be aware of the folder.

$ git status

This will show the status of the files that are to be staged or modified.

$ git add

This will add a file that is in the working directory to the staging area.

$ git commit

What this does is to keep track of our code base. It is basically used to add all files that are staged to the local repository.

$ git push

This is used to push our code from our local machine to GitHub. Here, all the committed files in the local repository are moved to the remote repository.

$ git fetch

This is used to get files from the remote repository to the local repository.

$ git merge

This is used to get files from the local repository into the working directory.

$ git pull

This is used to get files from the remote repository into the working directory. It does the joint work of git fetch and git merge. So instead of doing git fetch and git merge, you can simply just do a git pull.

Now, let’s not make this too boring. Let’s create your first repo together with just these few steps

Step 1: Create a git hub account

Simply click on this link and create one. If you already have one, move to step two genie.

Step 2: Check if git is installed on your computer

To do this, type the following commands:

$ git -- version

If you have git already, it will show you the version you have installed.

Step 3: Set up your identity

Set your username and email address. This information is very important because whenever you make a Commit, git uses your identity (username and password) and it's immutably baked into the commits you start creating. To achieve this, you type the following commands.

$ git config –global user.name “Rose Abuba”
$ git config –global user. Email “roseabuba@outlook.com
$ git config --global –list # to check the data provided

Step 4: Create a repo

Create a new repository on GitHub. Move to your GitHub account and create a new repo by clicking on the new button and selecting Create Repository (you can name your repo anything you wish). After doing this, you will see a list of options for pushing a new repository or an already existing repository.

Step 5: Create a folder and file

Now, create a file and open it with any code editor of your choice. Then open your terminal. To create a file on your terminal, type the commands below.

$ touch Index.html

Step 6: Initialize git

You do this by typing the commands below

$ git init

Step 7: Staging of files for Commit

Type the following commands:

$ git add .

This adds all the files in the local repository and stages them for commit

$ git add Index.html

To add a specific file Before we commit our files, let’s check the status of our files

$ git status

Step 7: Commit changes to your git Repository

$ git commit -m "First Commit"

Add a remote origin and Push

To update the changes you have made to the main branch because it won’t be automatically updated on Git hub. All those changes are in the local Repository.

$ git remote add origin remote_repository_URL

To list connections with other repositories, type the following commands:

$ git remote -v

This will list the URLS of the remote connections you have with other repositories

Step 9: Push Changes made from your local repository to the remote repository.

Type the following command:

$ git push -u origin main #pushes changes to origin

The next thing is to refresh. If you followed the above steps, you will see that your codes have been successfully pushed to GitHub.

HI Genie! If you followed up this far, You are one step to Collaboration! People can now view your code online. All you need to do is to share your repo link and you are good to go!

Note that each time you make changes on your local repository and you want it to reflect on your Github, These following commands are the most common command flow used.

$ git add .
$ git status
$ git commit -m "Second Commit"
$ git push -u origin main

In case you want to work with other people’s repositories on Github, you can clone their repos. To do this, type the following commands.

$ git clone remote_repository_URL

Now let’s move to collaboration

When you work with a team, That is, for example, a group of developers working on a project. Each time you make a change and push it into the main repo, your colleagues have to pull those changes that you pushed into the git repo. Simply put it this way. To keep up with updates and the latest changes on the git repo, all you need is a git pull command. To achieve this, type the following commands.

$ git pull origin main

OR

$ git fetch
    AND
$ git merge

git pull is equilavent to git fetch and git merge

Lastly, let me teach you the basic things you need to know about Branches

$ git branch develop

This creates a new branch called the develop

$ git branch

This shows a list of branches already created

$ git checkout develop

This automatically moves to the branch develop

These are just the basic things you need to know about Git and GitHub. Stay tuned for more articles on how to use git and GitHub.

Additional resources

…And always remember, in case of fire, Do these 3 things;

Git commit
Git Push
Leave Building
Okay, Byeeeee………