DEV Community: Ifechukwu Obiezue Emmanuel

Effective Software Development Workflow: From Idea to Delivery

Ifechukwu Obiezue Emmanuel — Mon, 23 Sep 2024 11:54:40 +0000

Imagine building a complex structure like a skyscraper. You need a well-thought-out plan, careful execution, and continuous checks to ensure it's safe and meets all requirements. In the world of software development, we follow a similar process known as the Software Development Life Cycle (SDLC). It's our step-by-step guide from the initial idea to a functional software product. In this in-depth article, we will break down all the key stages in SDLC.

Effective Software Development Workflow:

This is the process of turning a software idea into a functional, reliable, and valuable product. Effective Software Development Workflow emphasizes efficiency, quality, and success. It involves the following stages:

IDEATION:

The ideation stage is the first stage of the software development process. It involves identifying a problem or an opportunity and devising a software solution. It's all about generating ideas, clear objectives, scope, and defining project goals. To further explain this concept, we will break it down into:

Identifying the Problem or Opportunity: This is the first and crucial step that sets the direction for the entire project. It involves recognizing a specific need, challenge, or market gap that software can address.

For instance, a busy restaurant where customers complain about long wait times. This is an opportunity to develop a mobile app for customers to place orders in advance.

Setting Clear Objectives: After identifying a problem or opportunity, define clear and specific objectives. What are the desired outcomes of the software solution? These objectives should be measurable and aligned with the organization's goals.
Determining the Scope: This is essential to understand the boundaries and limitations. it means outlining exactly what the software will do and what it won't. This helps keep the project on track and prevents unnecessary features or work.
Target Audience and User Needs: Understanding the target audience is crucial. Who will use the software, and what are their needs and preferences? Conduct user research or market analysis to gather insights into user behavior and expectations.
Budget and Timeline: Establishing a budget is necessary for the management of resources. This includes estimating costs for development, testing, marketing, and maintenance.

Additionally, setting a realistic timeline helps ensure that the project stays on track and is delivered on time.

Market Analysis: Studying the target market to identify potential users, competitors, and trends. This analysis helps you make informed decisions to create software that stands out in the competitive landscape.
Proof of Concept and Prototyping:

POC helps determine if your idea is achievable before developing it into a product.

Prototyping means creating a model of your product that provides an idea of how it will function.

Documentation: It's essential to document the concept thoroughly. This documentation may include a concept document, a project brief, or a project charter. These documents serve as a reference for all stakeholders involved in the software development process.

Importance of a Clear Project Concepts and Objectives:

Alignment: They ensure that all team members and stakeholders are on the same page, working towards a shared vision.
Focus: They provide a clear direction, helping the team maintain focus on achieving their goals.
Efficiency: They reduce misunderstandings, prevent scope creep, and streamline the development process.
Motivation: Clear objectives give the team a sense of purpose and motivation to achieve the project's goals.
They enable progress tracking and assessment of project success against defined goals.
It aids in decision-making during the development process

Requirements Gathering:

After solidifying your ideas, the next step is gathering requirements. It involves collecting and documenting the needs and expectations of the stakeholders. It helps define what the software needs to achieve, its functionalities, and its constraints. Requirements gathering involves:

Stakeholder Involvement: Engaging with stakeholders (clients or end-users) to understand their needs.
Elicitation Techniques: These are methods used to gather information or requirements from stakeholders. Various elicitation techniques employed to gather requirements include:
Interviews: one-on-one sessions with stakeholders to gather detailed information.
Surveys and Questionnaires: are distributed to a wider audience to collect structured responses.
Observation: observing how users work and interact with existing systems.
Workshops: collaborative sessions where stakeholders discuss their requirements and expectations.
Prototyping: creating prototypes to get feedback on design and functionality.
Documentation: documenting the information gathered in detail. This documentation includes:
- Functional Requirements: detailed descriptions of how the software should perform specific functions.
- Non-Functional Requirements: Criteria related to performance, security, usability, and other quality attributes.
- Use Cases: Scenarios that describe how the target users will use the software.
Prioritization: prioritizing requirements to determine which are most critical for the project's success. This step helps guide the development process, particularly in cases with limited resources.
Review and Approval: reviewing and approving the requirements by the stakeholders ensures alignment. Approval is an important milestone in the requirements gathering and analysis process.

Design and Architecture:

They play vital roles in the software development workflow, helping to create the blueprint of the software.

Design:

The design phase focuses on how the software system will function, what it will look like, and how users will interact with it.

For example, design is like a detailed plan for a house. It specifies the layout of rooms, the color of walls, the type of roof, and even the choice of furniture. The key aspects of design in SDLC include:

User Interface (UI) Design: Designers create the visual elements and layout of the software. UI design aims to ensure a user-friendly interface.
User Experience (UX) Design: UX designers focus on user experience, ensuring that the software is intuitive and easy to navigate.
Functional Design: Designers outline how the software will perform its functions. This stage defines the "what" and "how" of the software's capabilities.
Database Design: This involves designing the data structure, database schema, and data flow within the system. It's essential for effective data storage and retrieval.
Component Design: Designers detail the individual software components.
Security Design: This addresses potential vulnerabilities, data protection, and access control.
Scalability and Performance Design: This part focuses on optimizing the software's performance.

Architecture:

