DEV Community: Mohammad Shahbaz Alam

Using x402-next with Next.js 16

Mohammad Shahbaz Alam — Thu, 13 Nov 2025 17:21:29 +0000

This guide covers how to integrate x402-next with Next.js 16, which introduces a new middleware architecture. In this version, the traditional middleware.ts file is replaced by proxy.ts, requiring a slightly different setup and a minor peer dependency adjustment when installing x402-next.

Installation

x402-next currently lists its peerDependencies as:

"peerDependencies": {
  "next": "^15.0.0"
}

As a result, you may encounter a peer dependency warning or error when installing it in a Next.js 16 application.
To bypass this, install the package using the following commands:

npm install x402-next --legacy-peer-deps

Note:
This does not affect functionality — x402-next works correctly with Next.js 16 when configured with the new proxy.ts structure.

Implementation for Next.js 16

In Next.js 16, you must create a proxy.ts file at the root of your application.
This file replaces the traditional middleware.ts entry point and defines your x402 payment middleware.

Example

// proxy.ts
import { paymentMiddleware } from "x402-next";

// Configure x402 payment middleware
export default paymentMiddleware(
  "0xYourAddress", // your receiving wallet address
  {
    "/protected": {
      price: "$0.01",              // payment amount
      network: "base-sepolia",     // network name
      config: {
        description: "Access to protected content",
      },
    },
  },
  {
    url: "https://x402.org/facilitator", // Facilitator URL for Base Sepolia
  }
);

// Define route matching configuration
export const config = {
  matcher: ["/protected/:path*"],
};

The paymentMiddleware function from x402-next protects the specified routes, using your wallet address as the recipient for payments. Each route’s configuration defines the required payment amount, while the facilitator URL specifies which network to use (for example, Base Sepolia or Base mainnet). The matcher setting determines which routes the middleware intercepts.

Differences from Next.js 15 and Earlier

In Next.js 15 and earlier, middleware was defined inside a middleware.ts file using a named export.
In Next.js 16, this has been replaced by a default export from proxy.ts.

Version	File	Export Type
Next.js ≤15	`middleware.ts`	`export const middleware = ...`
Next.js 16	`proxy.ts`	`export default ...`

Example Project

Check out a live example of this setup at 👉 mdsbzalam.dev
. I recently rebuilt my personal site using Next.js 16 and wanted to play around with x402’s payment functionality. The idea is simple — visitors can view my resume only after sending $1 USDC on Base Sepolia. It’s a small but fun way to see how x402 can handle microtransactions directly on a website.

A Step-by-Step Guide on how to Register a Name on Ethereum Using Web3Auth and Clusters.xyz

Mohammad Shahbaz Alam — Mon, 05 Aug 2024 05:41:51 +0000

Prerequisites

Node.js and npm installed on your machine.
React or similar application setup.
Install required dependencies: @web3auth/modal, @web3auth/ethereum-provider, viem, and clusters.

npm install @web3auth/modal @web3auth/ethereum-provider viem clusters

Step 1: Import Required Libraries

In your React component, start by importing the necessary libraries and modules.

import { Web3Auth } from "@web3auth/modal";
import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";
import { WEB3AUTH_NETWORK } from "@web3auth/base";
import { createWalletClient, createPublicClient, formatUnits, custom } from "viem";
import { sepolia } from "viem/chains";
import { Clusters, isNameValid } from "@clustersxyz/sdk";
import { RegistrationTransactionData_evm } from "@clustersxyz/sdk/types";

Step 2: Initialize Web3Auth

Configure the Web3Auth with the client ID and network details.

const clientId = "YOUR_WEB3AUTH_CLIENT_ID"; // Replace with your Web3Auth client ID
const chainConfig = {
  chainId: "0xaa36a7", // Replace with appropriate chain ID
  rpcTarget: "RPC_URL", // Replace with your RPC url
  displayName: "Ethereum Sepolia Testnet",
  blockExplorer: "https://sepolia.etherscan.io",
  ticker: "ETH",
  tickerName: "Ethereum",
};

const privateKeyProvider = new EthereumPrivateKeyProvider({
  config: { chainConfig: chainConfig }
});

const web3auth = new Web3Auth({
  clientId,
  web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
  privateKeyProvider: privateKeyProvider,
});

Step 3: Connect to Web3Auth

Establish a connection to Web3Auth after connecting with any of the Social provider provider with the Web3Auth Plug n Play Modal.

const w3aProvider = await web3auth.connect();

Step 4: Create Public and Wallet Clients

Set up the public and wallet clients for interacting with the blockchain.

const publicClient = createPublicClient({
  chain: sepolia,
  transport: custom(w3aProvider),
});

const walletClient = createWalletClient({
  chain: sepolia,
  transport: custom(w3aProvider), // Ensure you use the correct provider
});

Step 5: Initialize Clusters

Set up Clusters with your API key.

const clusters = new Clusters({ apiKey: "YOUR_CLUSTER_API_KEY" }); // Replace with your Clusters API key

Step 6: Check Name Availability

Validate the name and check its availability.

const name = "desiredName"; // Replace with the name you want to register

const registerName = async (name: string) => {
  if (!isNameValid(name)) {
    console.error("Invalid name format");
    return;
  }

  const nameAvailability = await clusters.getNameAvailability(name);
  if (!nameAvailability.isAvailable) {
    console.error("Name already taken!");
    return;
  }

  const names = [{ name }];
  const signerAddress = await walletClient.getAddresses();
  const chainId = "11155111"; // Sepolia

  const data = await clusters.getRegistrationTransaction(names, signerAddress[0], chainId);
  if (!data?.registrationFee || !data?.gasToken || !data?.bridgeFee || !data?.transactionData) {
    console.error("Failed to get registration transaction data");
    return;
  }

  const registrationFee = formatUnits(BigInt(data.registrationFee), data.gasToken.decimals);
  const bridgeFee = formatUnits(BigInt(data.bridgeFee), data.gasToken.decimals);
  const totalFees = `Total Registration fee: ${registrationFee} ${data.gasToken.symbol}\nBridge fee: ${bridgeFee} ${data.gasToken.symbol}`;

  const transactionDetails = {
    data: data.transactionData.data,
    account: signerAddress[0],
    to: data.transactionData.to,
    value: BigInt(data.transactionData.value),
  };

  const hash = await walletClient.sendTransaction(transactionDetails);
  const receipt = await publicClient.waitForTransactionReceipt({ hash });
  const transactionStatus = await clusters.getTransactionStatus(hash);

  const result = {
    hash,
    receipt,
    transactionStatus: transactionStatus.status,
    registrationMessage: `${name} registered successfully!`,
  };

  return {
    totalFees,
    result,
  };
};

