By the end, you'll have a fully functional MCP server integrated with Claude Desktop in about 10 minutes. This solution applies to any MCP setup facing this standard error after Python upgrades.

Table of Contents

1. What Causes the ENOENT Error?

2. Prerequisites

3. How to Diagnose Your Broken Virtual Environment

4. How to Completely Rebuild Your Virtual Environment

5. How to Install MCP Server Dependencies

6. How to Locate Your Server Files

7. How to Test Your Server Setup

8. How to Configure Claude Desktop

9. How to Restart Claude Desktop and Test Integration

10. Understanding MCP Server Capabilities

11. Alternative Installation Methods

    • Method 1: Direct Package Installation

    • Method 2: Using UV Package Manager

12. How to Prevent Future ENOENT Errors

13. Troubleshooting Common Issues

14. Conclusion

What Causes the ENOENT Error?

The ENOENT (Error NO ENTry) error means your system can’t locate the Python executable at the specified path. This occurs when the file is missing or inaccessible.

On macOS, this typically happens when:

• You've upgraded Python through Homebrew

• The brew cleanup command removed old Python versions

• Your virtual environment's symlinks now point to non-existent files

What makes this particularly challenging is that your virtual environment folder still exists – it looks fine from the outside, but the Python executable inside is completely broken.

When MCP servers try to spawn Python processes using these broken paths, you get the dreaded ENOENT error. This affects any Python-based MCP server, whether you're building custom tools, connecting to APIs, or working with file systems.

Prerequisites

To follow this tutorial, you'll need:

• macOS with Homebrew installed

• Python 3.10 or higher

• An MCP server repository cloned locally

• Claude Desktop installed

• Basic familiarity with terminal commands and Python virtual environments

If you haven't cloned an MCP server repository yet, you can start with any open-source MCP server. For this tutorial, I'll use generic examples that work with any MCP setup:

git clone https://github.com/your-username/your-mcp-server.git
cd your-mcp-server

How to Diagnose Your Broken Virtual Environment

First, you need to confirm that your virtual environment is actually the problem. Open your terminal and navigate to your MCP directory:

cd /path/to/your/mcp-server

Now check if your Python executable exists:

ls -la venv/bin/python*

If you see broken symlinks or get "No such file or directory" errors, you've found your problem. You might see output like:

lrwxr-xr-x  1 username  staff  16 Jan  1 12:00 python -> /usr/local/bin/python3.11
lrwxr-xr-x  1 username  staff  16 Jan  1 12:00 python3 -> /usr/local/bin/python3.11

But when you try to run these Python executables:

./venv/bin/python --version

You'll get an error because the target files no longer exist. This confirms your virtual environment is broken and needs rebuilding.

How to Completely Rebuild Your Virtual Environment

The most reliable solution is to rebuild your virtual environment from scratch. This ensures all paths and dependencies are correctly configured for your current Python installation.

Here's your step-by-step rebuild process:

# Make sure you're in the MCP server directory
cd /path/to/your/mcp-server

# Remove the corrupted virtual environment
rm -rf venv

# Create a fresh virtual environment
python3 -m venv venv

# Activate the new environment
source venv/bin/activate

You should now see (venv) in your terminal prompt, indicating the virtual environment is active. This prefix confirms you're working within the isolated Python environment.

How to Install MCP Server Dependencies

With your fresh virtual environment active, install the MCP server and its dependencies. The exact installation command depends on your specific MCP server, but typically follows one of these patterns:

# For package-based installation
pip install -e .

# Or for requirements file
pip install -r requirements.txt

# Or for specific MCP frameworks
pip install fastmcp

Common MCP server dependencies include:

• FastMCP for the server framework

• JSON-RPC libraries for communication protocols

• HTTP clients for API integrations

• File system utilities for local operations

The installation process displays all packages as they install. Don't worry if you see deprecation warnings – they're normal and won't affect functionality.

How to Locate Your Server Files

After installation, identify where your main server file lives. Run this command to find all server.py files:

find . -name "server.py" -type f

You may see results like:

• ./server.py (in the root directory)

• ./src/server.py (in a source directory)

• ./mcp_server/server.py (in a package directory)

Check your current directory structure:

ls -la

Look for the main server entry point. Most MCP servers follow standard Python project structures with either a root-level server file or one nested in a package directory.

How to Test Your Server Setup

Now you’ll want to test your server to ensure it's working correctly. Start with the main server file you identified:

python server.py

If this is the correct server and everything is configured correctly, you'll see output similar to:

╭─ MCP Server ───────────────────────────────────────────────────────────────╮
│ 🖥️  Server name: Example-MCP                                              │
│ 📦 Transport: STDIO                                                        │
│ 🤝 Protocol: JSON-RPC                                                      │
╰────────────────────────────────────────────────────────────────────────────╯
[INFO] Starting MCP server with transport 'stdio'
[INFO] Server ready for connections

This output confirms your MCP server is working correctly. The server uses standard input/output (STDIO) for communication, which is perfect for Claude Desktop integration. You can stop the server with Ctrl+C.

How to Configure Claude Desktop

Now that your server runs properly, configure Claude Desktop to connect to it. The configuration file location depends on your operating system:

For macOS:

~/Library/Application Support/Claude/claude_desktop_config.json

For Windows:

%APPDATA%\Claude\claude_desktop_config.json

For Linux:

~/.config/Claude/claude_desktop_config.json

Create or edit this file with your exact paths. Your configuration should look like this:

{
  "mcpServers": {
    "example-mcp": {
      "command": "/Users/yourusername/path/to/mcp-server/venv/bin/python",
      "args": ["/Users/yourusername/path/to/mcp-server/server.py"],
      "cwd": "/Users/yourusername/path/to/mcp-server"
    }
  }
}

Replace /Users/yourusername/path/to/mcp-server/ with your actual path. You can get your precise path by running pwd in your MCP server directory.

The configuration tells Claude Desktop:

• Which Python interpreter to use (from your virtual environment)

• Where to find the server script

• Which directory to run the server from

How to Restart Claude Desktop and Test Integration

After saving your configuration file, altogether quit Claude Desktop (not just close the window). On macOS, use Cmd+Q or right-click the dock icon and select Quit. Then restart Claude Desktop.

Once Claude Desktop is running again, test your MCP integration. You can verify the connection by:

1. Looking for your MCP server name in Claude's interface

2. Testing basic MCP functionality with prompts like:

   • "What MCP tools are available?"

   • "Can you check the MCP server status?"

   • "Show me the available MCP commands"

If everything is working correctly, Claude will respond using the MCP server tools, confirming successful integration.

Understanding MCP Server Capabilities

MCP servers extend Claude's capabilities by providing structured access to external tools and data sources. Common MCP server implementations include:

1. File system operations: MCP servers can provide controlled access to local files, allowing Claude to read, analyze, and process documents while maintaining security boundaries.

2. API integrations: Connect Claude to external services through MCP servers that handle authentication, rate limiting, and data formatting for various APIs.

3. Database connections: Query databases safely through MCP servers that manage connections, handle credentials securely, and format results for Claude's consumption.

4. Custom tools: Build specialized tools for your workflow, from code analysis to data processing, all accessible through the standardized MCP interface.

The beauty of MCP is its flexibility – you can create servers for virtually any tool or service you need Claude to interact with.

Alternative Installation Methods

If you want more streamlined approaches for future setups, here are two excellent alternatives:

Method 1: Direct Package Installation

For MCP servers available as packages, you can install directly:

pip install mcp-server-package

Then use this simpler configuration:

{
  "mcpServers": {
    "example-mcp": {
      "command": "mcp-server-command"
    }
  }
}

This method works when the MCP server provides a command-line entry point through its setup configuration.

Method 2: Using UV Package Manager

UV provides more robust dependency management – perfect if you're tired of Python version conflicts:

# Install UV
curl -LsSf https://astral.sh/uv/install.sh | sh

# Use UV in your configuration
{
  "mcpServers": {
    "example-mcp": {
      "command": "uv",
      "args": [
        "run",
        "--with", "fastmcp",
        "python",
        "/path/to/mcp-server/server.py"
      ],
      "cwd": "/path/to/mcp-server"
    }
  }
}

UV automatically manages Python versions and dependencies, reducing the likelihood of environment-related errors.

How to Prevent Future ENOENT Errors

To avoid this issue in the future, follow these best practices:

1. Use Virtual Environment Copies Instead of Symlinks

When creating virtual environments, use the --copies flag:

python3 -m venv venv --copies

This creates actual copies of files instead of symlinks, making your environment more resilient to Python upgrades.

2. Pin Your Homebrew Python Version

Prevent automatic Python upgrades that break environments:

brew pin python@3.11

Remember to unpin when you're ready to upgrade intentionally.

3. Create a Health Check Script

Save this script as health_check.sh in your MCP server directory:

#!/bin/bash
# health_check.sh
echo "Checking Python virtual environment..."
source venv/bin/activate

python -c "import sys; print(f'Python: {sys.executable}')"
python -c "print('✓ Python is working')"

# Check for common MCP dependencies
python -c "import json; print('✓ JSON module available')"
python -c "import asyncio; print('✓ Asyncio available')"

echo "Health check complete!"

Make it executable and run it periodically:

chmod +x health_check.sh
./health_check.sh

4. Document Your Python Version

Create a .python-version file in your project:

python --version > .python-version

This helps you remember which Python version the project was built with.

Troubleshooting Common Issues

Even with the fix applied, you might encounter these challenges:

Import Errors

If you see import-related errors, ensure all dependencies are installed:

source venv/bin/activate
pip list  # Check installed packages
pip install -r requirements.txt  # Reinstall if needed

Permission Denied Errors

Make sure your server file is executable:

chmod +x server.py

Claude Desktop Not Finding the Server

Double-check your configuration paths are absolute, not relative:

# Good - absolute path
"/Users/username/projects/mcp-server/server.py"

# Bad - relative path
"./server.py"

Server Starts, But Claude Can't Connect

Verify that the transport method matches between your server and the configuration. Most MCP servers use STDIO, but some might use HTTP or WebSocket transports.

Multiple Python Installations

If you have multiple Python versions, be explicit about which one to use:

# Check available Python versions
ls -la /usr/local/bin/python*

# Use a specific version
/usr/local/bin/python3.11 -m venv venv

Conclusion

You've successfully fixed the "spawn python ENOENT" error by rebuilding your Python virtual environment and properly configuring your MCP server for Claude Desktop. You've also learned how to prevent future mistakes and troubleshoot common issues.

With your MCP server running smoothly, you can now:

• Build custom tools that extend Claude's capabilities

• Create integrations with your favorite services

• Develop specialized workflows for your specific needs

• Share your MCP servers with the community

The MCP ecosystem is growing rapidly, with new servers and tools being developed constantly. Whether you're building file system tools, API integrations, or custom utilities, you now have the foundation to create and maintain robust MCP servers.

Happy building, and enjoy your error-free development journey! For more tutorials, follow my work on GitHub.

Paraphrasing tools can offer a quick solution to help you develop unique ideas and create original content.

With the help of ReactJs and ChatGPT Turbo, developers can build a powerful and efficient paraphrasing tool that delivers accurate and effective results.