Software architecture provides the high-level structure and organization of the software system. It determines how various components will interact and how the system will meet specific goals.

For example, architecture is like the structural framework of a house. It determines how strong the foundation is and where the walls and doors go. The key aspects of architecture in SDLC include:

Architectural Styles: We chose an architectural style based on project requirements and goals. Some architectural styles include:
Monolithic Architecture: This involves building the entire application as a single integrated unit. It's simple but may be challenging to scale and maintain for complex systems.
Client-Server Architecture: This divides the software into the client (user interface) and the server (data processing and storage). Common in web applications.
Microservices Architecture: This involves dividing the software into small, independent services, each responsible for specific functionalities. This promotes flexibility and scalability.
Serverless Architecture: involves executing code in response to events without managing servers. This is ideal for event-driven applications.
Technology Stack Selection: This involves selecting the programming languages, libraries, and tools for development.
Data Flow and Management: Architects define how data will flow through the system, from input to storage and output.
Security Architecture: encompasses architectural decisions on authentication, authorization, encryption, and overall security measures.
Scalability and Load Balancing: this ensures building the software to handle increased loads. This is often done through load balancing and redundancy measures.
Component Interaction: It defines how different software components will interact within the system.
Integration: specifies how the software will integrate with external systems or APIs. to ensure seamless communication.

Principles of Good Design and Architecture:

Dividing the software into smaller, manageable modules for easier maintenance and reusability.
Keeping the design as simple as possible while meeting requirements.
Designing for the ability to handle increased loads or data without major changes.
Dividing the software into distinct components, each responsible for a specific aspect, simplifies maintenance.
Maintaining consistent naming, coding styles, and user interface elements.
Deciding on the database system and designing efficient data storage and retrieval mechanisms.

Development:

The heart of software development is the coding phase. These phases involve turning the design and architecture into a functioning software system. It is a crucial phase within the software development lifecycle and involves:

Coding: Developers write code using programming languages, following the design and architectural blueprints. This step transforms the high-level design and abstract concepts into actual software components.

Refactoring: Developers refactor code if they identify issues, inefficiencies, or opportunities for improvement. Refactoring involves restructuring the code without changing its external behavior. It helps improve maintainability, performance, or reliability.

Strategies to promote collaboration and efficiency among development teams

Efficient and collaborative development is essential for a successful software project. Let’s discuss some of these strategies:

Clear Communication: Ensure that team members have open and clear communication channels. Use tools like messaging platforms, email, and video conferencing to help with information sharing.
Project Management Tools: Use project management tools such as Jira, Trello, or Asana to track tasks, set deadlines, and monitor progress. These tools help in organizing and prioritizing work.
Version Control: Use version control systems like Git to track code changes and enable collaboration. This ensures that multiple developers can work on the same codebase without conflict.
Code Reviews: Incorporate regular code reviews where team members review each other's code. Code reviews improve code quality and knowledge sharing.
Automated Testing: Use automated testing practices, including unit tests, integration tests, and CI/CD pipelines. These tools help catch and fix issues early in the development process.

You will learn more about this as you read.
Pair Programming: This is where two developers work together on the same codebase. This practice encourages knowledge sharing and immediate issue resolution.
Agile Methodologies: Adopt Agile methodologies like Scrum or Kanban to break work into smaller, manageable tasks with regular iterations. This fosters collaboration and adaptability.

You will learn more about this as you read.
Regular Standup Meetings: Conduct daily or weekly standup meetings to keep the team informed about progress. This promotes accountability and transparency.
Documentation: Maintain clear and up-to-date documentation for code, architecture, and processes. Documentation helps new team members understand the project and its components.
Code Collaboration Tools: Use collaborative development tools such as GitHub or GitLab, which provide features like code hosting, issue tracking, pull requests, and wikis for a centralized, collaborative development environment.
Continuous Learning: Encourage continuous learning and skill development among team members. This can include training, workshops, and knowledge-sharing sessions.
Task Ownership: Assign clear ownership of tasks and features. Developers are more likely to take ownership and responsibility for their work when they know they're accountable.
Cultural Fit: Consider cultural fit when building development teams. A shared vision and values among team members can improve collaboration and cohesion.

Software Development Methodologies

Methodologies provide structured approaches for managing the software development process. Here are some of the methodologies used during the development phase:

Agile: Agile is a way of working that focuses on delivering value to customers early and often. It is an iterative and incremental approach, which means that teams work in short cycles and deliver working software at the end of each cycle. This allows teams to get feedback from customers early and often and to make changes to the software as needed.

Example: A team is building a new website for a restaurant. The team uses an Agile approach to break down the project into small, manageable pieces. They then work on one piece at a time and deliver it to the restaurant at the end of each week. The restaurant can then provide feedback on the work, and the team can make changes as needed.

Scrum: Scrum is an Agile framework that divides the project into short iterations called sprints. It promotes transparency, collaboration, and adaptability. Scrum teams have three defined roles, and there are:
Product Owner: He or she handles the requirements for the software and ensures that the team is delivering value to the customer.
Scrum Master: helps the team to follow the Scrum framework and to identify and remove any obstacles that will prevent the team from delivering.
Development Team: The Development Team handles developing and delivering the software.