Summary

This guide outlines how to:

Initialize Web3Auth with the required configurations.
Connect to Web3Auth and obtain the provider.
Create public and wallet clients for blockchain interactions.
Initialize Clusters with your API key.
Check name availability and register the name if available.

Make sure to handle errors and edge cases in a production environment.

Moving from Create-React-App to Vite for Web3Auth Projects

Mohammad Shahbaz Alam — Fri, 26 Jul 2024 10:25:21 +0000

React has moved away from recommending Create React App as the preferred starting point for new projects. When working with Web3Auth SDKs, you might encounter issues like @metamask/abi-utils/dist/parsers/bool.js issue. To avoid such issues, we recommend switching to Vite. Follow the steps below to make the transition.

Step 1 - Remove Create React App

First, uninstall react-scripts and react-app-rewired from your project.

npm uninstall react-scripts react-app-rewired

Step 2 - Install Vite Dependencies

Install the required dependencies for Vite.

npm install vite @vitejs/plugin-react

Depending on your specific needs, you can choose different plugins from the official Vite plugins documentation.

Step 3 - Add `vite.config.ts` and Install `empty-module`

Install empty-module.

npm install --save-dev empty-module

Assuming, process and buffer is already installed, if not, install those as well.
```
npm install --save-dev buffer process
```

Next, create a vite.config.ts file at the root of your project with the following content:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      crypto: "empty-module",
      assert: "empty-module",
      http: "empty-module",
      https: "empty-module",
      os: "empty-module",
      url: "empty-module",
      zlib: "empty-module",
      stream: "empty-module",
      _stream_duplex: "empty-module",
      _stream_passthrough: "empty-module",
      _stream_readable: "empty-module",
      _stream_writable: "empty-module",
      _stream_transform: "empty-module",
    },
  },
  define: {
    global: "globalThis",
  },
});

Step 4 - Move `index.html` and Include Polyfills

Create React App uses public/index.html as the default entry point, while Vite looks for index.html at the root level. Move your index.html to the root directory and update the script tag accordingly.

Also, include the polyfills as shown below:

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Include these lines for polyfills --> 
    <script type="module">
      import { Buffer } from "buffer";
      import process from "process";
      window.Buffer = Buffer;
      window.process = process;
    </script>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <script type="module" src="/src/index.tsx"></script>
    <!-- Optionally, you can rename index.tsx to main.tsx to be consistent with Vite folder structure. -->
  </body>
</html>

Step 5 - Create `vite-env.d.ts`

Create a vite-env.d.ts file inside the src folder with the following content:

/// <reference types="vite/client" />

Step 6 - Update Scripts in `package.json`

Replace the existing react-app-rewired scripts in package.json with Vite scripts.

{
  "scripts": {
    "start": "vite",
    "build": "tsc && vite build",
    "serve": "vite preview"
  }
}

Step 7 - Update `tsconfig.json`

Update your tsconfig.json to the following:

{
  "compilerOptions": {
    "allowJs": false,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "isolatedModules": true,
    "jsx": "react-jsx",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "module": "esnext",
    "moduleResolution": "node",
    "noEmit": true,
    "noFallthroughCasesInSwitch": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "strict": true,
    "target": "ESNext",
    "types": [
      "vite/client"
    ]
  },
  "include": [
    "src"
  ]
}

Handling URI Malformed Error

You might encounter Error: URI malformed when running the app. To fix this, remove all references to %PUBLIC_URL% in the index.html.

Optional Steps

Remove config-overrides.js and react-app-env.d.ts files.

By following these steps, you should be able to successfully migrate your project from Create React App to Vite, providing you with a faster development experience and a more modern build setup.

Enhancing Security for Sign-In with Ethereum: Phishing and Replay Attacks

Mohammad Shahbaz Alam — Mon, 27 May 2024 09:50:14 +0000

Enhancing Security for Sign-In with Ethereum

As the use of blockchain technology expands, so does the adoption of innovative authentication methods like Sign-In with Ethereum (SIWE). While SIWE offers enhanced privacy and decentralization, it also presents unique security challenges. Two critical threats are phishing and replay attacks. In this blog post, we'll explore these risks and provide practical tips on how to mitigate them.

Understanding Phishing Attacks

Phishing attacks are deceptive tactics used by attackers to trick users into providing sensitive information or signing messages on malicious sites. Here’s how these attacks work and what you can do to stay safe.

Malicious Sites

Risk: Attackers create fake websites that mimic legitimate ones, prompting users to sign in. Once the user signs a message, the attacker can use this information maliciously.

Mitigation:

Domain Verification: Always verify the domain requesting the sign-in. Check the URL carefully to ensure it matches the expected domain. Legitimate sites often use secure (HTTPS) connections, indicated by a padlock icon in the browser's address bar.
Browser Extensions: Utilize browser extensions such as MetaMask’s phishing detection, which can help identify and warn against malicious sites.

Combating Replay Attacks

Replay attacks involve the reuse of a signed message to authenticate or execute transactions without the user's consent. Here's how these attacks happen and strategies to prevent them.

Nonce Usage

Risk: If a signed message lacks a unique identifier, it could be intercepted and reused by an attacker for multiple authentications.

Mitigation:

Include Nonces: Incorporate a unique nonce (a one-time-use number) in each sign-in request. Servers should verify these nonces to ensure that each signed message can only be used once.

Session Management

Risk: Improper session management can allow attackers to reuse valid session tokens or messages.

Mitigation:

Unique Session Tokens: Generate unique session tokens for each authentication request. These tokens should expire after a set period and be invalidated after use.
Timestamp Verification: Include timestamps in signed messages to ensure they are used within a specific time frame. This limits the window of opportunity for an attacker to reuse a message.

Conclusion

While Sign-In with Ethereum provides a promising alternative to traditional authentication methods, it’s crucial to address the associated security risks. By being aware of phishing and replay attacks and implementing the recommended mitigations, you can enhance the security of your SIWE implementations and protect users from potential threats. Stay vigilant, educate users, and continuously improve your security practices to safeguard against these evolving threats.

Understanding Passport.js for Beginners: A Simple Guide

Mohammad Shahbaz Alam — Wed, 17 Jan 2024 17:26:33 +0000

If you're diving into web development, chances are you'll encounter Passport.js, a powerful authentication middleware for Node.js applications. This guide will break down Passport.js into three key components: strategy, middleware, and session handling.