With AI, you can automate repetitive tasks, test code more efficiently, and improve the overall quality of your software. Recently, we have seen a ton of developers asking questions like "How do I create a chatbot in Reactjs?", "How do I use ChatGPT API in React?", and "Can ChatGPT write JavaScript code?"

This article will teach us how to build a paraphrasing tool using ReactJs, ChatGPT Turbo, and TailwidCSS for styling.

Introduction to ChatGPT Turbo

ChatGPT Turbo is a recently introduced feature by OpenAI for ChatGPT Plus subscribers, which aims to provide superior responses at an accelerated pace.

Turbo mode is presently in its alpha phase, but we will use the gpt-3.5-turbo mode in this tutorial. Turbo mode is designed to deliver high-quality responses. It is an advanced version of ChatGPT's Default mode, requiring minimal computational resources for real-time applications.

Prerequisites

• Make sure to have Node.js and npm installed on your computer. If you don't, you can go here.

You can verify that you have Node.js installed by using the following terminal command:

        node -v && npm -v

• Install and configure Git on your PC. If you haven't, go here to install it.

• You should have a basic understanding of JavaScript/TypeScript

Project Setup and Installation

To quickly get started with the project setup and installation, clone this project on GitHub. Make sure you're on the starter branch using the following command:

git clone https://github.com/Olanetsoft/ai-paraphrasing-tool-with-nextjs.git

Next, launch the project locally after cloning it using the following command in your terminal.

Here's how you can install the project using npm:

cd ai-paraphrasing-tool-with-nextjs && npm i && npm start

How to Design the Layout for the Paraphrasing Tool

In the previous step, you cloned and installed the starter project we will be using in this article. It contains the default layout for the project we will build in this tutorial.

Navigate to http://localhost:3000/ in the browser. Here is what you should have after cloning and installing the project:

Navigate to the project directory and rename the .env.example to env. Or you can create a new .env file with the following command in the root directory of the project.

touch .env

Update the .env with the following:

NEXT_PUBLIC_ENV_VARIABLE_OPEN_AI_API_KEY=<Your-API-Key>

Replace <Your-API-Key> with your API key from OpenAI. Visit the OpenAI website, create an account for free, and generate an API key.

You should have something similar to what is shown below to implement the paraphrasing functionality in your application with ChapGPT Turbo.

How to Integrate ChatGPT Turbo

In this section, you will integrate ChatGPT Turbo and implement the paraphrasing functionality.

To start with, let's navigate to the paraphrase.ts file under the api directory and add the following snippet:

// Import necessary types from Next.js
import type { NextApiRequest, NextApiResponse } from "next";

// Check if required environment variable is set
if (!process.env.NEXT_PUBLIC_ENV_VARIABLE_OPEN_AI_API_KEY) {
  throw new Error("Missing env var from OpenAI");
}

// Define ChatGPTAgent type as a union of user and system
export type ChatGPTAgent = "user" | "system";

// Define ChatGPTMessage interface
interface ChatGPTMessage {
  role: ChatGPTAgent;
  content: string;
}

// Define promptPayload interface
interface promptPayload {
  model: string;
  messages: ChatGPTMessage[];
  temperature: number;
  max_tokens: number;
}

// Define async handler function
const handler = async (req: NextApiRequest, res: NextApiResponse) => {
  try {
    // Get prompt from request body
    const prompt = req.body.prompt;

    // Validate the prompt
    if (!prompt) {
      return new Response("No prompt in the request", { status: 400 });
    }

    // Define payload object to send to OpenAI API
    const payload: promptPayload = {
      model: "gpt-3.5-turbo",
      messages: [{ role: "user", content: prompt }],
      temperature: 1,
      max_tokens: 500,
    };

    // Send request to OpenAI API and wait for response
    const response = await fetch("https://api.openai.com/v1/chat/completions", {
      headers: {
        "Content-Type": "application/json",
        Authorization: `Bearer ${
          process.env.NEXT_PUBLIC_ENV_VARIABLE_OPEN_AI_API_KEY ?? ""
        }`,
      },
      method: "POST",
      body: JSON.stringify(payload),
    });

    // Parse response JSON and send it back in the response
    const data = await response.json();
    return res.json(data);
  } catch (error) {
    // Log any errors that occur during the request
    console.log("The Error: ", error);
  }
};

// Export the handler function as the default export
export default handler;

Let's go through what's going on in the code snippet above:

• Import the NextApiRequest and NextApiResponse types from Next.js.

• Check if NEXT_PUBLIC_ENV_VARIABLE_OPEN_AI_API_KEY, an environment variable, is set and throw an error if it's not.

• Define a type and two interfaces for ChatGPT agents and messages – ChatGPTAgent and ChatGPTMessage, respectively.

• Define an interface for the request payload to OpenAI API and an async handler function that takes a Next.js request and response as arguments.

• Get a prompt from the request body and validate it.

• Send a request to OpenAI API with the prompt and other parameters in the request payload.

• Parse and return the JSON response from the OpenAI API.

Next, we will consume the new endpoint we just implemented. Navigate to the index.vue file in the pages directory, and update it with the following code snippet:

//...

// Define a default function component called Home
export default function Home() {

  // Define three state variables for the original text, paraphrased text, and paraphrase mode
  const [originalText, setOriginalText] = useState<string>("");
  const [paraphrasedText, setParaphrasedText] = useState<string>("");
  const [paraphraseMode, setParaphraseMode] = useState<string>("Standard");

  // Define a ref for the text area element
  const textAreaRef = useRef(null);

  // Define a state variable for the loading state of the paraphrasing operation
  const [loading, setLoading] = useState<boolean>(false);

  // Construct a prompt string based on the original text and paraphrase mode
  const prompt = `Paraphrase "${originalText}" using ${paraphraseMode} mode. Do not add any additional word.`;

  // Define an async function to handle the paraphrasing operation
  const handleParaphrase = async (e: React.FormEvent) => {
    // Prevent form submission if original text is empty
    if (!originalText) {
      toast.error("Enter text to paraphrase!");
      return;
    }

    // Set the loading state and reset the paraphrased text
    setLoading(true);

    // Send a POST request to the "/api/paraphrase" API endpoint with the prompt in the request body
    const response = await fetch("/api/paraphrase", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        prompt,
      }),
    });

    // Parse the response as JSON
    const data = await response.json();

    // Set the paraphrased text to the first choice's message content in the response
    setParaphrasedText(data.choices[0].message.content);

    // Reset the loading state
    setLoading(false);
  };

  // Return the JSX for the Home component
  return (
    <>
    {/* //... */}
    </>
  );
}

In the code snippet above:

• Initialize three state variables using the useState hook: originalText, paraphrasedText, and paraphraseMode.

• Initialize a reference to a textarea element using the useRef hook and a loading state variable.

• Define handleParaphrase, a function that sends a POST request to /api/paraphrase with a prompt to paraphrase the text in the originalText state variable using the selected paraphraseMode.

The component returns a UI with a textarea element for inputting text to paraphrase, a select element for choosing the paraphrase mode, a button for initiating the paraphrasing process, and a div element for displaying the paraphrased text.

Update the Paraphrase button with the following code snippet to add the onClick event:

  <button
     onClick={handleParaphrase}
     //...
     >
       Paraphrase
 </button>

Let's test our application. You should have something similar to what you see below:

You can find the complete code in this GitHub repository here.

Conclusion

This article provides a step-by-step guide on how to build a paraphrasing tool using ReactJs, ChatGPT Turbo, and TailwindCSS for styling the application.

I'd love to connect with you via Twitter | LinkedIn | GitHub | Portfolio

See you in my next blog article. Take care!

But this implies that you have no control over the information relating to your identification, who has access to personally identifiable information (PII), and to what extent.

As a result, Decentralized Identity provides identity-related information that is self-controlled, private, and portable. Decentralized identifiers and attestations serve as the main building pieces.

Thanks to Ceramic's decentralized application databases, application developers can reuse data across applications and automatically make them interoperable.

In this article, you will learn about Decentralized Identity, Decentralized Identifiers, Ceramic network, and how to build a decentralized identity profile with Ethereum on Ceramic Networks.

Here's what we'll cover:

• What is a Decentralized Identity?
• What are Decentralized Identifiers?
• What is Ceramic Data Network?
• Why Ceramic Network?
• How to Build a Decentralized Identity Profile with Next.js
• Prerequisites
• Project Setup and Installation
• Install TailwindCSS in Next.js
• Authenticate Users
• Create/Update User Profile
• How to Test the Application
• Conclusion
• References

What is a Decentralized Identity?

Decentralized Identity is a digital identification concept where people, companies, and items are in charge of their data and can share it selectively without relying on a centralized authority.

This is made possible by using decentralized technologies, such as blockchain. These give people control and ownership over the information associated with their identities rather than having it stored on a central server or managed by a third party.

A decentralized identity is a self-owned, independent identity that enables trusted data exchange.

Blockchain-based digital wallets, such as those used to store and handle cryptocurrencies, serve as a practical illustration of decentralized identification. Users of these wallets control the private keys that provide them access to their money and can distribute their public keys to others to accept payments from them.

Users who manage their private keys can conduct transactions with others without relying on a central authority, such as a bank, and keep custody of their money.

What are Decentralized Identifiers?

Decentralized identifiers (DIDs) are issued, held, and controlled by individuals. Since they are kept on peer-to-peer networks or distributed ledgers (blockchains), they are globally unique, highly available, and cryptographically verifiable.

Decentralized identifiers can be associated with individuals, groups, or governmental entities.

DIDs are a vital component of the developing decentralized identity ecosystem. They are designed to offer a uniform process for developing, maintaining, and exchanging digital identities unaffiliated with any one company or piece of technology.

This implies that a DID can be maintained and controlled by the person or entity to which it belongs and utilized across various systems and applications.

In recent years, smart contract platforms like Ethereum have demonstrated the utility of decentralized applications (dApps) that can be assembled like blocks to create new applications. This is especially evident in tokens that build upon one another, in DeFi protocols that use one another, and so on.

Thanks to Ceramic, data on the internet can now have the same kind of composability. Any data type, including profiles, social connections, blog posts, identities, reputations, and so on., can be included. You will learn more about Ceramic Network in the section below.

What is Ceramic Network?

Ceramic is a public, permissionless, open-source protocol that offers computation, state transitions, and consensus for all data structures on the decentralized web.

With the help of stream processing provided by Ceramic, developers can build apps that are strong, safe, trustless, and censorship-resistant using dynamic information – without using unreliable database servers.

Ceramic stores all content in smart documents, which are append-only IPFS logs. Before being anchored in a blockchain for consensus, each commit is verified by a decentralized identification (DID).

All papers in Ceramic are openly discoverable and can be referenced by other documents or queried by any other network user because the system is entirely peer-to-peer.

Why Ceramic Network?

Data interoperability is one of Ceramic Network's key benefits. This platform features a flexible and modular data schema that enables the decentralized and interoperable sharing and combining of various sorts of data.

Developers now have an easier time creating decentralized identification solutions that can be integrated with other programs and systems.

The infrastructure of Ceramic Network is scalable, fault-tolerant, decentralized, and highly available. This enables developers to create robust decentralized identity systems available to users everywhere.

Ceramic Network also provides a set of developer tools and libraries, making it simple to create decentralized identity apps and services. These tools include SDKs, APIs, developer guides, and an expanding ecosystem of open-source tools and libraries.