Example: A team is building a new mobile app for a fitness studio. The team uses the Scrum framework to manage the project. The Product Owner is the owner of the fitness studio. The Scrum Master is a senior developer on the team. The Development Team are the developers and a QA engineer.

*The team works in two-week sprints. At the beginning of each sprint, the team selects a set of requirements from the product backlog to work on. The team then works on the selected requirements and delivers a working version of the app at the end of the spri*nt.

Kanban: Kanban is an Agile approach that visualizes work items on a Kanban board, allowing teams to manage and optimize their workflow. It is particularly useful for projects with unpredictable workloads.

Example: There is a new feature request to add the ability for users to upload photos to the app. The product owner adds the feature request to the To-Do column.

A developer takes the feature request from the To Do column and moves it to the In Progress column. The developer works on the feature by adding the necessary code to the app.

When the developer finishes, they move the feature request to the Testing column. A tester reviews the feature and tests it for any bugs.

If the tester finds any bugs, he or she moves the feature request back to the In Progress column for the developer to fix. If the tester does not find any bugs, he or she moves the feature request to the Done column.

The product owner then releases the new feature to users.

Quality Assurance and Testing:

We use quality assurance and testing to ensure that the software meets the desired quality and functionality.

QA focuses on preventing defects and ensuring that the software development follows standards.

Testing is a specific activity within the QA process that focuses on identifying defects or issues in the software

Different types of testing, such as unit testing, integration testing, and user acceptance testing, help identify and fix defects. Let’s go through some of the testing processes mentioned above:

Unit Testing:

Unit testing focuses on verifying the correctness of individual components or units of code. These units are the smallest testable parts of the software, such as functions, methods, or classes.

Scope: developers execute it during the coding phase to ensure that each unit of code behaves as expected.

Testing Approach: Test cases focus on exercising specific functionalities or paths within a unit.

Benefits: Unit testing helps catch and address bugs and issues early in the development process. It also contributes to code quality, modularity, and maintainability.

Tools: Popular unit testing frameworks include:

Integration Testing:

Evaluates how different units or components of the software interact when integrated. It ensures that these components work as a whole.

Scope: It takes place after unit testing and involves testing the interactions between modules or components.

Testing Approach: Test cases focus on the communication and data flow between integrated components. We use various integration strategies to test these interactions. Some of these strategies include top-down, or incremental.

Benefits: It helps identify issues that may arise from the combination of components.

Tools: There are various integration testing tools for different programming languages and platforms, but tools like Postman and Apache JMeter are widely used for testing APIs and web services.

User Acceptance Testing (UAT):

UAT assesses whether the software meets the end-users' requirements and business needs. It is the final phase of testing before releasing the software to users.

Scope: End-users, product owners, or business analysts carry out UAT. it covers the entire application to ensure that it aligns with the users' expectations and performs as intended.

Testing Approach: Test cases focus on real-life scenarios and use cases. Users perform tests that simulate actual use, verifying that the software meets their needs.

Benefits: UAT ensures that the software is user-friendly and serves its intended purpose. It provides a final opportunity to catch any issues before a software release.

Tools: We can conduct UAT manually, often with the help of spreadsheets or test management tools for test case tracking. Some organizations may use automated UAT tools for specific scenarios.

Deployment:

After the development and testing phases, it's time to deploy the software for end-users. This involves setting up the production environment and migrating the code and data. CI/CD pipelines help automate the deployment process, making it more efficient and reliable.

CI/CD Pipelines

CI/CD pipeline is an automated workflow that streamlines the software development and delivery process. It provides a consistent and repeatable process for building, testing, and deploying software. As the name implies it involves:

Continuous integration (CI): Developers merge their code changes into a central repository, triggering a build and testing process. If any tests fail, the system notifies the developers, enabling them to identify and resolve issues quickly.

Continuous delivery (CD): Once the code has passed all tests, it is automatically deployed to a staging or production environment. This allows for frequent releases of software with minimal manual intervention.

CI/CD Server: This is a software application that automates the build, test, and deployment processes. Some popular CI/CD servers include:

Semaphore: easy-to-use CI/CD with fast, customizable pipelines for efficient software delivery.
Jenkins: is an open-source automation server for customizable CI/CD pipelines.
Travis CI: Cloud-based CI/CD for open-source projects
GitLab CI/CD: Integrated with GitLab, offering built-in CI/CD capabilities for easy development.
Azure DevOps: Comprehensive CI/CD by Microsoft for software delivery
Bitbucket Pipelines: Integrated CI/CD within Bitbucket for seamless code testing and deployment.

Continuous Integration Workflow

Pipelines in CI/CD are the series of steps used to build, test, and deploy software. The specific workflow in a CI pipeline will vary depending on the software. But generally, the steps are:

Configuring the CI pipeline to know where to find the source code, what build tools to use, what tests to run, and where to deploy the software.
When a developer makes a change to the source code, they commit the change to a version control system such as Git.
The CI server triggers the CI pipeline when notified of a code change.
The CI pipeline builds the software by compiling the source code into an executable program.
The CI pipeline runs a series of tests on the software to ensure that it is working correctly.
If the tests pass, the CI pipeline deploys the software to a staging or production environment.
If the tests fail, the CI pipeline notifies the developers so that they can fix the problem.

This process is repeated every time a developer makes a change to the source code. This helps to ensure that software is built, tested, and deployed consistently and reliably.