Passport Strategy

What is a Strategy?

Think of a strategy as the answer to the question, "How do you log in and identify the user?" It contains two main parts: the configuration and the handler function.

Configuration:

Settings to connect with an external API, if needed.
Not every strategy requires configuration.

// Example LocalStrategy configuration
const LocalStrategy = require('passport-local').Strategy;

passport.use(new LocalStrategy(
  (username, password, done) => {
    // Validate user credentials and return the local user
    // ...
  }
));

Handler Function:

Executed after a successful login for the specific strategy.
Takes the login process payload and returns the local user.
For example, FacebookStrategy deals with tokens and user profiles.

// Example FacebookStrategy handler function
passport.use(new FacebookStrategy(
  {
    clientID: 'your-client-id',
    clientSecret: 'your-client-secret',
    callbackURL: 'your-callback-url',
  },
  (accessToken, refreshToken, profile, done) => {
    // Upsert the user in the database based on the Facebook profile
    // ...
    return done(null, user);
  }
));

Pro Tip: Your app can use multiple strategies, such as local usernames/passwords, "Login with Facebook," or "Login with Google."

Middleware

What is Middleware?

Middleware is where you apply authentication to your user's experience, consisting of setup, the login flow, and checking if the user is logged in.

Setup:

Initialize and use Passport in your app.
passport.initialize() creates the passport object on the request.
passport.session() sets up serialize and deserialize methods.

// Setup Passport middleware
app.use(passport.initialize());
app.use(passport.session());

Login Flow:

Set up a login URL for each strategy.
Use passport.authenticate('something') for the internal strategy name.
Strategies may have a callback endpoint for handling authentication flow.

// Example login flow for LocalStrategy
app.post('/login', 
  passport.authenticate('local', { failureRedirect: '/login' }),
  (req, res) => {
    res.redirect('/');
  }
);

isAuthenticated:

Custom middleware to check if a user is logged in.
Protect endpoints by ensuring they are authenticated.

// Custom middleware to check if a user is authenticated
function isAuthenticated(req, res, next) {
  if (req.isAuthenticated()) {
    return next();
  }
  res.redirect('/login');
}

// Protect an endpoint using isAuthenticated middleware
app.get('/protected', isAuthenticated, (req, res) => {
  res.send('This is a protected endpoint');
});

Session Handling

What is Session Handling?
Handles user sessions, ensuring they stay logged in across requests.

`deserializeUser`:

Called during passport.session().
Takes a session token (from serializeUser) and returns the local user or false.

// Example deserializeUser method
passport.deserializeUser((id, done) => {
  // Fetch the user from the database based on the user ID
  // ...
  done(null, user);
});

`serializeUser`:

Called after the Strategy handler.
It takes the local user and returns a string stored in the session.
The string is used in deserializeUser to identify the user in your database.

// Example serializeUser method
passport.serializeUser((user, done) => {
  // Store the user ID in the session
  done(null, user.id);
});

By understanding these three components, you'll be well-equipped to implement secure authentication in your Node.js applications using Passport.js. Remember to explore the various strategies available to suit your specific authentication needs.

Efficient React Development: A Deep Dive into Components, Hooks, and Performance Optimization

Mohammad Shahbaz Alam — Fri, 22 Dec 2023 18:19:14 +0000

Welcome to a journey of mastering React development!
In the ever-evolving realm of web development, React has emerged as a powerhouse, enabling developers to create dynamic and scalable user interfaces. In this comprehensive blog, we embark on a deep dive into the core concepts and best practices that form the backbone of efficient React development.

From understanding the significance of React Fragments to unraveling the mysteries of Hooks, Lists, and State Management, this blog is crafted to equip developers with the insights needed to build robust and performant React applications. We'll explore the nuances of conditional rendering, error handling, and the intricacies of controlled components. All in the form of simple FAQs, we'll delve into advanced topics such as lazy loading, code-splitting, and the art of optimizing performance.

Whether you're a seasoned React developer looking to refine your skills or a newcomer eager to grasp the fundamentals, this blog has something for everyone. Let's embark on this journey together, unraveling the layers of React intricacies and empowering you to elevate your React development game. Ready to dive in?

Let's explore the depths of React efficiency!

1. What is the purpose of the React.Fragment element?
React.Fragment is used to group multiple elements without introducing an additional DOM node, facilitating cleaner code structure.

2. Explain the concept of Redux middleware.
Redux middleware allows developers to intercept and augment Redux actions before reaching the reducer, useful for handling asynchronous actions and side effects.

3. What is the significance of the useLayoutEffect Hook in React?
useLayoutEffect is similar to useEffect but fires synchronously after all DOM mutations, making it suitable for tasks requiring accurate measurements or DOM layout manipulation.

4. How does React handle errors in components?
React handles errors using error boundaries, special components that catch JavaScript errors in their child component tree and log them.

5. Explain the concept of the key prop in React lists.
The key prop provides a unique identifier to elements in React lists, optimizing updates by helping identify changes, additions, or removals.

6. What is the purpose of the useCallback Hook in React?
The useCallback Hook memoizes a callback function, preventing unnecessary re-creation and optimizing performance when dependencies don't change.

7. How does React handle conditional rendering?
Conditional rendering in React is achieved through conditional statements or ternary operators in JSX, allowing components to render different content based on specified conditions.

8. What is the role of the displayName property in React?
displayName is an optional property in React that provides a human-readable display name for components, aiding in debugging and making component hierarchies more understandable.

9. Explain the concept of hooks rules in React.
Hooks rules include calling them only in functional components and custom Hooks, ensuring consistent order across renders.

10. What is the significance of the useImperativeHandle Hook?
useImperativeHandle customizes the instance value exposed when using React.forwardRef, allowing more control over the child component's API.

11. What is the purpose of the contextType property in class components?
contextType in class components is used to consume context, providing access to the nearest current value of the context.

12. Explain the concept of lazy loading in React.
Lazy loading in React involves dynamically loading components or assets only when needed, improving performance by reducing initial page load time.

13. What is the significance of the useEffect cleanup function?
The useEffect cleanup function performs tasks like clearing intervals or unsubscribing when a component is unmounted or dependencies change.

14. How does React handle state in class components compared to functional components?
In class components, state is managed using this.state and this.setState(); in functional components, the useState Hook is used.

15. What is the role of the React.memo function in functional components?
React.memo is a higher-order component that memoizes a functional component, preventing unnecessary re-renders when props remain unchanged.

16. Explain the purpose of the useEffect dependency array.
The useEffect dependency array specifies dependencies that, when changed, trigger the effect to run, controlling when the effect should re-execute.