Now that you have learnt the theories behind decentralized identity, let's take a practical deep dive and get your hands dirty.

How to Build a Decentralized Identity Profile with Next.js

Prerequisites

To go through this tutorial, you'll need some experience with JavaScript and React.js. Experience with Next.js isn't a requirement, but it's nice to have.

Make sure to have Node.js or npm installed on your computer. If you don't, click here.

Also, it'll be very useful to have a basic understanding of blockchain technology and Web3 concepts.

Project Setup and Installation

Navigate to the terminal and cd into any directory of your choice. Then run the following commands:

mkdir decentralized-identity-project
cd decentralized-identity-project
npx create-next-app@latest .

Accept the following options:

Install the @self.id/react and @self.id/web packages using the code snippet below:

npm install @self.id/web @self.id/react

Next, start the app using the following command:

npm run dev

You should have something similar to what is shown below: the default boilerplate layout for Next.js 13.

Install TailwindCSS in Next.js

In this section, you will set up Tailwind CSS in a Next.js project. Install tailwindcss and its peer dependencies via npm, and then run the init command to generate both tailwind.config.js and postcss.config.js.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Navigate to the tailwind.config.js file, and add the paths to your template files with the following code snippet.

/** @type {import('tailwindcss').Config} */

module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",

    // Or if using `src` directory:
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Delete all the CSS styles inside globals.css . Add the @tailwind directives for each of Tailwind’s layers to your globals.css file.

@tailwind base;
@tailwind components;
@tailwind utilities;

Configure the Provider Component

The Provider component must be placed at the top of the application tree to use the hooks detailed below. You can use it to supply an initial state as well as a specific configuration for the Self.ID clients and queries.

Update the _app.js file under the pages folder with the following code snippet:

// Import the Provider component from the "@self.id/react" library.
import { Provider } from "@self.id/react";

// Import the "globals.css" file from the "@/styles" directory.
import "@/styles/globals.css";

// Define the App component as a default export.
export default function App({ Component, pageProps }) {

  // Render the Provider component, which provides authentication and authorization functionality to the application.
  // Pass a client prop to the Provider component, which configures the Ceramic testnet with the "testnet-clay" value.
  // Render the Component with its props inside the Provider component, which allows the application to access the authentication and authorization context.

  return (
    <Provider client={{ ceramic: "testnet-clay" }}>
      <Component {...pageProps} />
    </Provider>
  );
}

In the code snippet above, we:

• Imported a context provider component and global CSS styles and then defined an App component that wraps the entire application with the context provider.
• Configured the context provider with a Ceramic testnet client, which allows the application to access authentication and authorization functionality.
• Finally, the Component is rendered with its props inside the context provider, allowing the application to access the authentication and authorization context.

Build the Layout

Next, navigate to the index.js file under the pages folder and update it with the following code:

// Import the Head component from the "next/head" module.
import Head from "next/head";

// Import the useViewerConnection and useViewerRecord hooks from the "@self.id/react" library.
import { useViewerConnection, useViewerRecord } from "@self.id/react";

// Import the EthereumAuthProvider component from the "@self.id/web" library.
import { EthereumAuthProvider } from "@self.id/web";

// Import the useState hook from the "react" module.
import { useEffect, useState } from "react";


export default function Home() {

  return (
    <>
      <Head>
        <title>
          Decentralized Identity: Build a Profile with NextJs, Ethereum & Ceramic Network
        </title>
        <meta name="description" content="Generated by create next app" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main className="min-h-screen bg-gray-200">
        <div className="bg-gray-600 py-4 px-4 sm:px-6 lg:px-8 lg:py-6 shadow-lg text-white">
          <div className="container mx-auto px-6 md:px-0">
            <h1 className="text-2xl font-bold text-white text-center">
              Decentralized Identity: Build a Profile with NextJs, Ethereum & Ceramic Network
            </h1>
          </div>
        </div>

        <div className="flex items-center justify-center pt-20 font-sans overflow-hidden">
          <div className="max-w-md w-full mx-auto">
            <div className="bg-white p-10 rounded-lg shadow-lg">
              <form>
                <div className="mb-6">
                  <label
                    className="block text-gray-700 font-bold mb-2"
                    htmlFor="name"
                  >
                    Name
                  </label>
                  <input
                    className="border border-gray-300 p-2 w-full rounded-lg"
                    type="text"
                    name="name"
                    id="name"
                    placeholder="Your name"
                  />
                </div>
                <div className="mb-6">
                  <label
                    className="block text-gray-700 font-bold mb-2"
                    htmlFor="bio"
                  >
                    Bio
                  </label>
                  <textarea
                    className="border border-gray-300 p-2 w-full rounded-lg"
                    name="bio"
                    id="bio"
                    rows="5"
                    placeholder="Write something about yourself"
                  ></textarea>
                </div>
                <div className="mb-6">
                  <label
                    className="block text-gray-700 font-bold mb-2"
                    htmlFor="username"
                  >
                    Username
                  </label>
                  <input
                    className="border border-gray-300 p-2 w-full rounded-lg"
                    type="text"
                    name="username"
                    id="username"
                    placeholder="Your username"
                  />
                </div>
                <div className="flex items-center justify-between">
                  <button
                    className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
                    type="submit"
                  >
                    Update Profile
                  </button>
                  <button
                    className="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded"
                    type="button"
                  >
                    Connect Wallet
                  </button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </main>
    </>
  );
}

To start the application, run the following command and navigate to localhost:3000 on your browser; you should have something similar to what is shown below:

How to Authenticate Users

In this section, you will implement user authentication to allow users to connect their wallets and interact with the application.

Update the index.js with the following code:

//..

export default function Home() {

  // State variables for connection, connect function, and disconnect function
  const [connection, connect, disconnect] = useViewerConnection();


  const [isWindow, setIsWindow] = useState(null);


  // State variable for viewer's basic profile data
  const record = useViewerRecord("basicProfile");

  // Function to create EthereumAuthProvider using window.ethereum provider
  async function createAuthProvider() {
    const addresses = await window.ethereum.request({
      method: "eth_requestAccounts",
    });
    return new EthereumAuthProvider(window.ethereum, addresses[0]);
  }

  // Function to connect to viewer's account using created authProvider
  async function connectAccount() {
    const authProvider = await createAuthProvider();
    await connect(authProvider);
  }

  // Rendered JSX code
  return (
    <>
      {/* ... */}
      <div className="flex items-center justify-between">
        {/* ... */}

        {/* Conditionally render a button to connect/disconnect user */}
        {connection.status === "connected" ? (
          <button
            className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded"
            type="button"
            onClick={() => disconnect()}
          >
            Disconnect
          </button>
        ) : isWindow && "ethereum" in window ? (
          <button
            className="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded"
            type="button"
            disabled={connection.status === "connecting" || !record}
            onClick={() => {
              connectAccount();
            }}
          >
            Connect Wallet
          </button>
        ) : (
          <p className="text-red-500 text-sm italic mt-2 text-center w-full">
            An injected Ethereum provider such as{" "}
            <a href="https://metamask.io/">MetaMask</a> is needed to
            authenticate.
          </p>
        )}
      </div>
    </>
  )
}

In the code snippet above,

• The useViewerConnection hook is used to set up a state variable for the user's connection status, connect and disconnect.
• isWindow to set the initial state of the the window to avoid React hydration error
• The useViewerRecord hook is used to retrieve the user's basic profile data.
• The createAuthProvider function creates an EthereumAuthProvider object using the window.ethereum provider.
• The connectAccount function calls createAuthProvider and connects to the user's account using connect(authProvider).
• The JSX code conditionally renders a button based on the user's connection status and the availability of an ethereum provider in the window object.
• If the user is already connected, the button will enable them to disconnect. If the user is not yet connected and an ethereum provider is available, the button will enable them to connect. But if the user is not connected and no ethereum provider is available, a message will be displayed to inform the user that an injected Ethereum provider like MetaMask is required to authenticate.

Testing out the authentication functionality, you should have something similar to what is shown below:

How to Create or Update a User Profile

In the previous section, you learned how to successfully authenticate users. Next, you will implement functionality to create and update an authenticated user with the following code snippet:

pages/index.js

//...


export default function Home() {
// Use the useState hook to create state variables and functions to update them
  const [name, setName] = useState("");
  const [bio, setBio] = useState("");
  const [username, setUsername] = useState("");

  //...

// Define an asynchronous function called updateProfile to update the profile information
  async function updateProfile() {
    // If any of the required fields are empty, return early and do not update
     if (!name || !bio || !username) {
       return;
     }

     // Use the merge method to update the record with the new information
     await record.merge({
       name,
       bio,
       username,
     });
   }

  // Render the component's UI
  return (
    <>

    {/* ... */}

    <div className="flex items-center justify-center pt-20 font-sans overflow-hidden">
          <div className="max-w-md w-full mx-auto">
            <div className="bg-white p-10 rounded-lg shadow-lg">
              <form>
               {/* ... */}
              </form>
            </div>
            {connection.status === "connected" && record && record.content ? (
              <div className="flex flex-col items-center mt-8">
                <h2 className="text-3xl font-bold mb-6 text-gray-900">
                  Profile Information
                </h2>
                <div className="w-full max-w-md bg-white p-8 rounded-lg shadow-lg">
                  <p className="mb-4">
                    <span className="font-bold text-gray-700 mr-2 text-lg">
                      Name:
                    </span>{" "}
                    <span id="nameOutput" className="text-lg">
                      {record.content.name || "No name set"}
                    </span>
                  </p>

                  <p className="mb-4">
                    <span className="font-bold text-gray-700 mr-2 text-lg">
                      Bio:
                    </span>{" "}
                    <span id="bioOutput" className="text-lg">
                      {record.content.bio || "No bio set"}
                    </span>
                  </p>
                  <p>
                    <span className="font-bold text-gray-700 mr-2 text-lg">
                      Username:
                    </span>{" "}
                    <span id="usernameOutput" className="text-lg">
                      {record.content.username || "No username set"}
                    </span>
                  </p>
                </div>
              </div>
            ) : (
              <div className="mt-8">
                <div className="bg-white p-8 rounded-lg shadow-lg">
                  <p>No profile found.</p>
                </div>
              </div>
            )}

          </div>
        </div>
    </>
  ) 
}

In the code above,

• The component uses the useState hook to manage the state of three variables: name, bio, and username.
• There's an async function called updateProfile that is responsible for merging the current state of the variables into a record.
• If any of the variables is empty, the updateProfile function returns without updating the record.
• There are three conditional statements that render a different UI based on whether a record is found or not.
• The first conditional statement checks whether the record is still loading, and if it is, it displays a Loading... message.
• The second conditional statement checks whether there's no record content and the connection status is connected. If this is true, it displays a No profile found. message.

The third conditional statement checks whether the record content exists. If it does, it displays the profile information, which includes the user's name, bio, and username.

You are almost there. In the form tag, update the name, bio and username input field with the following code:

<div className="mb-6">
  <label
    className="block text-gray-700 font-bold mb-2"
    htmlFor="name"
  >
    Name
  </label>
  <input
    //...
    onChange={(e) => {
      setName(e.target.value);
    }}
  />