For CD, we follow the same steps but since CD focuses on automating the deployment of code to production. CD will automatically release the code to production.

Maintenance and Update:

Maintenance and updates cannot be over-emphasized in software development. It is the ongoing effort to support, update, and enhance the software to keep it operational, secure, and relevant.

Maintenance involves the activities required to keep software stable and free from errors. Maintenance activities include:

Fixing Bugs
Monitoring and improving the performance of the software to ensure it runs efficiently.
Security Updates
Ensuring that the software complies with changing legal and regulatory requirements.
Managing and optimizing the database to prevent data corruption or loss.
Providing support to users and addressing their questions and issues. Offering training and documentation to help users navigate the software.
Ensuring that the software remains compatible with new technologies. This includes new operating systems or web browsers.

Updates involve making improvements, introducing new features, or enhancing existing ones. Updates deliver added value to users, respond to changing requirements, and stay competitive in the market. Update activities include:

Testing updates to prevent new issues or regressions. This is done by the quality assurance teams
Adding new features or improving existing ones based on user feedback, market trends, or changing business requirements.
Improving User Interface (UI) and User Experience (UX).
Optimizing the software to enhance performance.
Ensuring that the software remains compatible with new technologies and platforms, such as mobile devices or new APIs.
Security Enhancements
Informing users about the updates, their benefits, and any necessary changes to their workflows through release notes, in-app notifications, or email announcements.

Agile Approach to Maintenance and Updates:

In Agile development, maintenance and updates are often managed through the product backlog. The development team adds bug fixes, security updates, and feature enhancements to the backlog. The product owner prioritizes these items and addresses them in sprints. This enables flexibility and responsiveness to changing user needs.

Strategies for ongoing support and improvements:

Provide clear and concise documentation.
Offer timely and responsive support.
Regularly release updates and patches.
Collect and analyze user feedback.
Monitor the software for usage and performance.
Use continuous integration and continuous delivery (CI/CD).
Establish a culture of continuous improvement.

Conclusion:

Effective software development requires a well-defined workflow from concept to delivery. By understanding the principles and strategies outlined in this guide, you'll be better equipped to manage and optimize your software development workflow, leading to successful project outcomes and satisfied stakeholders.

Mastering Modern Authentication in Web Applications: OAuth 2.0 Demystified

Ifechukwu Obiezue Emmanuel — Sat, 21 Sep 2024 12:22:10 +0000

In today's digital world, web applications have become integral to our daily lives. From social networking and email to online banking and shopping, as we entrust these applications, security has become a paramount concern. This write-up demystifies OAuth 2.0 and provides practical code examples to help you master it.

Authentication vs. Authorization

Authentication and authorization are two essential concepts in computer security and access control. They serve distinct but interconnected purposes. In order to understand OAuth 2.0, we must understand the terms authentication and authorization.

Authentication is the process of verifying the identity of a user, system, or entity. It focuses on "Who are you?" It ensures that the entity is who it claims to be.

Authorization defines the actions or resources that a user has permission to access. It focuses on "What are you allowed to do?" It enforces access policies and permissions.

Now that you understand authentication and authorization, let's explore OAuth 2.0.

What is OAuth 2.0?

OAuth 2.0 stands for Open Authorization 2.0 Framework. It is a framework for secure authorization and delegated access to protected resources, such as user data, on the web. It allows users to grant third-party applications limited access without sharing their credentials.

To understand OAuth 2.0, we must define the fundamental concepts used within the protocol. To make these concepts easier to grasp, we will analyze OAuth 2.0 in the context of a common real-world scenario:

Logging in to a random website with GitHub and accessing the GitHub REST API.

In this scenario, website will prompt the user to log in with GitHub. GitHub will then authenticate the user. Once GitHub has obtained the user's consent, it will issue an access token to the website. The website then uses the access token to access the REST API.

OAuth 2.0 roles

In OAuth 2.0 terminology, GitHub in this scenario is the authorization server (AS).

The authorization server (AS) handles authenticating the resource owner. It obtains their consent and issues access tokens to clients. It plays a central role in the OAuth 2.0 flow

The REST API is a resource server(RS).

The resource server hosts protected resources, which are HTTP endpoints, and needs an access token as a credential to authenticate a request. In the case of GitHub, these resources are repositories, issues, pull requests, and more.

The Web application is the client

The client is the third-party app that requests access to the resource owner's protected resources. The client uses the issued access token to access protected resources

The user is the resource owner

The resource owner is the end-user who owns the protected resources or credentials and has the authority to grant or deny access to them. The resource owner interacts with the client application to provide consent for access. In the GitHub scenario, the user is the one who creates the repositories, issues, pull requests, and more.

These terms are the OAuth 2.0 roles, which are the entities in an OAuth 2.0 flow. The steps taken to get the access token are the OAuth flows.

OAuth 2.0 Flows

OAuth 2.0 flows, also known as grant types, specify how a client application can get an access token to access protected resources on behalf of a user. The choice of flow depends on factors like client type and the desired level of security. Let's provide a comprehensive explanation of OAuth flows in simple terms and discuss when to use them.

Types of OAuth 2.0 flows include the following:

Authorization Code Flow:
Scenario: Imagine you're a GitHub user, and you want to use a code editing website. When you click "Sign in with GitHub" on the code editor's site, it redirects you to GitHub's login page. After logging in, GitHub provides an authorization code to the code editor, allowing it to access your GitHub account on your behalf.

Authorization code flow works as the standard for Single Sign-On (SSO). When you log in to one service (e.g., GitHub), it provides an authorization code to a relying party (e.g., a website). This code allows the website to access your identity and log you in without needing a separate login.

When to use:

Used for web applications and confidential clients.

It involves the exchange of an authorization code for an access token.

Provides a secure way to authenticate users and obtain access tokens.

This flow can be used in mobile apps using the Proof Key for Code Exchange (PKCE) technique.

Implicit Flow:
Scenario: You're building a personal blog and you want to display a list of your public GitHub repositories on it. You add a widget to your blog that fetches this information from GitHub. There's no need for you or your blog visitors to log in or provide GitHub credentials.

When to use:
An access token is obtained without an authorization code exchange.

Use this flow when you want to access publicly available information from GitHub.

It's ideal for displaying your open-source projects on a website.

Designed for single-page applications (SPAs) and mobile apps

Generally used for less sensitive applications due to reduced security.

Client Credential Flow:
Scenario: Think of a situation where a bank's ATM (application) needs to access the bank's cash vault (protected resource) to restock cash. The ATM has its access card (client credentials) to open the vault without involving a bank teller (user).

*When to use:
*
Used for machine-to-machine communication.

Resource Owner Password Credentials Flow (ROPC):

Scenario: As a GitHub user who's using a command-line tool to manage your repositories, you can use your GitHub username and password directly with the tool to access your account.

When to use:

This flow is suitable for personal scripts or trusted applications.

Allows clients to collect and use the user's username and password.

Considered less secure and should be used sparingly.

Refresh Token Flow:
Scenario: Imagine you're using a GitHub mobile app, and you've logged in. After some time, your session expires, but you don't want to enter your credentials again. The app quietly uses a "refresh token" to get a new access token without bothering you with the login process.

Refresh token flow enhances SSO by allowing users to stay signed in for extended periods without requiring frequent logins.

When to use:

Used to get a new access token using a refresh token.

It's ideal for maintaining user sessions across multiple services without inconvenience.

Let us explore what we have learned so far by creating our own OAuth app.

Implementing OAuth 2.0 in React

In this section, we will learn how to implement the OAuth 2.0 authorization code flow in React using Passport JS. This involves many steps, including setting up a GitHub OAuth app, creating React components, and handling the OAuth flow. I'll guide you through the process step by step and provide code snippets for each part.

Code for this Tutorial

Prerequisites

- GitHub Account

- Node js(npm)

- Basic Knowledge of React and JavaScript

Proxy Server (Express js)

We will build this app using GitHub as our authorization server and the Authorization Code Flow.

Getting the GitHub Client ID and Client Secret

Client ID and Client Secret are essential components of the OAuth 2.0 flow for interacting with the authorization server to get the authorization code. To obtain a GitHub client ID and client secret, follow these steps:

Sign in to GitHub

Ensure you have a GitHub account or create one if you don't already have it. You'll need this account to create a GitHub application.

Access Developer Settings

Once logged in, go to the GitHub developer settings to create your new OAuth App

Create a New OAuth Application

On the developer settings page, you'll find a menu on the left. Click on "OAuth Apps" under the "Developer applications" section. To create a new OAuth application, click on the "Register a new application" button.

Fill Out the Application Details

GitHub will present you with a form where you need to provide details about your application.

Application name: Give the app a name of your choice. In this example, it's "Auth2App.".
Homepage URL: Enter the URL of your application's homepage.
Application description: Describe the purpose of your application.
Authorization callback URL: This is the URL where users will be redirected after granting or denying access. It should match the URL where you handle OAuth callbacks in your application.

Generate Client ID and a client secret.

Once you've filled out the form, click the "Register application" button. GitHub will generate a Client ID and Client Secret for your application. You'll see them displayed on the application's settings page.

Safeguard Your client's Secret

That’s it. All done copy your client ID and client secret, and save somewhere safe.

Setting up the backend

Since we have secured our GitHub Client ID and Secret. Now let’s implement our backend using Node.js, Express framework, and a Node.js middleware authentication library called passport.js. Let’s follow the following steps to get started:

Create a directory to house our Project, in this example auth2app

mkdir auth2app

Create another directory inside it and name it server:

cd auth2app && mkdir server && cd server

Initialize our new project inside our server directory:

npm init -y

Install the libraries and Packages we need:

npm install express passport passport-github2 cors cookie-session

Create a new .env file to secure your Client ID and Secret that was obtained from GitHub:

touch .env

Environment variables dotenv help to improve security while coding. You can add it to your gitignore file to prevent it from uploading along with other source codes.

Then, add the Client ID and Secret. The content of the .env should look as follows:

CLIENT_ID = "Input your Id here";
CLIENT_SECRET = "Input your Secret here";

Next, create a file where the passport.js strategies code will be stored:

touch passport.js

Add The following code to your passport.js file, to update all our variables:

require("dotenv").config();
const passport = require("passport");
const GithubStrategy = require("passport-github2").Strategy;

//Input your client id and client secret.
GITHUB_CLIENT_ID = process.env.CLIENT_ID;
GITHUB_CLIENT_SECRET = process.env.CLIENT_SECRET;