17. What is the significance of the useRef Hook in React?
The useRef Hook creates mutable object references that persist across renders, often used for accessing and interacting with DOM elements imperatively.

18. How does React handle forms in controlled components?
React handles forms in controlled components by linking form elements to React state, enabling control and management of the form's data.

19. What is the purpose of the React.PureComponent class in React?
React.PureComponent is a base class that optimizes rendering performance by implementing a shallow prop and state comparison in shouldComponentUpdate.

20. Explain the concept of hooks in React.
Hooks in React are functions enabling state and other React features in functional components, allowing local component state and side effects.

21. What is the purpose of the React.StrictMode component?
React.StrictMode is a component that provides additional warnings and strict checks during development, helping catch common mistakes.

22. How does React handle routing?
React handles routing through libraries like React Router, allowing navigation between different views or components in a single-page application.

23. What is the significance of the dangerouslySetInnerHTML attribute in React?
dangerouslySetInnerHTML allows inserting raw HTML content in React, but its usage requires caution due to potential security risks.

24. Explain the concept of controlled components in React.
Controlled components in React have their form elements linked to React state, allowing control and management of the form's data.

25. What is the purpose of the useContext Hook in React?
The useContext Hook simplifies accessing context values within functional components, eliminating the need for render props.

26. What is the significance of the shouldComponentUpdate method in React?
shouldComponentUpdate in class components optimizes rendering by allowing control over when a component should re-render.

27. Explain the concept of code-splitting in React.
Code-splitting involves breaking down bundled JavaScript into smaller chunks, allowing more efficient loading of components as needed.

28. How does React handle events?
React handles events using synthetic events, providing a consistent interface across different browsers and allowing declarative event handling.

29. What is the purpose of the useMemo Hook in React?
The useMemo Hook memoizes the result of a function, optimizing performance by avoiding unnecessary recalculations.

30. Explain the concept of portals in React.
Portals in React allow rendering children components outside the DOM hierarchy of the parent component, providing flexibility in rendering components.

31. What is the purpose of the React.Fragment element?
React.Fragment is used to group multiple elements without introducing an additional DOM node, facilitating cleaner code structure.

32. Explain the concept of Redux middleware.
Redux middleware allows developers to intercept and augment Redux actions before reaching the reducer, useful for handling asynchronous actions and side effects.

33. What is the significance of the useLayoutEffect Hook in React?
useLayoutEffect is similar to useEffect but fires synchronously after all DOM mutations, making it suitable for tasks requiring accurate measurements or DOM layout manipulation.

34. How does React handle errors in components?
React handles errors using error boundaries, special components that catch JavaScript errors in their child component tree and log them.

35. Explain the concept of the key prop in React lists.
The key prop provides a unique identifier to elements in React lists, optimizing updates by helping identify changes, additions, or removals.

36. What is the purpose of the useCallback Hook in React?
The useCallback Hook memoizes a callback function, preventing unnecessary re-creation and optimizing performance when dependencies don't change.

37. How does React handle conditional rendering?
Conditional rendering in React is achieved through conditional statements or ternary operators in JSX, allowing components to render different content based on specified conditions.

38. What is the role of the displayName property in React?
displayName is an optional property in React that provides a human-readable display name for components, aiding in debugging and making component hierarchies more understandable.

39. Explain the concept of hooks rules in React.
Hooks rules include calling them only in functional components and custom Hooks, ensuring consistent order across renders.

40. What is the significance of the useImperativeHandle Hook?
useImperativeHandle customizes the instance value exposed when using React.forwardRef, allowing more control over the child component's API.

41. What is the purpose of the contextType property in class components?
contextType in class components is used to consume context, providing access to the nearest current value of the context.

42. Explain the concept of lazy loading in React.
Lazy loading in React involves dynamically loading components or assets only when needed, improving performance by reducing initial page load time.

43. What is the significance of the useEffect cleanup function?
The useEffect cleanup function performs tasks like clearing intervals or unsubscribing when a component is unmounted or dependencies change.

44. How does React handle state in class components compared to functional components?
In class components, state is managed using this.state and this.setState(); in functional components, the useState Hook is used.

45. What is the role of the React.memo function in functional components?
React.memo is a higher-order component that memoizes a functional component, preventing unnecessary re-renders when props remain unchanged.

46. Explain the purpose of the useEffect dependency array.
The useEffect dependency array specifies dependencies that, when changed, trigger the effect to run, controlling when the effect should re-execute.

47. What is the significance of the useRef Hook in React?
The useRef Hook creates mutable object references that persist across renders, often used for accessing and interacting with DOM elements imperatively.

48. How does React handle forms in controlled components?
React handles forms in controlled components by linking form elements to React state, enabling control and management of the form's data.

49. What is the purpose of the React.PureComponent class in React?
React.PureComponent is a base class that optimizes rendering performance by implementing a shallow prop and state comparison in shouldComponentUpdate.

50. Explain the concept of hooks in React.
Hooks in React are functions enabling state and other React features in functional components, allowing local component state and side effects.

Exploring MPC Wallets: Enhancing Blockchain Security and Privacy

Mohammad Shahbaz Alam — Sun, 06 Aug 2023 03:54:29 +0000

In the world of blockchain and cryptocurrencies, security and privacy are of utmost importance. As technology advances, innovative solutions are emerging to address these concerns. One such solution that is gaining popularity is the Multi-Party Computation (MPC) wallet. This article will explain what MPC wallets are, how they function, how they differ from smart contract wallets, and the significance of MPC in blockchain technology.

What is an MPC wallet?