</div>
<div className="mb-6">
  <label
    className="block text-gray-700 font-bold mb-2"
    htmlFor="bio"
  >
    Bio
  </label>
  <textarea
    //...
    onChange={(e) => {
      setBio(e.target.value);
    }}
  ></textarea>
</div>
<div className="mb-6">
  <label
    className="block text-gray-700 font-bold mb-2"
    htmlFor="username"
  >
    Username
  </label>
  <input
    //...
    onChange={(e) => {
      setUsername(e.target.value);
    }}
  />
</div>

In the code snippet above, setName, setBio, and setUsername are functions provided by the useState hook that update the state of name, bio, or username.

Next, the Update Profile button.

//...

 <button
     className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
     type="submit"
     disabled={!record.isMutable || record.isMutating}
     onClick={() => updateProfile()}
 >
    {record.isMutating ? "Updating..." : "Update Profile"}
</button>

//..

In the code snippet above, the button is disabled when the record is not mutable or is currently mutating.

When the button is clicked, it calls the updateProfile function, which is responsible for updating the user's profile information. If the record mutates, the button will display Updating.... Otherwise, it will display Update Profile.

You can test out the application similar to what is shown below.

Kindly find the complete code on GitHub repository here.

Conclusion

In this post, you learn about Decentralized Identity, Decentralized Identifiers, Ceramic networks, why Ceramic network is useful, and how to build a decentralized identity profile with Ethereum on Ceramic Networks.

References

• Ceramic Network
• Ceramic Documentation
• Decentralized Identity - Ethereum

I'd love to connect with you at Twitter | LinkedIn | GitHub | Portfolio

See you in my next article. Take care!

Cropping always includes removing a portion of the original image, resulting in the loss of some pixels.

This post will teach you how to upload, crop, and resize images in the browser.

I built this project in a Codesandbox. To get started quickly, fork the Codesandbox or run the project.

Prerequisites

To follow along with this tutorial, you should have some JavaScript and React.js experience. Experience with Next.js isn't a requirement, but it's nice to have.

You also need a Cloudinary account to store the media files.

Cloudinary offers a safe and complete API for quickly and efficiently uploading media files from the server, browser, or a mobile application.

Finally you'll need Next.js. It's an open-source React-based front-end development web framework that allows server-side rendering and the generation of static websites and applications.

Project Setup and Installation

Use the npx create-next-app command to scaffold a new project in a directory of your choice to create a new project.

You can do this with the command:

npx create-next-app <project name>

To install the dependencies, use these commands:

cd <project name> 
npm install cloudinary-react

Once the app is created, and the dependencies are installed, you'll see a message with instructions for navigating to your site and running it locally.

You can do this with the command:

npm run dev

Next.js will start a hot-reloading development environment accessible by default at http://localhost:3000.

How to Build the User Interface

For our project, we'll want the user interface to upload, crop, and resize images on the home page. We will do this by updating the pages/index.js file to a component:

import React, { useState } from "react";
import Head from "next/head";

const IndexPage = () => {

  return (
    <>
      <div className="main">
        <div className="splitdiv" id="leftdiv">
          <h1 className="main-h1">
            How to Crop, Resize & Upload Image in the Browser using Cloudinary
            Transformation
          </h1>
          <div id="leftdivcard">
            <h2 className="main-h2">Resize Options</h2>
          </div>

          <button type="button" id="leftbutton">
            Upload Image
          </button>
        </div>

        <div className="splitdiv" id="rightdiv">
        <h1> Image will appear here</h1>
        </div>
      </div>
    </>
  );
};
export default IndexPage;

The current user interface doesn't look that great, though. We'll add some styling with CSS in the style.css file like this:

@import url("https://fonts.googleapis.com/css?family=Acme|Lobster");

/* This allow me to have the full width of the page without the initial padding/margin*/
body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  font-family: Acme;
  min-width: 700px;
}

.splitdiv {
  height: 100%;
  width: 50%;
}

/* This part contains all of the left side of the screen */
/* ----------------------------------------- */
#leftdiv {
  float: left;
  background-color: #fafafa;
  height: 932px;
}

#leftdivcard {
  margin: 0 auto;
  width: 50%;
  background-color: white;
  margin-top: 25vh;
  transform: translateY(-50%);
  box-shadow: 10px 10px 1px 0px rgba(78, 205, 196, 0.2);
  border-radius: 10px;
}

#leftbutton {
  background-color: #512cf3;
  border-radius: 5px;
  color: #fafafa;
  margin-left: 350px;
}

/* ----------------------------------------- */

/* This part contains all of the right side of the screen */
/* ----------------------------------------- */
#rightdiv {
  float: right;
  background-color: #cbcfcf;
  height: 932px;
}

#rightdivcard {
  margin: 0 auto;
  width: 50%;
  margin-top: 50vh;
  transform: translateY(-50%);
  background-position: bottom;
  background-size: 20px 2px;
  background-repeat: repeat-x;
}

/* ----------------------------------------- */

/* Basic styling */
/* ----------------------------------------- */

button {
  outline: none !important;
  font-family: Lobster;
  margin-bottom: 15px;
  border: none;
  font-size: 20px;
  padding: 8px;
  padding-left: 20px;
  padding-right: 20px;
  margin-top: -15px;
  cursor: pointer;
}

h1 {
  font-family: Lobster;
  color: #512cf3;
  text-align: center;
  font-size: 40px;
}

input {
  font-family: Acme;
  font-size: 16px;
  font-family: 15px;
}

input {
  width: 30%;
  height: 20px;
  padding: 16px;
  margin-left: 1%;
  margin-right: 2%;
  margin-top: 15px;
  margin-bottom: 10px;
  display: inline-block;
  border: none;
}

input:focus {
  outline: none !important;
  border: 1px solid #512cf3;
  box-shadow: 0 0 1px round #719ece;
}

/* ----------------------------------------- */

.main {
  height: 100%;
  width: 100%;
  display: inline-block;
}

.main-h2 {
  padding-top: 20px;
  text-align: center;
}

.body-h1 {
  padding-top: 20px;
  text-align: center;
  color: white;
}

.inner-p {
  color: white;
  text-align: center;
}

.main-align {
  text-align: center;
}

.form-control {
  margin-left: 15px;
}

Our application should now look like this on http://localhost:3000/:

How to Create the Image Upload Widget

Cloudinary's upload widget lets us upload media assets from multiple sources, including Dropbox, Facebook, Instagram, and images that were taken right from our device's camera. We'll use the upload widget in this project.

Create a free cloudinary account to obtain your cloud name and upload_preset.

upload_presets allows us to define a set of asset upload choices centrally rather than providing them in each upload call. A Cloudinary cloud name is a unique identifier associated with your Cloudinary account.

First, from a content delivery network (CDN), we will add the Cloudinary widget's JavaScript file in our index.js located in pages/index.js. We will include this file using next/head to include all meta tags, which lets us add data to the Head portion of our HTML document in React.

Next, in the pages/index.js file, we'll import Head from next/head and add the script file.

import React, { useState } from "react";
import Head from "next/head";

const IndexPage = () => {

  return (
    <>
      <Head>
        <title>How to Crop and Resize Image in the Browser</title>
        <link rel="icon" href="/favicon.ico" />
        <meta charSet="utf-8" />
        <script
          src="https://widget.Cloudinary.com/v2.0/global/all.js"
          type="text/javascript"
        ></script>
      </Head>
      <div className="main">
          [...]
      </div>
    </>
  );
};
export default IndexPage;

In the pages/index.js file, we will create an instance of the widget in a method triggered when clicking a button and a state variable imagePublicId..

import React, { useState } from "react";
import Head from "next/head";

const IndexPage = () => {
  const [imagePublicId, setImagePublicId] = useState("");

  const openWidget = () => {
    // create the widget
    const widget = window.cloudinary.createUploadWidget(
      {
        cloudName: "olanetsoft",
        uploadPreset: "w42epls7"
      },
      (error, result) => {
        if (
          result.event === "success" &&
          result.info.resource_type === "image"
        ) {
          console.log(result.info);
          setImagePublicId(result.info.public_id);
        }
      }
    );
    widget.open(); // open up the widget after creation
  };

  return (
    <>
      //...
    </>
  );
};
export default IndexPage;

The widget requires our Cloudinary cloud_name and uploadPreset. The createWidget() function creates a new upload widget. On successfully uploading an image, we assign the public_id of the asset to the relevant state variable.

To get our cloudname and uploadPreset, we follow the steps below:

You can get the cloud name from your Cloudinary dashboard, as shown below.

You can find an upload preset in the Upload tab of your Cloudinary settings page. You access this by clicking on the gear icon in the top right corner of the dashboard page.

Scroll down to the bottom of the page to the upload presets section, where you'll see your upload preset or the option to create one if you don't have any.

We'll proceed to call the openWidget function in the onClick handler of our image upload button, as shown below:

//...

const IndexPage = () => {
//...
  return (
    <>
     //....
      <div className="main">
        <div className="splitdiv" id="leftdiv">
          //...
          <div id="leftdivcard">
            <h2 className="main-h2">Resize Options</h2>
             //...
            </div>

          <button type="button" id="leftbutton" onClick={openWidget}>
            Upload Image
          </button>
        </div>

        <div className="splitdiv" id="rightdiv">
        <h1> Image will appear here</h1>
        </div>
      </div>
    </>
  );
};
export default IndexPage;

When we open our app in the browser and click the Upload Image button, we should see something like this:

How to Implement Custom Transformation Functions

We need to create a component that handles the transformation depending on the props passed to it. We will create a components/ directory in the root folder. Inside it, we will create a file called image.js with the following content:

import { CloudinaryContext, Transformation, Image } from "cloudinary-react";

const TransformImage = ({ crop, image, width, height }) => {
  return (
    <CloudinaryContext cloudName="olanetsoft">
      <Image publicId={image}>
        <Transformation width={width} height={height} crop={crop} />
      </Image>
    </CloudinaryContext>
  );
};

export default TransformImage;

In the code snippet above, we imported CloudinaryContext, a wrapper Cloudinary component used to manage shared information across all its children Cloudinary components. The rendered TransformImage component takes data of the image transformation as props.

The above code block will render the uploaded image when we import it into pages/index.js:

//...
import TransformImage from "../components/image";

const IndexPage = () => {
  const [imagePublicId, setImagePublicId] = useState("");
  const [alt, setAlt] = useState("");
  const [crop, setCrop] = useState("scale");
  const [height, setHeight] = useState(200);
  const [width, setWidth] = useState(200);

  return (
    <>
     //...
      <div className="main">
        <div className="splitdiv" id="leftdiv">
          //...
       </div>
        <div className="splitdiv" id="rightdiv">
          <h1> Image will appear here</h1>
          <div id="rightdivcard">
            {imagePublicId ? (
              <TransformImage
                crop={crop}
                image={imagePublicId}
                width={width}
                height={height}
              />
            ) : (
              <h1> Image will appear here</h1>
            )}
          </div>
        </div>
      </div>
    </>
  );
};
export default IndexPage;

Next, we will add the Resize Options radio button so that we can select different resize and crop options with the following code snippet:

//...

const IndexPage = () => {
//...

  return (
    <>
    //...
      <div className="main">
        <div className="splitdiv" id="leftdiv">
          //...
          <div id="leftdivcard">
            <h2 className="main-h2">Resize Options</h2>

          <label className="form-control">Select Crop Type</label>
            <div>
              <label className="form-control">Scale</label>
              <input
                type="radio"
                value="scale"
                name="crop"
                onChange={(event) => setCrop(event.target.value)}
              />
            </div>
            <div>
              <label className="form-control">Crop</label>
              <input
                type="radio"
                value="crop"
                name="crop"
                onChange={(event) => setCrop(event.target.value)}
              />
            </div>
            <input
              type="number"
              placeholder="Height"
              onChange={(event) => setHeight(event.target.value)}
            />
            <input
              type="number"
              placeholder="Width"
              onChange={(event) => setWidth(event.target.value)}
            />
          </div>

          <button type="button" id="leftbutton" onClick={openWidget}>
            Upload Image
          </button>
        </div>

        <div className="splitdiv" id="rightdiv">
          //...
        </div>
      </div>
    </>
  );
};
export default IndexPage;

In the code snippet above, we:

• Added crop type and also width and height options
• Added an onChange property to keep track of the changes in the height and width input field, respectively

Our application's final output should look similar to what we have below:

Here's the GitHub Repository for the project if you want to have a look at the full code: https://github.com/Olanetsoft/how-to-upload-crop-and-resize-images-in-the-browser-in-next.js

Conclusion

This post shows how to upload, crop, and resize images in the browser in Next.js.

Resources

You may find these resources helpful.

• Cloudinary transformation URL reference
• Cloudinary Image Transformation

A serverless database is a cloud computing solution that lets you distribute and flexibly manage your resources.

In this tutorial, we'll build a full-stack application with Supabase, React, and TailwindCSS in Next.js.

Outline

• What is Supabase?
• Why Should You Use Supabase?
• How to Set Up a Supabase Project
• How to Set Up Our Frontend Application
• How to Build Our Frontend Application Layout with the Supabase Client
• How to Build Our Application
• Conclusion
• Resources

Prerequisites

• Practical React.js experience
• A basic grasp of async functions
• A GitHub account

What Is Supabase?

Supabase is a PostgreSQL-based open-source serverless database that allows you to build a real-time backend for your application in a few minutes.

PostgreSQL is an object-relational database system that has been actively developed for more than 25 years and is known for its dependability and performance.

Supabase includes several out-of-the-box services/functionalities that are designed to make your life easier. These include the following, but are not limited to:

• Authentication
• Realtime Database
• UI components
• RLS (Row Level Security)

Why Should You Use Supabase?

• Supabase takes care of the scaling (even though it uses an SQL database).
• Although Supabase is based on PostgreSQL, data migration is easy.
• You can run complicated queries or text searches, unlike with Firebase.

Step 1: How to Set Up a Supabase Project

This section will build our project and integrate Supabase into our application.

Sign up for a Supabase account and create a project

To get started, let's sign up for a Supabase account here. To continue, you'll need a GitHub account. You can register here if you don't yet have an account on GitHub.

After we've logged in, we're redirected to our dashboard, as shown in the screenshot above.

Next, we can now click on the New Project Button to create a new project for our demo application, as shown below:

Then we'll see the screen below, which shows us that the project is now being built.

Next, we'll need to create our database by clicking the database icon shown on the sidebar. We also need to click the plus icon shown on the top right of the screen to make each column we need, as shown below.

How to create the columns required for our application

For this todo project, we will be creating five columns:

• Name: This is the task's name with the type of text. Activity: This is the task's activity related to the type of text.
• StartDate: This is when the task is expected to start with the type of date.
• EndDate: This is the date that the task is expected to end with the type of date.

After creating all these fields, we should have something similar to what we have below.

We have created our project and created individual columns. We will proceed to the next step by setting up our frontend application in the next section.

Step 2: Setting Up Our Frontend Application

To create a new project, we use the npx create-next-app -e with-tailwindcss . command to scaffold a new project in a directory of our choice.

The command specified above sets up a TailwindCSS project in Next.js.

TailwindCSS is a CSS framework containing a lot of classes to help us style our website.

We use the following commands to install the dependencies:

    cd <project name> 
    yarn add @supabase/supabase-js

We'll see a message with instructions for browsing our site and running it locally after the app is created and the dependencies have been installed. Using the below command, we can execute this.

    npm run dev

Next.js will start a hot-reloading development environment accessible by default at http://localhost:3000.

We should see something similar to what we have below.

Step 3: Building Our Frontend Application Layout with the Supabase Client

We can now build our front-end application since we have completed our front-end setup.

Let's update our pages/index.js file to include the following code:

import Head from "next/head";

export default function Home() {
  return (
    <div className="flex flex-col items-center justify-center py-2">
      <div>
        <Head>
          <title>Supabase and NextJs Demo</title>
          <link rel="icon" href="/favicon.ico" />
        </Head>

        <main className="flex flex-col items-center justify-center w-full flex-1 px-20 text-center">
          <h1 className="text-4xl font-bold mt-20">
            <a className="text-blue-600" href="/">
              Full Stack Application With Tailwind CSS and Supabase in NextJs
            </a>
          </h1>

          <div className="flex flex-wrap items-center justify-around max-w-4xl mt-6 sm:w-full">
            <div className="p-8 mt-6 border w-96 rounded-xl hover:text-blue-600 focus:text-blue-600">
              <div className="w-full max-w-sm">
                <form className="bg-white rounded px-8 pt-6 pb-8 mb-4">
                  <div className="mb-4">
                    <label
                      className="block text-gray-700 text-sm font-bold mb-2"
                      htmlFor="taskName"
                    >
                      Task Name
                    </label>
                    <input
                      className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                      id="taskName"
                      type="text"
                    />
                  </div>
                  <div className="mb-4">
                    <label
                      className="block text-gray-700 text-sm font-bold mb-2"
                      htmlFor="taskActivity"
                    >
                      Task Activity
                    </label>

                    <textarea
                      className="form-textarea mt-1 block shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                      rows="3"
                      placeholder="Task Activity"
                    ></textarea>
                  </div>

                  <div className="mb-4">
                    <label
                      className="block text-gray-700 text-sm font-bold mb-2"
                      htmlFor="startDate"
                    >
                      Task Start Date
                    </label>
                    <input
                      className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                      id="startDate"
                      type="date"
                    />
                  </div>
                  <div className="mb-4">
                    <label
                      className="block text-gray-700 text-sm font-bold mb-2"
                      htmlFor="endDate"
                    >
                      Task End Date
                    </label>
                    <input
                      className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                      id="endDate"
                      type="date"
                    />
                  </div>
                  <div className="flex items-center justify-between">
                    <button
                      className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
                      type="button"
                    >
                      Add Task
                    </button>
                  </div>
                </form>
              </div>
            </div>

            <div className="p-2 mt-6 w-96 rounded-xl focus:text-blue-600">
              <table className="shadow-lg bg-white">
                <tbody>
                  <tr>
                    <th className="bg-blue-400 border text-left px-4 py-4">
                      S/N
                    </th>
                    <th className="bg-blue-400 border text-left px-8 py-4">
                      Name
                    </th>
                    <th className="bg-blue-400 border text-left px-8 py-4">
                      Activity
                    </th>
                    <th className="bg-blue-400 border text-left px-14 py-4">
                      Start Date
                    </th>
                    <th className="bg-blue-400 border text-left px-16 py-4">
                      End Date
                    </th>

                    <th className="bg-blue-400 border text-left px-4 py-4">
                      Action
                    </th>
                  </tr>
                  <tr>
                    <td className="border px-4 py-4"></td>
                    <td className="border px-4 py-4"></td>
                    <td className="border px-8 py-4"></td>
                    <td className="border px-8 py-4"></td>
                    <td className="border px-8 py-4"></td>
                    <td className="border px-8 py-4">
                      {" "}
                      <button
                        className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
                        type="button"
                      >
                        Delete
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </main>
      </div>
    </div>
  );
}

We added a layout for our application in the code snippet above, and we styled it with TailwindCSS.

We should have something similar to what we have below if we visit our application in the browser.

We'll use the Supabase package to link our application to our database. Using environment variables is the best approach for us to configure this.

You can set environment variables in Next.js by creating a file called .env in the project's root directory and saving them there.

It's best to precede a variable with NEXT_PUBLIC_ to expose it to the browser.

Add the following configuration to a file called .env in the project's root directory:

NEXT_PUBLIC_SUPABASE_URL=https://app-id.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-public-api-key

We can find the values of our API URL and API Key in the Supabase dashboard settings, as shown below:

Next, we will create a file called client.js in the root of the project and then add the following code:

import { createClient } from "@supabase/supabase-js";

export const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL,
  process.env.NEXT_PUBLIC_SUPABASE_TOKEN
);

After importing it, we can now utilize the Supabase instance everywhere in our app.

Step 4: Building our Application

Let's update our pages/index.js file so that we can add a new task using the Supabase instance with the following code:

// ...
import { useState, useEffect } from "react";
import { supabase } from "../client";

export default function Home() {

  // Declare a new state variable to store task details
  const [task, setTask] = useState({
    Name: "",
    Activity: "",
    StartDate: "",
    EndDate: "",
  });

  const { Name, Activity, StartDate, EndDate } = task;

  // Create a function that handles the new task creation
  async function addTask() {
    await supabase
      .from("Task") // Select the Table
      .insert([
        {
          Name,
          Activity,
          StartDate,
          EndDate,
        },
      ]) // Insert the new task
      .single();
    setTask({
      Name: "",
      Activity: "",
      StartDate: "",
      EndDate: "",
    }); // Reset the task details
  }

  return (
    <div className="flex flex-col items-center justify-center py-2">
      <div>
       // ...
        <main className="flex flex-col items-center justify-center w-full flex-1 px-20 text-center">
          <h1 className="text-4xl font-bold mt-20">
            <a className="text-blue-600" href="/">
              Full Stack Application With Tailwind CSS and Supabase in NextJs
            </a>
          </h1>

          <div className="flex flex-wrap items-center justify-around max-w-4xl mt-6 sm:w-full">
            <div className="p-8 mt-6 border w-96 rounded-xl hover:text-blue-600 focus:text-blue-600">
              <div className="w-full max-w-sm">
                <form className="bg-white rounded px-8 pt-6 pb-8 mb-4">
                  <div className="mb-4">
                    <label
                      className="block text-gray-700 text-sm font-bold mb-2"
                      htmlFor="taskName"
                    >
                      Task Name
                    </label>
                    <input
                      className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                      id="taskName"
                      type="text"
                      value={Name.toString()}
                      onChange={(e) =>
                        setTask({ ...task, Name: e.target.value })
                      }
                    />
                  </div>
                  <div className="mb-4">
                    <label
                      className="block text-gray-700 text-sm font-bold mb-2"
                      htmlFor="taskActivity"
                    >
                      Task Activity
                    </label>

                    <textarea
                      className="form-textarea mt-1 block shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                      rows="3"
                      placeholder="Task Activity"
                      value={Activity.toString()}
                      onChange={(e) =>
                        setTask({ ...task, Activity: e.target.value })
                      }
                    ></textarea>
                  </div>

                  <div className="mb-4">
                    <label
                      className="block text-gray-700 text-sm font-bold mb-2"
                      htmlFor="startDate"
                    >
                      Task Start Date
                    </label>
                    <input
                      className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                      id="startDate"
                      type="date"
                      value={StartDate.toString()}
                      onChange={(e) =>
                        setTask({ ...task, StartDate: e.target.value })
                      }
                    />
                  </div>
                  <div className="mb-4">
                    <label
                      className="block text-gray-700 text-sm font-bold mb-2"
                      htmlFor="endDate"
                    >
                      Task End Date
                    </label>
                    <input
                      className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                      id="endDate"
                      type="date"
                      value={EndDate.toString()}
                      onChange={(e) =>
                        setTask({ ...task, EndDate: e.target.value })
                      }
                    />
                  </div>
                  <div className="flex items-center justify-between">
                    <button
                      className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
                      type="button"
                      onClick={addTask} // Call the addTask Function
                    >
                      Add Task
                    </button>
                  </div>
                </form>
              </div>
            </div>

            <div className="p-2 mt-6 w-96 rounded-xl focus:text-blue-600">
              // ...
            </div>
          </div>
        </main>
      </div>
    </div>
  );
}

In the code snippet above, we created a function called AddTask to add a new task using the Supabase instance. We also referenced it in the onClick attribute of our AddTask Button.

Next, after testing our application, you might notice that nothing happens after entering the task details and clicking on the button Add Task. This is because we have not handled task retrieval from our database.

Let's update our pages/index.js file to be able to retrieve all the tasks from our database as shown below:

// ...
export default function Home() {
  const [loading, setLoading] = useState(true);
  const [tasks, setTasks] = useState([]);

  // ...

  async function getTasks() {
    const { data } = await supabase.from("Task").select(); // Select all the tasks from the Task Table
    setTasks(data);
    setLoading(false);
  }

  // Run the getTasks function when the component is mounted
  useEffect(() => {
    getTasks();
  }, []);

  // Check if loading
  if (loading)
    return (
      <div className="flex justify-center items-center">
        <div
          className="
      animate-spin
      rounded-full
      h-32
      w-32
      border-t-2 border-b-2 border-blue-500 mt-36
    "
        ></div>
      </div>
    );
  return (
    <div className="flex flex-col items-center justify-center py-2">
      <div>
       // ...
        <main className="flex flex-col items-center justify-center w-full flex-1 px-20 text-center">
          <h1 className="text-4xl font-bold mt-20">
            <a className="text-blue-600" href="/">
              Full Stack Application With Tailwind CSS and Supabase in NextJs
            </a>
          </h1>

          <div className="flex flex-wrap items-center justify-around max-w-4xl mt-6 sm:w-full">
            <div className="p-8 mt-6 border w-96 rounded-xl hover:text-blue-600 focus:text-blue-600">
              // ...
              </div>
            </div>

            <div className="p-2 mt-6 w-96 rounded-xl focus:text-blue-600">
              <table className="shadow-lg bg-white">
                <tbody>
                  <tr>
                    <th className="bg-blue-400 border text-left px-4 py-4">
                      S/N
                    </th>
                    <th className="bg-blue-400 border text-left px-8 py-4">
                      Name
                    </th>
                    <th className="bg-blue-400 border text-left px-8 py-4">
                      Activity
                    </th>
                    <th className="bg-blue-400 border text-left px-14 py-4">
                      Start Date
                    </th>
                    <th className="bg-blue-400 border text-left px-16 py-4">
                      End Date
                    </th>

                    <th className="bg-blue-400 border text-left px-4 py-4">
                      Action
                    </th>
                  </tr>
                  {task &&
                    tasks.map((task, index) => (
                      <tr key={task.id}>
                        <td className="border px-4 py-4">{index + 1}</td>
                        <td className="border px-4 py-4">{task.Name}</td>
                        <td className="border px-8 py-4">{task.Activity}</td>
                        <td className="border px-8 py-4">{task.StartDate}</td>
                        <td className="border px-8 py-4">{task.EndDate}</td>
                        <td className="border px-8 py-4">
                          {" "}
                          <button
                            className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
                            type="button"
                          >
                            Delete
                          </button>
                        </td>
                      </tr>
                    ))}
                </tbody>
              </table>
            </div>
          </div>
        </main>
      </div>
    </div>
  );
}

We created a function called getTasks to retrieve all the tasks added using the Supabase instance. We also iterated all the tasks retrieved displayed all the records in a table format, as shown in the code snippet above.

Let's test our application, and we should be able to add a new task and see all of the tasks we've created so far.

It works! But we had to refresh the page when a new task was added to see the new task. We don't want that. Let's update our addTask function with the code snippet below:

  async function addTask() {
    await supabase
      .from("Task")
      .insert([
        {
          Name,
          Activity,
          StartDate,
          EndDate,
        },
      ])
      .single();
    setTask({
      Name: "",
      Activity: "",
      StartDate: "",
      EndDate: "",
    });
    getTasks(); // Refresh the tasks
  }

We will now see a new task added to our task table without refreshing the page.

Let's make the Delete Button that appears on the right side of the table to delete the task from our database.

Update our pages/index.js file with the following snippet:

 async function deleteTask(id) {
    await supabase.from("Task").delete().eq("id", id); // the id of row to delete
    getTasks();
  }

Update the delete button onClick attribute as shown below:

     // ...

      <button
        className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
        type="button"
        onClick={() => deleteTask(task.id)} // Delete the task
       >
        Delete
      </button>

When we test our application, we should add a new task, get all the tasks added, and delete any task we want. We can see how it should look in the image below, where we deleted one of the tasks we created earlier.

You can click here to check out the complete code on GitHub.

Conclusion

This tutorial showed you how to build a full-stack application with Supabase, React, and TailwindCSS in Next.js.

Happy coding!

Resources

• Supabase Docs
• NextJs Docs
• Tailwind CSS

Table of Contents

• What is Ansible?
• How Does Ansible Work?
• Ansible's Architecture
  • Plugins
  • Modules
  • Inventories
  • Playbook
• Benefits of Using Ansible
• Why is Ansible so important?
• How to Install and Configure Ansible on Ubuntu
• Conclusion
• References

What is Ansible?

Ansible is a tool that generates written instructions for automating IT professionals' work throughout the entire system infrastructure.

It's designed particularly for IT professionals who use it for application deployment, configuration management, intra-service orchestration, and practically anything else a systems administrator does on a weekly or daily basis.

Ansible is simple to install because it doesn't require any agent software or other security infrastructure.

While Ansible is at the cutting edge of automation, systems administration, and DevOps, it's also valuable as a tool for devs to use in their daily work.

Ansible allows you to set up not just one machine but a complete network of them all at once, and it doesn't require any programming knowledge.

How Does Ansible Work?

Ansible connects to nodes on a network (clients, servers, etc.) and then send a little program called an Ansible module to each node.

It then runs these modules through SSH and deletes them once they're done.

Your Ansible control node must have login access to the managed nodes for this interaction to work.

The most frequent method of authentication is SSH keys, but alternative methods are also allowed.

If you want to see how to install and start using Ansible, we'll cover that below.

Ansible's Architecture

Now let's take a look at Ansible's architecture and how it manages operations.

Ansible Plugins

Plugins are supplementary pieces of code that enhance functionality, and you've probably used them in many other tools and platforms. You can use Ansible's built-in plugins or create your own.

Examples are:

• Action Plugins
• Become Plugins
• Cache Plugins
• Callback Plugins
• Cliconf Plugins
• Connection Plugins
• HTTP API Plugins
• Inventory Plugins
• Lookup Plugins
• Netconf Plugins
• Tests

Ansible Modules

Modules are short programs that Ansible distributes to all nodes or remote hosts from a central control workstation. Modules control things like services and packages and can be executed via playbooks.

Ansible runs all of the modules needed to install updates or complete whatever operation is required and then removes them after they're done.

Ansible Inventories

Ansible uses an inventory file to track which hosts are part of your infrastructure and then accesses them to perform commands and playbooks.

Ansible works in parallel with various systems in your infrastructure. It accomplishes this by picking methods mentioned in Ansible's inventory file, which is saved in the host location by default.

Once the inventory is registered, you can use a simple text file to assign variables to any of the hosts, and you may retrieve inventory from a variety of sources.

Ansible Playbook

IT professionals can use Ansible playbooks to program applications, services, server nodes, and other devices without starting from scratch. Ansible playbooks, along with the conditions, variables, and tasks included within them, can be stored, shared, and reused forever.

Ansible playbooks function similarly to task manuals. They're simple YAML files, a human-readable data serialization language.

Playbooks are at the heart of what makes Ansible so popular. They specify activities that can be completed quickly without requiring the user to know or remember any specific syntax.

Benefits of Using Ansible

• Ansible is quick and easy to use, as it runs all of its operations over SSH and doesn't require the installation of any agents.
• Ansible is a free, open-source tool, and it's straightforward to set up and use: Ansible's playbooks don't require any special coding knowledge.
• Ansible can be used to perform simple tasks such as ensuring that a service is operating or rebooting from the command line without the need for configuration files.

In a more extensive or more uniform system, Ansible may be a better fit. It also provides a set of modules for managing various methods and cloud infrastructure.

Why is Ansible so important?

Modernization and digital transformation require automation that's both necessary and purposeful. We need a new management solution in today's dynamic contexts to increase speed, scale, and stability throughout IT infrastructure.

Technology is our most potent instrument for product improvement. Previously, accomplishing this required a significant amount of manual labor and intricate coordination. But today, Ansible - a simple yet powerful IT automation engine used by thousands of enterprises to simplify their setups and speed DevOps operations - is available.

How to Install Ansible on Ubuntu

Run the following commands to configure the PPA on your machine and install Ansible:

Update the repository:

sudo apt-get update

Install the software properties:

sudo apt-get install software-properties-common

And then install Ansible like this:

sudo apt-add-repository --yes --update ppa:ansible/ansible

Then run this:

sudo apt-get install ansible

You should have something similar to what is shown below:

Now that you have successfully installed Ansible, let's test if it's working by using the command below:

ansible --version

We'll use the command below to instruct Ansible to target all systems for the inventory host localhost, and we'll run the module ping from your local console (rather than ssh).

ansible all -i localhost, --connection=local -m ping

You should get a response similar to what you can see below:

How to modify the hosts that Ansible targets

We'll make changes to the host's file in /etc/ansible/hosts. This is the default file where Ansible searches for any defined hosts (and groups) where the given commands should be executed remotely.

sudo nano /etc/ansible/hosts

Add the lines below to the file and save the modifications:

[local]
localhost

Execute this command with your adjusted inventory file:

ansible all --connection=local -m ping

The response should look similar to what we have below:

How to configure a remote server

We deploy our Ansible test program to our remote server using a Digital Ocean droplet.

Use the command below to ssh into the server:

ssh username@IP_Address

Note: we have already configured an ssh key in our profile, which was selected when creating the droplet.

How to configure Ansible for a remote server

We will edit our hosts file in /etc/ansible/hosts using the command below:

sudo nano /etc/ansible/hosts

Add the lines below to the file and save the modifications:

[remote]
remote_test

[remote:vars]
ansible_host=IP_ADDRESS_OF_VIRTUAL_MACHINE
ansible_user=USERNAME

To see if Ansible can connect to your remote compute instance over SSH, let's type the following command:

ansible remote -m ping

We'll make an Ansible playbook using the command below, which is the typical way of telling Ansible which commands to run on the remote server and in what order. The playbook is written in .yml and follows a strict format.

In the official Ansible documentation, you can learn more about playbooks.

nano my-playbook.yml

Add the following code, which tells Ansible to install Docker in several steps:

---
- name: install docker
hosts: remote
become_method: sudo
become_user: root
vars: #local variables
docker_packages:
- apt-transport-https
- ca-certificates
- curl
- software-properties-common

tasks:
- name: Update apt packages
become: true #make sure you execute the task with sudo privileges
apt: #use apt module
update_cache: yes #equivalent of apt-get update

- name: Install packages needed for Docker
become: true
apt:
name: "{{ docker_packages }}" #uses our declared variable docker_packages
state: present #indicates the desired package state
force_apt_get: yes #forces to use apt-get

- name: Add official GPG key of Docker
shell: curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -

- name: Save the current Ubuntu release version into a variable
shell: lsb_release -cs
register: ubuntu_version #Output gets stored in this variable

- name: Set right Docker directory
become: true
shell: add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu {{ ubuntu_version.stdout }} stable"

- name: Update apt packages
become: true
apt:
update_cache: yes

- name: Install Docker
become: true
apt:
name: docker-ce
state: present
force_apt_get: yes

- name: Test Docker with hello world example
become: true
shell: docker run hello-world
register: hello_world_output

- name: Show output of hello word example
debug: #use debug module
msg: "Container Output: {{hello_world_output.stdout}}"

We can now execute it with the command below:

ansible-playbook my-playbook.yml -l remote

After that, we'll see some magic happen (it might take a while), and somewhere in the last debug message in our terminal, we should see "Hello from Docker!"

Conclusion

In this article, we had a detailed look into Ansible, its benefits, how it works and what it can do, its architecture, plugins, playbook, inventory, and how to configure and deploy Docker with Ansible on a remote server.

Thank you for reading!

Resources

Ansible docs Setting up Ansible Inventories Ansible installation

I'd love to connect with you on Twitter | LinkedIn | GitHub

Prerequisites

You'll need the following to follow along with this tutorial:

• A working understanding of JavaScript.
• A good understanding of Node.js.
• A working knowledge of MongoDB or another database of your choice.
• Postman and a basic understanding of how it works.

Before we jump into the main part of the article, let's define some terms so we're all on the same page.

What is Authentication?

Authentication and authorization may seem like the same thing. But there's a big difference between getting into a house (authentication) and what you can do once you're there (authorization).

Authentication is the process of confirming a user's identity by obtaining credentials and using those credentials to validate their identity. If the certificates are valid, the authorization procedure begins.

You are probably already familiar with the authentication process, because we all go through it daily – whether at work (logging onto your computer) or at home (passwords or logging into a website). In fact, most "things" connected to the Internet require you to provide credentials to prove your identity.

What is Authorization?

Authorization is the process of granting authenticated users access to resources by verifying whether they have system access permissions or not. It also allows you to restrict access privileges by granting or denying specific licenses to authenticated users.

After the system authenticates your identity, authorization occurs, providing you full access to resources such as information, files, databases, finances, locations, and anything else.

This approval impacts your ability to access the system and the extent to which you can do so.

What is Cross-Origin Resource Sharing (CORS)?

CORS is an HTTP header-based system that allows a server to specify any other origins (domain, scheme, or port) from which a browser should enable resources to be loaded other than its own.

CORS also uses a system in which browsers send a "preflight" request to the server hosting the cross-origin help to ensure that it will allow the actual request.

We will be using the JSON web token standard to represent claims between two parties

What are JSON Web Tokens (JWT)?

JSON Web Tokens (JWT) are an open industry standard defined by RFC 7519 used to represent claims between two parties. jwt.io

You can use jwt.io to decode, verify, and create JWTs, for example.

JWT defines a concise and self-contained way of exchanging information between two parties as a JSON object. You can review and trust this information because it is signed.

JWTs can be signed with a secret (using the HMAC algorithm) or a public/private key pair from RSA or ECDSA. We'll see some examples of how to use them in a bit.

Let's get started.

How to Use a Token for Authentication in Node.js Development

To get started, first we'll need to set up our project.

Navigate to a directory of your choice on your machine and open it in the terminal to launch Visual Studio Code.

Then execute:

code.

Note: If you don't have Visual Studio Code installed on your computer, code . won't work. Just make sure you have it installed before trying this command.

How to Create a Directory and Set it Up with npm

Create a directory and initialize npm by typing the following command:

• In Windows power shell:

mkdir cors-auth-project

cd cors-auth-project

npm init -y

• In Linux:

mkdir cors-auth-project

cd cors-auth-project

npm init -y

How to Create Files and Directories

In the previous step, we initialized npm with the command npm init -y, which automatically created a package.json file.

We will create the model, middleware, and config directories and their files, for example, user.js, auth.js, database.js using the commands below.

mkdir model middleware config

touch config/database.js middleware/auth.js model/user.js

We can now create the index.js and app.js files in the root directory of our project with this command:

touch app.js index.js

This will give us a folder structure like the one you see below:

How to Install Dependencies

We'll install several dependencies like mongoose, jsonwebtoken, express, dotenv, bcryptjs, cors and development dependencies like nodemon to restart the server as we make changes automatically.

Because I'll be using MongoDB in this project, we'll install Mongoose, and the user credentials will be checked against what we have in our database. As a result, the entire authentication process isn't limited to the database we'll use in this tutorial.

npm install  cors mongoose express jsonwebtoken dotenv bcryptjs 

npm install nodemon -D

How to Create a Node.js Server and Connect your Database

Now, add the following snippets to your app.js, index.js, database.js, and .env files in that order to establish our Node.js server and connect our database.

In our database.js.:

config/database.js:

const mongoose = require("mongoose");

const { MONGO_URI } = process.env;

exports.connect = () => {
  // Connecting to the database
  mongoose
    .connect(MONGO_URI, {
      useNewUrlParser: true,
      useUnifiedTopology: true,
      useCreateIndex: true,
      useFindAndModify: false,
    })
    .then(() => {
      console.log("Successfully connected to database");
    })
    .catch((error) => {
      console.log("database connection failed. exiting now...");
      console.error(error);
      process.exit(1);
    });
};

In our app.js:

auth-cors-project/app.js

require("dotenv").config();
require("./config/database").connect();
const express = require("express");

const app = express();

app.use(express.json());

// Logic goes here

module.exports = app;

In our index.js:

auth-cors-project/index.js

const http = require("http");
const app = require("./app");
const server = http.createServer(app);

const { API_PORT } = process.env;
const port = process.env.PORT || API_PORT;

// server listening 
server.listen(port, () => {
  console.log(`Server running on port ${port}`);
});

Our file, as you can see, requires various environment variables. If you haven't already, create a new .env file and add your variables before running the application.

In our .env.:

API_PORT=4001

MONGO_URI= // Your database URI

Edit the scripts object in our package.json to look like the one below to start our server.

"scripts": {
    "start": "node index.js",
    "dev": "nodemon index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  }

We successfully inserted the above snippet into the files app.js, index.js, and database.js. So, we started by creating our Node.js server in index.js and then imported the app.js file, which already had routes configured.

Then, in database.js, we used Mongoose to build a database connection.

npm run dev is the command to start our application.

As long as they haven't crashed, both the server and the database should be up and running.

How to Create a User Model and Route

After registering for the first time, we'll establish our schema for the user details. Then, when logging in, we'll check them against the remembered credentials.

In the model folder, add the following snippet to user.js:

model/user.js

const mongoose = require("mongoose");

const userSchema = new mongoose.Schema({
  first_name: { type: String, default: null },
  last_name: { type: String, default: null },
  email: { type: String, unique: true },
  password: { type: String },
  token: { type: String },
});

module.exports = mongoose.model("user", userSchema);

Now let's create the routes for register and login, respectively.

In app.js in the root directory, add the following snippet for the registration and login.

app.js

// importing user context
const User = require("./model/user");

// Register
app.post("/register", (req, res) => {
// our register logic goes here...
});

// Login
app.post("/login", (req, res) => {
// our login logic goes here
});

How to Implement Register and Login Functionality

We'll implement these two routes in our application. Before storing the credentials in our database, we'll use JWT to sign them and bycrypt to encrypt them.

We will:

• Get user input from the /register route.
• Verify the user's input.
• Check to see if the user has already been created.
• Protect the user's password by encrypting it.
• Make a user account in our database.
• Finally, construct a JWT token that is signed.

Modify the /register route structure we created earlier to look as shown below:

app.js

// ...

app.post("/register", async (req, res) => {

  // Our register logic starts here
   try {
    // Get user input
    const { firstName, lastName, email, password } = req.body;

    // Validate user input
    if (!(email && password && firstName && lastName)) {
      res.status(400).send("All input is required");
    }

    // check if user already exist
    // Validate if user exist in our database
    const oldUser = await User.findOne({ email });

    if (oldUser) {
      return res.status(409).send("User Already Exist. Please Login");
    }

    //Encrypt user password
    encryptedUserPassword = await bcrypt.hash(password, 10);

    // Create user in our database
    const user = await User.create({
      first_name: firstName,
      last_name: lastName,
      email: email.toLowerCase(), // sanitize
      password: encryptedUserPassword,
    });

    // Create token
    const token = jwt.sign(
      { user_id: user._id, email },
      process.env.TOKEN_KEY,
      {
        expiresIn: "5h",
      }
    );
    // save user token
    user.token = token;

    // return new user
    res.status(201).json(user);
  } catch (err) {
    console.log(err);
  }
  // Our register logic ends here
});

// ...

Note: Update your .env file with a TOKEN_KEY, which can be a random string.

Using Postman to test the endpoint, we'll get the response shown below after successful registration.

We will:

• Get user input for the /login route.
• Verify the user's input.
• Check to see if the user is genuine.
• Compare the user's password to the one we saved earlier in our database.
• Finally, construct a JWT token that is signed.

Make the /login route structure that we defined earlier look like this:

// ...

app.post("/login", async (req, res) => {

  // Our login logic starts here
   try {
    // Get user input
    const { email, password } = req.body;

    // Validate user input
    if (!(email && password)) {
      res.status(400).send("All input is required");
    }
    // Validate if user exist in our database
    const user = await User.findOne({ email });

    if (user && (await bcrypt.compare(password, user.password))) {
      // Create token
      const token = jwt.sign(
        { user_id: user._id, email },
        process.env.TOKEN_KEY,
        {
          expiresIn: "5h",
        }
      );

      // save user token
      user.token = token;

      // user
      return res.status(200).json(user);
    }
    return res.status(400).send("Invalid Credentials");

  // Our login logic ends here
});

// ...

Using Postman to test, we'll get the response shown below after a successful login.

How to Create Middleware for Authentication

We can now create and login a user successfully. Now, we'll establish a route that requires a user token in the header, which will be the JWT token we created before.

Add the following snippet inside auth.js:

middleware/auth.js

const jwt = require("jsonwebtoken");

const config = process.env;

const verifyToken = (req, res, next) => {
  const token =
    req.body.token || req.query.token || req.headers["x-access-token"];

  if (!token) {
    return res.status(403).send("A token is required for authentication");
  }
  try {
    const decoded = jwt.verify(token, config.TOKEN_KEY);
    req.user = decoded;
  } catch (err) {
    return res.status(401).send("Invalid Token");
  }
  return next();
};

module.exports = verifyToken;

To test the middleware, create the /welcome route and edit app.js with the following code:

app.js

const auth = require("./middleware/auth");

app.post("/welcome", auth, (req, res) => {
  res.status(200).send("Welcome to FreeCodeCamp 🙌");
});

When we try to access the /welcome route we just built without sending a token in the header with the x-access-token key, we get the following response:

We can now re-test by adding a token in the header with the key x-access-token.

This is the response you'll get:

How to Implement Cross-Origin Resource Sharing (CORS)

CORS is a Node.js package that provides a Connect/Express middleware that you can. use to enable CORS with a variety of parameters.

1. It's easy to use (Enable All CORS Requests)

Adding the following snippet to app.js allows us to add CORS to our application and enable all CORS requests.

// ...

const cors = require("cors") //Newly added
const app = express();

app.use(cors()) // Newly added


app.use(express.json({ limit: "50mb" }));

// ...

2. You can enable CORS for a single route

Using the /welcome route as an example, you can activate CORS for a single route in your application by adding the following snippet in app.js.:

app.get('/welcome', cors(), auth, (req, res) => {
  res.status(200).send("Welcome to FreeCodeCamp 🙌 ");
});

3. How to configure CORS

We can set options in the CORS package by adding parameters to configure it, as shown below:

// ...

const corsOptions = {
  origin: 'http://example.com',
  optionsSuccessStatus: 200 // for some legacy browsers
}

app.get('/welcome', cors(corsOptions), auth, (req, res) => {
  res.status(200).send("Welcome to FreeCodeCamp 🙌 ");
});

// ...

You can check out NPM CORS PACKAGE to read more about Cross-Origin Resource Sharing.

You can click here to check out the complete code on GitHub.

Conclusion

In this article, we learned about JWT, authentication, authorization, and CORS. We also learned how to create an API in Node.js that uses a JWT token for authentication.

Thank you for reading!

In this article, I will explain what APIs are, why you need them, and we'll dive into API specifications, documentation, and more.

Programming is made simpler by using APIs to abstract away certain implementations, and expose actions or endpoints to developers who need to consume the endpoints when building applications.

But APIs can get pretty complex depending on the application's code base and use cases. This means that testing your API endpoints might be a tricky process after developing them. Fortunately, there are amazing tools out there that I will share to help you test your APIs efficiently.

Table of Contents

• Introduction to APIs
• Types of APIs
• Why do we need APIs?
• API Specifications
• API Testing tools
• API Documentation
• Conclusion

What is an API?

An API (Application Programming Interface) serves as a middleware that lets you channel data between software products.

You can use it to define requests that have been made, handle business logic, the and manage data formats that should be used and the conventions to adhere to when building software products.

Types of APIs

There are three main types of APIs, which are:

• Private
• Public/Partner
• External

Private APIs

These are APIs builts solely for use within an organization. They are classified as an in-house application for employees to automate business processes and delivery.

Public/Partner APIs

These are APIs that are openly promoted but available for known developers or business partners. These usually represent software integrations between organizations.

External APIs

These are completely external APIs, as the name implies, which are available to any third-party developer and are mostly designed or built for end-users/customers.

Why do we need APIs?

APIs make it easier to access to a variety of resources. They also allow cross-platform communication which solves certain business logic.

APIs are efficient

APIs hosted and created by a third-party application can significantly reduce the amount of work within your organization. This, in turn, will speed up the development process of an application.

Companies outsource some part of the business process for a fragment of the cost to build the same application within the organization.

APIs make things simpler

APIs simplify complex logic by tackling different business logic in chunks. They also provide user-friendly endpoints specific to certain use cases.

An API can provide data you need without requiring extra research or manipulation which speeds up the development process.

API Specifications

There are a few different types of API specifications, which we'll discuss now.

Representational State Transfer (REST)

Representational State Transfer (REST) is a style of architecture that provides standards on the web between computer systems which makes communication flow easier within applications.

REST APIs are stateless and can be used for separation of concerns between the client and server.

Service Object Access Protocol (SOAP)

According to the definition by Microsoft, SOAP is a lightweight protocol for exchanging structured information in a decentralized, distributed environment.

This contains rules guiding requests and responses sent from web applications using XML between systems through Hypertext Transfer Protocol (HTTP).

GraphQL

GraphQL is a query language for APIs. It provides an absolute and simplified description of the data in APIs which gives you the power to get the exact data you need. This makes it easier to evolve APIs over time and also enables powerful developer tools.

API Testing Tools

Testing your API endpoints might be challenging after developing them, but there are some super helpful tools I'll share here that'll help you test your APIs efficiently.

Postwoman/Hoppscotch

A free, fast, and beautiful API request builder with an online testing environment, support for multiple platforms and multiple devices, and many more features.

REST-assured

This tool simplifies testing API endpoints in Java – yes JAVA. It tests and validates responses, making it seamless for Java devs to test APIs.

Paw

Paw is a full-featured HTTP client that lets you test and describe the APIs you build or consume. It has a beautiful native macOS interface to compose requests, inspect server responses, generate client code, and export API definitions.

Postman

Postman is a collaboration platform for API development. The awesome thing about this tool is that it simplifies each step of building an API and it also makes collaboration seamless for building faster APIs.

SoapUI

This is also a testing tool that can help to make testing API endpoints seamless.

Firecamp

This is a tool with friendly UI and can be used to test any stack. It doesn't matter which tech stack you use, ranging from REST API, WebSockets, GraphQL, and so on in software engineering.

Karate

Karate is an open-source tool for operations like API test-automation, performance-testing, UI automation into a single, and so on.

API Fortress

This is a great tool for testing REST, SOAP, GraphQL, Web Services, and Microservices. It also helps you automate tests as part of a CI pipeline, monitor internal APIs continuously, and so on.

API Documentation

API Documentation is one of the most important things to consider after developing and testing your APIs. It simplifies the process of understanding what each endpoint does as well as how their requests and responses work.

Imagine you build several endpoints for user authentication. If you aren't available, but one of the frontend developers on your team wants to consume it, that could be a proble. If there is no guide or instructions explaining what each API does and there are no sample requests and responses, it can really slow down the development process.

Here are some tools you can use for APIs documentation so you don't have these issues:

• Swagger
• apiDoc
• Postman

Conclusion

Building and testing your API should be fun, shouldn't it? I hope you found this resource useful and it helps you have fun with your APIs.

You can reach out to me on Twitter.

The application deployment process might seem complicated, and this might prevent some developers from deploying their applications after they've developed them.

So here, I will be taking you through a seamless process to spin up your application which can then be accessed anywhere in the world via a URL.

Table of contents

• Why do you need to deploy your frontend applications?
• What is Netlify?
• What you can do with Netlify
• How to deploy your site
• Resources

Why do you need to deploy your frontend applications?

There are numerous advantages to deploying your applications. Of course, you don't want your beautiful application to sit on your localhost forever.

Deploying your application makes it easier to share your project, side-gig, or startup with potential investors or future employers. If they can see those projects, it helps them gauge your skills. It also lets you show off your progress to the world.

In this article, we will be using the amazing [Netlify](https://www.netlify.com 'Netlify Homepage') platform to deploy our application.

That name sounds familiar, right? But if you haven't used it to deploy a web application yet, trust me I know how you feel.

I will take you through the steps to get your site deployed to Netlify in less than 4 minutes. We'll also see some other functionalities that can be done with Netlify out of the box.

What is Netlify?

Netlify is a platform that lets developers automate modern web projects, and it's a place where you can deploy your application without worrying about frustrating configurations.

You can also integrate cool features and dynamic functionality like serverless functions and form handling on Netlify. Sounds good, right?

Netlify Features

Configure builds

Netlify helps you run the build command each time you push an update to your repository.

There are additional settings that you can configure like auto-deploy along with other useful deployment settings.

Site deploys (Atomic deploys)

One of the awesome features Netlify has is site deployment. It ensures that your site is deployed and always consistent.

You can also enable deploy notifications, run a test while Netlify compares the new deploy with the existing one, and then update only the files that have been changed.

Monitor sites (Netlify Analytics)

Monitoring your site might become difficult if you don't have proper infrastructure in place.

You can easily monitor your site'sactivities on this platform where you can track each log on the team's build usage.

Domains & HTTPS (Register new domains)

In simple terms, a domain is the URL anyone types into the browser to visit your site. You can assign a custom domain if you have already purchased one or secure a domain from Netlify.

Either way, the domain name system management is handled by Netlify. They also provide free automatic HTTPS on all sites. Cool right?

Routing (Learn about routing)

Routing, Redirects, proxies, and so on all become much easier when your site is deployed on Netlify.

Visitor access

Here's another cool feature I enjoy: whenever you need to add someone to the team, you can set up role-based access controls that allow the Admin/Senior developer to take control and give access to individuals on the team to avoid escalations.

Forms (Netlify Forms)

When you need to collect data from users on a site deployed on Netlify, you can do so using Netlify forms. This doesn't add API calls or extra JavaScript on your site, either.

Build bots handle form submission by parsing your HTML files directly at deploy time. You can also configure the receiver, group, and notifications.

Functions (Deploy serverless functions)

Serverless functions can be referred to as single-purpose, programmatic functions that are hosted on managed infrastructure.

Netlify lets you deploy serverless Lambda functions with management handled directly within Netlify, while they are built and deployed with the rest of your sites.

The Netlify CLI (Netlify command-line interface)

You might be wondering if all activities are carried out on the Netlify UI alone - well, no they're not.

There is another great feature that allows developers to deploy sites or do some configuration right from their terminal. The Netlify CLI can be used to run a local development server that can be shared, including plugins.

The Netlify API (Netlify API)

Netlify's API can be used to handle the deployment of sites, script injections, and more. It uses JSON for serialization, which conforms to the REST standard.

Accounts & billing

Learn about managing team members and how to transfer sites between teams.

I hope you can now see how powerful Netlify is. Sut seeing sometimes can be deceiving, so let's try it out on our own.

As you can tell from the title of this article, I will only be showing you how to deploy your site to netlify.com. But to explore other functionalities click here to read more, practice, and explore.

How to Deploy a Site to Netlify

Step One

Login or signup on netlify.com if you are a new user. It's free :)

Step Two

As shown below, all you need is to select a site from Git by clicking on the button with the name “New site from Git”.

Step Three

You will see the interface below where you can choose the Git provider where your site source code is hosted.

Step Four

Choose the repository you want to link to your site on Netlify.

Step Five

We are almost there :)

This section allows you to get more control over how Netlify builds and deploys your site with the settings option shown below:

Step Six

Wait, Netlify is getting things ready for you. :)

Step Seven

Congratulation Your site is Live!

Click on the generated URL with the .netlify.com extension below the header that states “Deploys for”.

Lastly: You can also set up a new domain or change the generated one to something nice by clicking on the “…” that embeds “Edit site name” but it will end with .netlify.com. Click here to read more

I hope you have found this guide useful :)

NOTE: the Netlify URL extension is now netlify.app. All netlify.com URLs will now be redirected to netlify.app.

Please don't forget to check out my other articles, it gives me joy :) and the vibes to write more stuff.

You can also reach out to me on Twitter.