Import your desired passport.js strategy from the Passport.js website. Here we are using the GitHub 2 strategy.

passport.use(
new GithubStrategy(
{
clientID: GITHUB_CLIENT_ID,
clientSecret: GITHUB_CLIENT_SECRET,
callbackURL: "/auth/github/callback",
},
function (accessToken, refreshToken, profile, done) {
done(null, profile);
}
)
);

Now since we using sessions and cookies, we have to serialize and deserialize the user:

passport.serializeUser((user, done) => {done(null, user)});
passport.deserializeUser((user, done) => {done(null, user)});

Now Let's Create our express route file named auth.js:

touch auth.js

Add The following code to your auth.js file, to declare all variables:

const router = require("express").Router();
const passport = require("passport");
const CLIENT_URL = "http://localhost:3000/";

At this point, we will start adding endpoints for different tasks. Add the /github endpoint to authenticate the user using passport:

router.get("/github", 
passport.authenticate("github",
 { scope: ["profile"] 
})
);

Add another endpoint to set our Callback function. This will include Redirect if authentication is successful and Redirect if authentication is unsuccessful:

router.get(
"/github/callback",
passport.authenticate("github", {
successRedirect: CLIENT_URL,
failureRedirect: "/login/failed",
})
);

Since we don’t have an endpoint for /login/failed. Add this code to create a /login/failed endpoint:

router.get("/login/failed", (req, res) => {
res.status(401).json({
success: false,
message: "Failed to Authenticate",
});
});

Since we have created the /login/failed. We will also have to create a /login/success endpoint. Here we used an if statement to check if the user is authenticated:

router.get("/login/success", (req, res) => {
if (req.user) {
res.status(200).json({
success: true,
message: "Successful",
user: req.user,
});
}
});

Then add the /logout endpoint, this helps a user to log out from a session:

router.get("/logout", (req, res) => {
req.logout();
res.redirect(CLIENT_URL);
});

Additionally, we need to export our router:

module.exports = router;

Now Let's Create our main JS file named index.js:

touch index.js

Add The following code to your index.js file, to declare all our variables:

const cookieSession = require("cookie-session");
const express = require("express");
const cors = require("cors");
//From Passport.js file
require("./passport");
const passport = require("passport");
//From auth.js file
const authRoute = require("./auth");
//Initialize a new Express app
const app = express();

And add the following middlewares to set cookies, initialize passport, resolve CORS(configuration) and our authRoutes endpoint(/auth).

app.use(
cookieSession({ name: "session", keys: ["OAuthapp"], maxAge: 24  60  60 * 100 })
);
app.use(passport.initialize());
app.use(passport.session());
app.use(
cors({
origin: "http://localhost:3000",
methods: "GET,POST,PUT,DELETE",
credentials: true,
})
);
app.use("/auth", authRoute);

Implementing the React Frontend**

Go to the auth2app directory and bootstrap a new React project using Create React App:

npx create-react-app client

Install the libraries and Packages we need:

npm install react-router-dom

Open theApp.css file in the src directory of your React project and add the following CSS code:

.navbar {
padding-top: 30px;
height: 50px;
display: flex;
align-items: center;
justify-content: space-around;
}
.list {
display: flex;
align-items: center;
list-style: none;
}
.listItem,
.login-text {
color: #000;
text-decoration: none;
margin-right: 20px;
font-weight: 500;
cursor: pointer;
}
.avatar {
width: 32px;
height: 32px;
border-radius: 50%;
object-fit: cover;
}
.login,
center {
cursor: pointer;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

This will help to style the navbar component, the Dashboard, and the Home ‘Login with GitHub’ button.

Update yourApp.js file to import the necessary methods and hooks by adding the following code just above the App component:

import Navbar from "./components/Navbar";
import "./app.css";
import { BrowserRouter } from "react-router-dom";
import { useEffect, useState } from "react";

Add the following Navbar component just before the App component:

const Navbar = ({ user }) => {
const logout = () => {
window.open("http://localhost:5000/auth/logout", "_self");
};
return (
<div className="navbar">
<span className="logo">
<Link to="#" target="blank">
<img src="logo.png" height="25" width="150" alt="semaphore logo" />
</Link>
</span>
{user ? (
<ul className="list">
<li className="listItem">
<img src={user.photos[0].value} alt="" className="avatar" />
</li>
<li className="listItem">{user.displayName}</li>
<li className="listItem" onClick={logout}>
Logout
</li>
</ul>
) : (
<>Login</>
)}
</div>
);
};

Here we passed ‘user’ as a prop so we can use it in our code. We simply used the the conditional ternary operator with the syntax : user ? <dashorboard>:<login>. This simply states if there is a user, display some of the user details and the logout button, If there is no user available it will simply display login.

Finally, update the App component with the following code:

const App = () => {
const [user, setUser] = useState(null);
useEffect(() => {
const getUser = () => {
fetch("http://localhost:5000/auth/login/success", {
method: "GET",
credentials: "include",
headers: {
Accept: "application/json",
"Content-Type": "application/json",
"Access-Control-Allow-Credentials": true,
},
})
.then((response) => {
if (response.status === 200) return response.json();
throw new Error("authentication has been failed!");
})
.then((resObject) => {
setUser(resObject.user);
})
.catch((err) => {
console.log(err);
});
};
getUser();
}, []);
console.log(user);
return (
<BrowserRouter>
<div>
<Navbar user={user} />
{user ? (
<center>
<p>
<b>Name: </b>
{user.displayName}
</p>
<p>
<b>UserName: </b>
{user.username}
</p>
<p>
<b>User Email:</b> {user.emails[0].value}
</p>
<img src={user.photos[0].value} width="100px" height="100px"/>
</center>
) : (
<>
<div className="login">
<img width="500" src="login.png" onClick={() => {
window.open("http://localhost:5000/auth/github", "_self");}}</>
</div>
</>
)}
</div>
</BrowserRouter>
);
};

Here we used React useEffect Hook to request our login/success endpoint that we created in our backend server.

Now, it's time to test out the implementation. Go to your server directory and run the following command to start up the server

node index.js

Open another terminal in your client directory and run this command to start our React app:

npm run start

This command will open up http://localhost:3000 in your default browser.

If you click on the Continue with GitHub button, you'll be redirected to the OAuth consent screen.

After you're redirected, you'll be logged in and authorized to access the post resources.

That’s it! Congratulations!🎉 You are done with the tutorial and have learned how to implement OAuth 2.0 authorization code flow in React using Passport JS. Great work!

Conclusion

OAuth 2.0 is a powerful tool for building secure and user-friendly web applications. With a solid understanding and practical code examples at your disposal, you can confidently implement modern authentication and authorization in your projects. You can implement different strategies with passport.js, some of which include Google, Facebook, BitKeep, and many more, using the example laid out for you. Keep security and usability in mind, and your applications will thrive in today's digital landscape.

Deploying a React application to GitHub Pages

Ifechukwu Obiezue Emmanuel — Tue, 13 Aug 2024 02:35:31 +0000

Deploying a React application to GitHub Pages is a popular and straightforward way to host your static projects for free. GitHub Pages provides a convenient platform for sharing your work with others, whether it's a personal project, portfolio, or documentation site. Here's a step-by-step guide to deploying your React application to GitHub Pages.

Prerequisites

Before you begin, ensure that you have the following:

Node.js and npm: Ensure that Node.js and npm are installed on your machine. You can check this by running node -v and npm -v in your terminal.
React Application: You should have an existing React application created using create-react-app or a similar setup.
GitHub Repository: A GitHub account with a repository where you want to deploy your React application. The repository can be either public or private.

Step 1: Install `gh-pages` Package

The gh-pages package makes it easy to deploy your React application to GitHub Pages. Install it by running the following command in your React project's root directory:

npm install --save-dev gh-pages

Step 2: Update `package.json`

To automate the deployment process, you need to add a few fields to your package.json file.

Add the homepage field: This specifies the URL of your GitHub Pages site. Replace username and repository-name with your GitHub username and repository name, respectively.

   "homepage": "https://username.github.io/repository-name",

Add predeploy and deploy scripts: These scripts will help you build and deploy your application with a single command.

   "scripts": {
     "predeploy": "npm run build",
     "deploy": "gh-pages -d build",
     // other scripts
   }

predeploy: Runs the build script before deploying the app.
deploy: Uses gh-pages to publish the contents of the build directory to the gh-pages branch of your repository.

Step 3: Build Your Application

Run the predeploy script to build your application. This will generate an optimized production build in the build directory.

npm run build

Step 4: Deploy to GitHub Pages

Deploy your application by running the deploy script:

npm run deploy

This command will create or update the gh-pages branch in your repository and push the contents of the build directory to that branch. GitHub Pages will automatically serve your site from this branch.

Step 5: Access Your Deployed Site

Once the deployment is complete, you can access your site at the URL specified in the homepage field of your package.json file. It typically takes a few minutes for the site to become available.

Step 6: Custom Domain (Optional)

If you want to use a custom domain, create a CNAME file in the public directory of your React project and add your domain name (e.g., www.example.com). GitHub Pages will configure your custom domain automatically when you deploy your application.

Troubleshooting Tips

404 Errors: If your React app uses client-side routing (e.g., with React Router), you may encounter 404 errors when navigating directly to a route. To fix this, create a 404.html file in your public directory with the following content:

   <script>
     window.location.href = "/repository-name" + window.location.pathname;
   </script>

Cache Issues: Sometimes, GitHub Pages may cache old versions of your site. To resolve this, try clearing your browser cache or appending a query string (e.g., ?v=1) to the URL.

Conclusion

Deploying a React application to GitHub Pages is a simple and effective way to showcase your work. By following these steps, you can have your project live in just a few minutes. GitHub Pages is an excellent choice for hosting static sites, and with the help of the gh-pages package, the deployment process is smooth and hassle-free.

How to Create a New Project and Push to GitHub from your Local Machine

Ifechukwu Obiezue Emmanuel — Sat, 30 Mar 2024 00:00:08 +0000

This is something we already know how to do, but for reference sake am documenting this here.

To create a new project and push it to GitHub from your local machine, you'll need to follow these general steps:

Install Git: If you haven't already, download and install Git on your local machine. You can get it from the official Git website: https://git-scm.com/
Create a New Repository on GitHub:
- Log in to your GitHub account.
- Click on the "+" sign in the top right corner of the page.
- Select "New repository."
- Enter a name for your repository, add a description if you want, and choose any other settings you need (public or private, initialize with a README, etc.).
- Click on the "Create repository" button.
Set up Git on Your Local Machine:
- Open a terminal or command prompt on your local machine.
- Configure Git with your name and email address:
```
 git config --global user.name "Your Name"
 git config --global user.email "your_email@example.com"
```
Navigate to Your Project Directory:
- Use the cd command to navigate to the directory where you want to create your project.
Initialize a Git Repository:
- Run git init to initialize a new Git repository in your project directory.
Add Your Files to the Repository:
- Copy or create the files you want to include in your project into the repository directory.
- Use git add . to add all files in the current directory to the staging area. You can also specify individual files instead of . to add only specific files.
Commit Your Changes:
- After adding files to the staging area, commit them to the repository with a commit message:
```
 git commit -m "Initial commit"
```
Link Your Local Repository to GitHub:
- On GitHub, copy the URL of your repository (should look like https://github.com/username/repository-name.git).
- Back in your terminal, add the remote repository URL using:
```
 git remote add origin https://github.com/username/repository-name.git
```
Push Your Changes to GitHub:
- Finally, push your committed changes to the GitHub repository:
```
 git push -u origin master
```

If you are using a different branch name, replace master with your branch name.

Authenticate with GitHub:
- If prompted, enter your GitHub username and password or token to authenticate and push your changes.

After completing these steps, your project files should be successfully pushed to GitHub, and you can view them in your GitHub repository online.

⚡Feel free to reference back to this guide at any time.

Steps to Become a Profitable Trader

Ifechukwu Obiezue Emmanuel — Sat, 29 Apr 2023 16:29:58 +0000

In the trading world today, many various strategies are being discussed in the trading market for becoming profitable, but the Essential keys in become profitable in the trading space all boil down to technical analysis and trading phycology.

Understanding the technical aspect of trading takes quite a while to be able to master efficiently, In the world today there consist of various technical strategies, like the trendline (breakout and retest), the indicators, the Fibonacci, Price action and more. All these are various strategies used by most profitable and successful traders, but the one I prefer and find the most efficient is price action. The reason is because the market moves with time and price and it is constantly evolving, in this case, the knowledge of price action helps you by being up to date on the current market situations.

To fully understand price action, you first have to let go of all other strategies you have on your sleeves to avoid misapprehensions before we continue, price action simply refers to understanding the demand and supply in the market, this also comes with various strategies like the smart money concept(SMC), Institutional concept of trading(ICT), Wykoff method, etc. All these are various ways in which demand and supply are utilized efficiently.

To efficiently grasp this technique, you need to have the basics of candlesticks anatomy, knowing when a candle opens and close, knowing the high and low of the candle, and knowing the order flow of the market.

In other words, knowing your market structure more efficiently makes you a step ahead in becoming profitable in this trading space. Now let's talk about Trading psychology.

Trading Psychology refers to the emotions and mental state that help dictate success or failure in trading, it involves your mindset when trading and when you’re not trading. Discipline and risk management are two of the most critical aspects of trading psychology since the implementation of these is critical to a successful and effective Trading Plan.

A consistently profitable trader specializes in one or two strategies he/she focuses on trading those flawlessly. To be a Profitable trader you must first set your mindset that trading is not a rich quick scheme, it’s a steady business whose keyword is “consistency”, you must start small and expunge every atom of greed. For a trader not to be greedy, you must enjoy the little profit you’re making, for example, if you are making 5$ in a day the compound interest in a month will be at approximately 150$. Another aspect of trading psychology is Fear. The fear of loss, no one likes to lose money. But unfortunately, losses are part of the Trading World which must set a mindset on how to approach it, for example before I consider taking a trade I must check and set my risk-to-reward ratio.

The highlighted part of the image is the value of the risk-to-reward ratio of a trade which is the target divided by the stop

In other to approach fear in trading you must risk what you can afford to lose and try not to open too many orders at once.

NEXT CHAPTER WILL BE ON HOW TO USE THE PRICE ACTION STRATEGY AND MAKE AN ENTRY...stay TUNNED!

DEV Community: Ifechukwu Obiezue Emmanuel

Effective Software Development Workflow: From Idea to Delivery

Mastering Modern Authentication in Web Applications: OAuth 2.0 Demystified

Authentication vs. Authorization

What is OAuth 2.0?

OAuth 2.0 roles

OAuth 2.0 Flows

Types of OAuth 2.0 flows include the following:

Implementing OAuth 2.0 in React

- GitHub Account

- Node js(npm)

- Basic Knowledge of React and JavaScript

Getting the GitHub Client ID and Client Secret

Setting up the backend

Implementing the React Frontend**

Conclusion

Deploying a React application to GitHub Pages

Prerequisites

Step 1: Install gh-pages Package

Step 2: Update package.json

Step 3: Build Your Application

Step 4: Deploy to GitHub Pages

Step 5: Access Your Deployed Site

Step 6: Custom Domain (Optional)

Troubleshooting Tips

Conclusion

How to Create a New Project and Push to GitHub from your Local Machine

Steps to Become a Profitable Trader

NEXT CHAPTER WILL BE ON HOW TO USE THE PRICE ACTION STRATEGY AND MAKE AN ENTRY...stay TUNNED!

Step 1: Install `gh-pages` Package

Step 2: Update `package.json`