An [MPC wallet](https://web3auth.io/mpc] is a cryptographic technique that is designed to enhance the security and privacy of digital assets stored in a blockchain. Unlike traditional single-key wallets, where a single private key grants access to funds, MPC wallets distribute control over private keys among multiple parties. This collaborative approach prevents any single entity from having complete access, reducing the risk of unauthorized access or malicious attacks.

How does an MPC wallet work?

MPC wallets leverage mathematical computations and cryptography to achieve enhanced security. Multiple participants each contribute a part of the private key without revealing their components. These partial keys are then combined through complex algorithms to generate the complete private key only when needed for transactions. This ensures that no single participant possesses the full key at any point, significantly reducing the vulnerability of the wallet.

What is the difference between an MPC wallet and a smart contract wallet?

Although both MPC wallets and smart contract wallets contribute to the security of digital assets, they differ in their underlying mechanisms. An MPC wallet relies on cryptographic protocols and mathematical calculations to ensure the safety of private keys. On the other hand, a smart contract wallet operates within the confines of a blockchain's scripting capabilities. It executes predefined rules and conditions, often governed by a smart contract, to manage funds. MPC wallets prioritize privacy and security through collaboration, whereas smart contract wallets emphasize automation and predetermined rules.

What does MPC stand for in the context of blockchain?

In the realm of blockchain, "MPC" stands for Multi-Party Computation. This term refers to a cryptographic technique that enables multiple parties to compute a function while keeping their inputs private jointly. This technique has far-reaching applications beyond wallets, including secure data sharing, privacy-preserving computations, and more. In the context of blockchain, MPC technology offers a groundbreaking way to manage private keys and enhance the overall security posture of the ecosystem.

In conclusion, the emergence of MPC wallets represents a significant advancement in blockchain security. By distributing the control over private keys among multiple participants and utilizing complex cryptographic processes, MPC wallets minimize the risks associated with single points of failure. As the digital landscape continues to evolve, solutions like MPC wallets contribute to a more secure and privacy-focused blockchain ecosystem.

To explore further and integrate enhanced security measures for your digital assets, consider adopting an [MPC wallet](https://web3auth.io/mpc]. The future of blockchain security lies in collaborative technologies that empower users to take control of their assets without compromising their privacy.

A Comprehensive Guide to Deep links and App Links in Android

Mohammad Shahbaz Alam — Thu, 03 Aug 2023 07:59:21 +0000

For Android developers, understanding the concepts of Deep links and App Links is crucial to providing a seamless user experience for end users. This guide delves into the differences between Deep links and App Links, importance of the security concerns, and how to implement and test these links effectively.

Whether you're a developer integrating Web3Auth’s Android SDK or working with ReactNative/Flutter, this guide will help you master the art of handling links easily in your Android applications.

Understanding Deep Links and App Links

What are Deep Links?

To start, let's define what Deep Links are. Deep Links are strings of characters that enable users to access specific content or features within an Android app. They consist of three essential components: scheme, authority, and path. These links can handle custom schemes or universal resource identifiers (URIs) for seamless navigation.

What are App Links?

App Links are a specialized form of Deep Links that allow Android apps to handle HTTP and HTTPS web links. With App Links, developers can associate their app with specific web domains, providing users with a seamless experience when navigating between websites and the app.

The Difference Between Android App Links and Web Links:

While Android App Links and Web Links share similarities in their functionality as methods to link users to specific content, they have fundamental differences that cater to different user scenarios. Understanding these distinctions will help developers make informed decisions about which link type to use in various situations.

Android App Links:

Android App Links are a specialized form of Deep Links that offer a more seamless and integrated user experience for Android users. When a user clicks on an Android App Link, it automatically opens the associated app if it is installed on the device. This behavior eliminates the need for a disambiguation dialog that asks users to choose between opening the link in the app or the browser.

Key Characteristics of Android App Links:

Immediate App Invocation: Android App Links directly invoke the app, providing users with a faster and smoother experience as they are taken directly to the relevant content within the app.
Verified Association: Android App Links are explicitly associated with a specific app through a verification process, which ensures that only the designated app can handle these links. This verification is achieved through the use of Digital Asset Links JSON files hosted on the website's domain.
No Disambiguation Dialog: The absence of a disambiguation dialog streamlines the user journey and reduces the risk of users inadvertently choosing the wrong app to handle the link.

Web Links:

On the other hand, Web Links are links that use the HTTP and HTTPS schemes and open in the device's default web browser. They are more generic and platform-agnostic, providing a consistent experience across different operating systems and devices.

Key Characteristics of Web Links:

Universal Accessibility: Web Links are accessible to all users, regardless of whether they have the app installed on their device. When users click on a Web Link, it opens the associated web page in the browser, making it a useful method for sharing content with a broader audience.
Not App-Specific: Unlike Android App Links, Web Links do not require any specific app association or verification. They can be used universally and do not rely on a particular app's presence on the device.
Potential Disambiguation: Since Web Links are not bound to a specific app, users may have multiple apps that can handle a particular link. A disambiguation dialog may appear in such cases, prompting users to select the desired app for link handling.

Ensuring App Link Handling in Your Android App

Continue reading it here.

OAuth 2.0 and OpenID Connect Explained: Building Secure Authentication Systems

Mohammad Shahbaz Alam — Mon, 04 Jul 2022 05:13:31 +0000

// Detect dark theme var iframe = document.getElementById('tweet-1543917235181604864-66'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1543917235181604864&theme=dark" }

OAuth 2.0 and OpenID Connect (OIDC) are two essential protocols in web development, yet they often need to be understood and applied. This guide will delve into the intricacies of OAuth 2.0 and OIDC, clarify their roles, terminologies, and implementation flows, and shed light on how they work together to provide secure authentication and authorization mechanisms.

Understanding OAuth 2.0

OAuth 2.0 is frequently misconceived as a protocol solely for authentication when, in fact, it primarily deals with authorization. At its core, OAuth 2.0 is an open standard designed for delegated authorization, allowing third-party applications to access restricted resources on behalf of a user with their consent.

Roles in OAuth 2.0

Resource Owner: The entity capable of granting access to a protected resource.
Client: The application makes requests for protected resources.
Authorization Server: This server is responsible for issuing access tokens after authenticating the resource owner and obtaining authorization.
Resource Server: Hosts the protected resources that the client seeks to access.

Key OAuth 2.0 Terminologies

Access Token: Credentials granted to the client by the authorization server, allowing access to protected resources.
Scope: Specifies the extent of access granted to the client by the resource owner, which is crucial for defining the access boundaries in OAuth 2.0.

Authorization Grant

An authorization grant is a credential representing the resource owner's consent for the client to access protected resources. There are different types of authorization grants, but two primary ones are worth noting:

Authorization Code Flow Grant: In this flow, the client obtains an authorization code from the authorization server, which it then exchanges for an access token via a backend server.

Implicit Flow Grant: In the implicit flow, the client, often a single-page application (SPA), receives the access token from the authorization server.

Introducing OpenID Connect (OIDC)

While OAuth 2.0 provides a framework for authorization, it lacks specific guidelines for authentication. This is where OpenID Connect comes into play. OIDC serves as an identity layer built on OAuth 2.0, facilitating user authentication through the authorization server.

OIDC Terminology

ID Token: A token containing a set of personal attributes about a user, typically presented as a JWT.

OIDC Implementation Flows

Implicit Flow: The SPA obtains the ID Token from the authorization server in this flow.

Authorization Code Flow: This flow is preferred for its enhanced security. It involves the client obtaining the ID Token via a backend server.

By leveraging OIDC, developers can authenticate users securely while benefiting from the robust authorization mechanisms provided by OAuth 2.0.

In conclusion, understanding the nuances of OAuth 2.0 and OpenID Connect is pivotal for implementing secure and efficient authentication and authorization processes in modern web applications. By grasping the roles, terminologies, and implementation flows outlined in this guide, developers can navigate these protocols effectively, ensuring user data protection and their applications' integrity.

Demystifying Login with Ethereum

Mohammad Shahbaz Alam — Tue, 24 May 2022 13:09:00 +0000

Geth is an Ethereum client written in Go. This means running Geth turns a computer into an Ethereum node. Ethereum is a peer-to-peer network where information is shared directly between nodes rather than being managed by a central server. Nodes compete to generate new blocks of transactions to send to its peers because they are rewarded for doing so in Ethereum’s native token, ether (ETH). On receiving a new block, each node checks that it is valid and adds it to their database. The sequence of discrete blocks is called a “blockchain”. The information provided in each block is used by Geth to update its “state” - the ether balance of each account on Ethereum. There are two types of account: externally-owned accounts (EOAs) and contract accounts. Contract accounts execute contract code when they receive transactions. EOAs are accounts that users manage locally in order to sign and submit transactions. Each EOA is a public-private key pair, where the public key is used to derive a unique address for the user and the private key is used to protect the account and securely sign messages. Therefore, in order to use Ethereum, it is first necessary to generate an EOA (hereafter, “account”). This tutorial will guide the user through creating an account, funding it with ether and sending some to another address.

Install Geth

There are several ways to install Geth, including via a package manager, downloading a pre-built bundle, running as a docker container or building from downloaded source code.

The easiest way to install go-ethereum on MacOS is to use the Geth Homebrew tap. The first step is to check that Homebrew is installed. The following command should return a version number.

brew -v

If a version number is returned, then Homebrew is installed. If not, Homebrew can be installed by following the instructions here. With Homebrew installed, the following commands add the Geth tap and install Geth:

brew tap ethereum/ethereum
brew install ethereum

The above command will installs the latest stable release.

Check whether geth is installed or not by running the below command in your terminal:

geth --help

It should output command-line options.

Start Geth over HTTP Server

Run the below command to start Geth over HTTP, enables access from any origin and exposes it's api's.

geth --http --http.corsdomain "*" --http.api personal,eth,web3

--http flag enables the HTTP server.
--http.corsdomain "*" enables access from any origin.
--http.api personal,eth,web3 enable access to APIs like "personal" which is by default not whitelisted.

Create a Node JS application to interact with Geth[ETH]

npm init -y

Install Web3.js

npm install web3

Create an index.js file and paste the following:

var Web3 = require('web3')
var provider = 'http://localhost:8545'
var web3Provider = new Web3.providers.HttpProvider(provider)
var web3 = new Web3(web3Provider)

var msg = {
  msg_value: 'This is a Secret Message',
}
var secret = '!@supersecret' // In real world app, this will be replaced with the private key.

web3.eth.personal.newAccount(secret).then(pub_address => {
  console.log('ETH Public Address: ')
  console.log(pub_address)
  msg = {...msg, pub_address: pub_address.toLowerCase()}
  web3.eth.personal.sign(msg, pub_address, secret).then(signature => {
    console.log('Signature: ')
    console.log(signature)
    web3.eth.personal.ecRecover(msg, signature).then(recover_public_address => {
      console.log('Recovered ETH Public Address: ')
      console.log(recover_public_address)
      if (recover_public_address == msg.pub_address) {
        console.log('Matched')
        // Access allowed
      }
    })
  })
})

Let me explain, what's going on here.

These lines are making a connecting between ETH blockchain (Geth running locally) and Web3.js library.

var Web3 = require('web3')
var provider = 'http://localhost:8545'
var web3Provider = new Web3.providers.HttpProvider(provider)
var web3 = new Web3(web3Provider)

This is the msg we want to sign using secret/private key.

var msg = {
  msg_value: 'This is a Secret Message',
}
var secret = '!@supersecret'

We are calling personal.getAccount() to get an ETH public address.

web3.eth.personal.newAccount(secret).then(pub_address => {
  console.log('ETH Public Address: ')
  console.log(pub_address)
})

We are updating the msg to include the ETH public address, so that later when we ecRecover the signature to get the public address, we can check the ETH public address in the message with the retrieved public address from ecRecover().

In the following lines, we are signing the message(msg, that also includes the user's eth public address) using user's ETH public address, and secret/private key.

web3.eth.personal.sign(msg, pub_address, secret)
    .then(signature => {
       console.log('Signature: ')
       console.log(signature)
    }
)

The above code will return a signature, that looks like:
0x30755ed65396facf86c53e6217c52b4daebe72aa4941d89635409de4c9c7f9466d4e9aaec7977f05e923889b33c0d0dd27d7226b6e6f56ce737465c5cfd04be400

The above signature is passed to ecRecover along with the original message returing the public address used to sign the message.

web3.eth.personal.ecRecover(msg, signature).then(recover_public_address => {
      console.log('Recovered ETH Public Address: ')
      console.log(recover_public_address)
    })

If the recovered_public_address is same as the public_address received in the message, it is fair to assure, the user has signed the message and access may be granted.

if (recover_public_address == msg.pub_address) {
  console.log('Matched')
}

An Auth flow using ETH.

All this is possible because of the Elliptic Curve Digital Signature Algorithm, or ECDSA.

Importance of Cryptographic signatures in Blockchain

Cryptographic signatures are a key part of the blockchain. They are used to prove ownership of an address without exposing its private key.

This is based on mathematical formulas. We take an input message, a private key and a (usually) random secret, and we get a number as output, which is the signature. Using another mathematical formula, this process can be reversed in such a way that the private key and random secret are unknown but can be verified.

Ethereum SECP256k1 elliptic curve.

Using elliptic curve point manipulation, we can derive a value from the private key, which is not reversible. This way we can create signatures that are safe and tamperproof. The functions that derive the values are called “trapdoor functions”:

Possible Attack

For example, if user A signs a message(M) and sends the signature(S), user B can copy that signed message[S(M)] and original msg and send it to gain access.

And using our current example code, since the msg includes the public address used to receive the signature. When using ecRecover with the signature and msg(containing public address), it will give back the eth address allowing access to the resource.

Possible Solution,

How about adding challenge to the msg or encoding the msg to get a JWT token, using another set of secret? These's a lot of possible solution to add challenge at this step to identify the original user and authenticate securely.

Web3.js Functions

newAccount

Creates a new account.

web3.eth.personal.newAccount(password, [callback])

Note: Never call this function over a unsecured Websocket or HTTP provider, as your password will be sent in plain text!

Example

web3.eth.personal.newAccount('!@superpassword')
.then(console.log);
> '0x1234567891011121314151617181920212223456'

sign

The sign method calculates an Ethereum specific signature.

web3.eth.personal.sign(dataToSign, address, password [, callback])

Example

web3.eth.personal.sign("Hello world", "0x11f4d0A3c12e86B4b5F39B213F7E19D048276DAe", "test password!")
.then(console.log);
> "0x30755ed65396facf86c53e6217c52b4daebe72aa4941d89635409de4c9c7f9466d4e9aaec7977f05e923889b33c0d0dd27d7226b6e6f56ce737465c5cfd04be400"

ecRecover

Recovers the account that signed the data.

web3.eth.personal.ecRecover(dataThatWasSigned, signature [, callback])

Example

web3.eth.personal.ecRecover("Hello world", "0x30755ed65396facf86c53e6217c52b4daebe72aa4941d89635409de4c9c7f9466d4e9aaec7977f05e923889b33c0d0dd27d7226b6e6f56ce737465c5cfd04be400").then(console.log);
> "0x11f4d0A3c12e86B4b5F39B213F7E19D048276DAe"

Though this approach to authenticate a user using blockchain is way secure than the centralised authentication where private key 🔑 sits in the centralised server. Any breach to centralized server will expose the user's private key.

The approch used in this guide is self-custodial, here, user's are responsible of keeping the secret/private key secure. Which again is a flawed system, user's are prone to attacks too and lossing the private key will be loosing the digital identity and assets.

There's a better approach, that is non-custodial and uses Multi Party Computation. MPC enables multiple parties – each holding their own private data – to evaluate a computation without ever revealing any of the private data held by each party (or any otherwise related secret information).

In my next post, I will talk about how different companies are protecting your Private Key and how's future looks like for true Self-Sovereign Identity without any compromises.

Add MFA support easily with Magic

Mohammad Shahbaz Alam — Tue, 16 Nov 2021 15:00:43 +0000

Multi-Factor Authentication (MFA) is an important part of a secure authentication process, but it's painful for developers to set it up correctly.

In this post, I will walk you through to setup MFA in a sample application to add extra level of security.

Pre-requisites

All you need to get started is a Magic account.

New to Magic? Sign up for free

Set up

Add the login form script

Create a new login page index.html and add the script tag below.

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1" />

  <!-- Start the login flow just by including this script tag! -->
  <script
    src="https://auth.magic.link/pnp/login"
    data-magic-publishable-api-key="pk_live_7F4F8AEF74A0C9BC"
    data-redirect-uri="/callback.html"
  ></script>
</head>

Your API key can be found on the Home page of your Magic Dashboard.

This will generate a pre-built login form based on the branding and login methods you’ve enabled via Dashboard.

Add the callback script

Next, create a callback.html page containing the script tag below to handle the authentication callback.

<!DOCTYPE html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1" />

  <!-- Automatically handle auth callback using Magic! -->

  <script
    src="https://auth.magic.link/pnp/callback"
    data-magic-publishable-api-key="pk_live_7F4F8AEF74A0C9BC"
  ></script>

  <!-- Use data from Magic! -->

  <script>
    window.addEventListener("@magic/ready", (e) => {
      const { idToken, userMetadata, oauth } = e.detail;
    });
  </script>

  <link rel="stylesheet" href="/css/main.css" />
</head>

<!-- UI implementation -->

<body>
  <div class="page">
    <h1>Now let's enable MFA</h1>
    <div class="data">
      <a class="link" href="/settings.html">Open user settings</a> to enable
      MFA.
    </div>
    <div class="data">
      Once enabled, <a class="link" href="/logout.html">log out</a> then log
      back in to try multi-factor login.
    </div>
  </div>
</body>

Upon a user's successful login, you may wish to perform your own client-side and server-side business logic. To do so, you can hook into the @magic/ready event on the window object of the page containing your https://auth.magic.link/pnp/callback script.

The @magic/ready event contains an object of custom data attached to event.detail. The following fields are surfaced:

magic - An instance of Magic JS which can be used to interface with any Magic methods at a low-level.
idToken - A DID token for the user.
userMetadata - Up-to-date user metadata for the user.
oauth - An OAuth response for the user, if the login method was initiated through an OAuth provider — otherwise, this field is undefined.

Add the logout script

Now, create a logout.html page containing the script tag below to handle the logout function.

<!DOCTYPE html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1" />

  <!-- Automatically handle logout using Magic! -->

  <script
    src="https://auth.magic.link/pnp/logout"
    data-magic-publishable-api-key="pk_live_7F4F8AEF74A0C9BC"
    data-redirect-uri="/"
  ></script>
</head>

Implementing User Settings for MFA

Magic provides an out-of-the-box settings widget through which your users can self-service different functions of their account, including enabling or disabling multi-factor auth (MFA).

Now, create a settings.html page containing the script tag below:

<!DOCTYPE html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1" />

  <!-- Automatically handle logout using Magic! -->

  <script
    src="https://auth.magic.link/pnp/settings"
    data-magic-publishable-api-key="pk_live_7F4F8AEF74A0C9BC"
    data-redirect-uri="/callback.html"
  ></script>
</head>

Users will automatically be redirected to the URI provided in data-redirect-uri (or, if no value is provided, a relative path of /callback) upon dismissal of the settings widget. In your custom callback logic, you will have access to a prevUserMetadata field on the @magic/ready event data so that settings updates can be manually diffed and utilized in your app. If a user is not currently logged-in upon accessing the settings widget, they will be automatically redirected to the URI provided in data-login-uri (or, if no value is provided, window.location.origin is used instead).

Add some CSS to look nice

Create a css/main.css file and paste the below code:

.page {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .page a {
    margin-top: 1rem;
  }

  .data:not(:first-child) {
    margin-top: 2rem;
  }

  .data label {
    font-size: 1.5em;
    font-weight: bold;
    font-family: "Roboto", sans-serif;
  }

  .data pre {
    background-color: gainsboro;
    padding: 1.5em;
    width: 500px;
    border-radius: 1em;
    overflow-x: auto;
  }

  h1 {
    color: #18171a;
  }

  .data {
    font-family: Inter;
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 28px;
    max-width: 368px;
  }

  .link {
    color: #6851ff;
  }

Enable MFA in Dashboard

Enable through Multi-factor Auth Dashboard page.

User's 1st login flow after MFA is configured

It's time to check MFA in our application. The home page(https://lmr9z.csb.app) would look something like above 👆, with Email and SMS login option enabled. You can enable Social login options too, but MFA is currently supported for email and SMS primary factors.

Upon providing your email and clicking Log in / Sign up button, you will see a pop-up window saying "Check your email".

Note: Don't close this tab, Check your email and click the link to log in.

Upon successful login, you'll be redirected to callback page. Here, we will enable MFA. Once enabled, upon next login, MFA flow will be used.

Let's open the user's settings page by clicking Open user settings link on the page.

Here, you'll see the 2-step verification as OFF.
Click on Turn on button to enable it.

You'll need to choose an authenticator app like Google Authenticator or Authy to enable two-step verification.

Now, scan the QR code displayed with your authenticator app and click on the Next button.

In this step, please enter the 6-digit code from your authenticator app.

Upon success, you'll be prompted to save your recovery code. Store this in a safe place. This code can be used to log in if you lose access to your authenticator app.

Click on Finish setup.

2-step verification status is now ON.

Logout and Log back in to see the MFA in action.

In your next visit, upon clicking the link in your email, you'll be prompted to enter the 6-digit code from your authenticator app or the same recovery code you stored in some place safe.

That's it for this post, I hope to see your application using MFA.

Here are some useful links:

Live Demo: https://lmr9z.csb.app
Code on GitHub: https://github.com/magiclabs/example-mfa
MFA: https://magic.link/docs/login-methods/mfa
Magic: https://magic.link

Add Magic Login with just 2 script tags

Mohammad Shahbaz Alam — Wed, 27 Oct 2021 16:35:12 +0000

In this post, learn how to integrate Magic's custom, production-ready passwordless login to your website with just 2 script tags and a Magic account.

New to Magic? Sign up for free

Currently it only supports Web(JavaScript). Stay tuned for React Native, iOS and Android.

Step 1 - Add login form script to login page.

Create a new login page and add the script tag below:

<!-- /login.html -->
<script
  src="https://auth.magic.link/pnp/login"
  data-magic-publishable-api-key="[YOUR_PUBLISHABLE_API_KEY_HERE]"
  data-redirect-uri="/callback"> <!-- Replace with the location of your callback.html -->
</script>

Your API key can be found on the Home page of your Magic Dashboard.

This will generate a pre-built login form based on the branding and login methods you’ve enabled via Dashboard. Users will automatically be redirected to the URI provided in data-redirect-uri upon authorization. If no data-redirect-uri is specified, a relative path — /callback — is automatically used as a fallback.

Step 2 - Add the callback script

Next, create a page containing the script tag below to handle the authentication callback.

<!-- /callback.html -->
<script
  src="https://auth.magic.link/pnp/callback"
  data-magic-publishable-api-key="[YOUR_PUBLISHABLE_API_KEY_HERE]">
</script>

Try it out!

Open your login page to try out your new end-to-end Magic authentication flow.

Logging users out

You can optionally provide an endpoint in your app to log users out of their Magic session. Users will automatically be redirected to the URI provided in data-login-uri or data-redirect-uri upon successful logout. If no data-login-uri or data-redirect-uri is specified, the current value of window.location.origin is used instead.

<!-- /logout.html -->
<script
  src="https://auth.magic.link/pnp/logout"
  data-magic-publishable-api-key="[YOUR_PUBLISHABLE_API_KEY_HERE]"
  data-redirect-uri="/login"> <!-- Replace with the location of your login.html -->
</script>

To learn more about script options, customization and FAQs read here.

DEV Community: Mohammad Shahbaz Alam

Using x402-next with Next.js 16

Installation

Implementation for Next.js 16

Example

Differences from Next.js 15 and Earlier

Example Project

A Step-by-Step Guide on how to Register a Name on Ethereum Using Web3Auth and Clusters.xyz

Prerequisites

Step 1: Import Required Libraries

Step 2: Initialize Web3Auth

Step 3: Connect to Web3Auth

Step 4: Create Public and Wallet Clients

Step 5: Initialize Clusters

Step 6: Check Name Availability

Summary

Moving from Create-React-App to Vite for Web3Auth Projects

Step 1 - Remove Create React App

Step 2 - Install Vite Dependencies

Step 3 - Add vite.config.ts and Install empty-module

Step 4 - Move index.html and Include Polyfills

Step 5 - Create vite-env.d.ts

Step 6 - Update Scripts in package.json

Step 7 - Update tsconfig.json

Handling URI Malformed Error

Optional Steps

Enhancing Security for Sign-In with Ethereum: Phishing and Replay Attacks

Enhancing Security for Sign-In with Ethereum

Understanding Phishing Attacks

Malicious Sites

Combating Replay Attacks

Nonce Usage

Session Management

Conclusion

Understanding Passport.js for Beginners: A Simple Guide

Passport Strategy

Configuration:

Handler Function:

Middleware

Setup:

Login Flow:

isAuthenticated:

Session Handling

deserializeUser:

serializeUser:

Efficient React Development: A Deep Dive into Components, Hooks, and Performance Optimization

Exploring MPC Wallets: Enhancing Blockchain Security and Privacy

A Comprehensive Guide to Deep links and App Links in Android

Understanding Deep Links and App Links

What are Deep Links?

What are App Links?

The Difference Between Android App Links and Web Links:

Android App Links:

Web Links:

Ensuring App Link Handling in Your Android App

OAuth 2.0 and OpenID Connect Explained: Building Secure Authentication Systems

Understanding OAuth 2.0

Roles in OAuth 2.0

Key OAuth 2.0 Terminologies

Authorization Grant

Introducing OpenID Connect (OIDC)

OIDC Terminology

OIDC Implementation Flows

Demystifying Login with Ethereum

Install Geth

Start Geth over HTTP Server

Create a Node JS application to interact with Geth[ETH]

Install Web3.js

Importance of Cryptographic signatures in Blockchain

Possible Attack

Possible Solution,

Web3.js Functions

newAccount

Example

sign

Example

ecRecover

Example

Add MFA support easily with Magic

Pre-requisites

Step 3 - Add `vite.config.ts` and Install `empty-module`

Step 4 - Move `index.html` and Include Polyfills

Step 5 - Create `vite-env.d.ts`

Step 6 - Update Scripts in `package.json`

Step 7 - Update `tsconfig.json`

`deserializeUser`:

`serializeUser`: