Emdadul's Blog

How to Deploy an AI Agent with Amazon Bedrock AgentCore

Tue, 14 Oct 2025 18:00:00 GMT

Amazon Bedrock AgentCore is a managed service that makes it easier to build, deploy, and operate AI agents securely at scale on AWS. It works seamlessly with frameworks like Strands Agents, LangGraph, CrewAI, and LlamaIndex, while taking care of the complex tasks such as runtime management, IAM role configuration, and observability.

In this guide, you’ll set up your environment, create and test a simple AI agent locally, deploy it with the AgentCore starter toolkit, and invoke it through the AWS SDK.

Prerequi sites
Step 1: Set U p AWS CLI
Step 2: Install a nd Create You r Agent
- Cr eate a re quirements.txt file
- Breaking Down the Code
St ep 3: Test th e Agent L ocally
Step 4: D epl oy to AgentCore Ru ntime
Step 5: Invok e the Agent with AWS SDK
St ep 6: C le an Up
Common Iss ues
Conclu sion

Prerequisites

B efore you sta rt, make sure you have:

Step 1: Set Up AWS CLI

First, install the AWS CLI if you do not already have it. On Linux or macOS: AWS CLI setup guide.

Next, configure a profile with AWS SSO:

aws configure sso --profile my-profile

You’ll be prompted to enter details such as:

SSO start URL – the URL for your AWS organization’s IAM Identity Center portal.
SSO region – the AWS region where IAM Identity Center is configured.
Account ID – the AWS account you want to access.
Role name – the IAM role you want to assume within that account.
Default region – the region that will be used when making requests.
Default output format – for example, json, yaml, or table.

This creates a new profile called my-profile in your AWS CLI configuration, allowing you to use that identity to interact with AWS services.

Next, you have to verify your identity. Once your profile is configured, confirm that the CLI is correctly authenticating with AWS by running:

aws sts get-caller-identity --profile my-profile

This command returns details about your identity, including:

Account – the AWS account ID you’re authenticated against.
UserId – the unique identifier of your IAM role or user.
Arn – the full Amazon Resource Name (ARN) of your identity.

If the command succeeds and shows your account information, it means your profile is properly set up and ready to use with AWS SDKs, the AWS CLI, or services like Bedrock AgentCore.

Step 2: Install and Create Your Agent

First, you need to set up Python virtual environment. This prevents dependency conflicts with other projects on your machine.

Let’s create and activate a virtual environment:

On macOS/Linux:

python3 -m venv .venv
source .venv/bin/activate

On Windows (PowerShell or CMD):

python -m venv .venv
.venv\Scripts\activate

python -m venv .venv → creates a virtual environment named .venv in your project folder.
.venv\Scripts\activate → activates the environment.

Once activated, your terminal prompt will show (.venv) at the beginning. To deactivate:

deactivate

Create a `requirements.txt` file

List the dependencies your project needs by creating a file named requirements.txt in the project root:

bedrock-agentcore
strands-agents

This makes it easy to install everything at once with:

pip install -r requirements.txt

Create a file called my_agent.py and add the following code:

from bedrock_agentcore import BedrockAgentCoreApp
from strands import Agent

app = BedrockAgentCoreApp()
# Create an agent with default settings
agent = Agent()

@app.entrypoint
def invoke(payload):
    """Your AI agent function"""
    user_message = payload.get("prompt", "Hello! How can I help you today?")
    result = agent(user_message)
    return {"result": result.message}

if __name__ == "__main__":
    app.run()

Breaking Down the Code

BedrockAgentCoreApp – the core runtime wrapper that handles configuration, execution, and integration with AWS services.
Agent – a basic agent object from the Strands library that can process and respond to prompts.
BedrockAgentCoreApp() creates the container application that manages your agent’s lifecycle.
Agent() initializes a simple Strands agent with default settings. In a real-world case, you can customize this with specific tools, memory, or reasoning logic.
The @app.entrypoint decorator marks this function as the callable entry point for your agent. Whenever a request is sent to the agent (via the AWS SDK, CLI, or local test), this function is invoked.
The agent looks for a "prompt" in the incoming payload.
If no prompt is provided, it defaults to "Hello! How can I help you today?".
The Agent object then processes this input and generates a response.

Step 3: Test the Agent Locally

Run the agent:

python3 -u my_agent.py

Open another terminal and send a request:

curl -X POST http://localhost:8080/invocations \
  -H "Content-Type: application/json" \
  -d '{"prompt": "Hello!"}'

If successful, you will see:

{"result": "Hello! I'm here to help..."}

You can stop the agent with Ctrl+C.

Step 4: Deploy to AgentCore Runtime

Now you are ready to deploy your agent to AWS.

Configure the agent:

agentcore configure -e my_agent.py

This creates a configuration file called bedrock_agentcore.yaml.

You can launch the deployment with this command:

agentcore launch

The output will include:

The Amazon Resource Name (ARN) of your agent.
The location of logs in Amazon CloudWatch.

Test your deployed agent:

agentcore invoke '{"prompt": "tell me a joke"}'

If you get a joke back, your agent is running successfully.

Step 5: Invoke the Agent with AWS SDK

You can call your agent programmatically using Boto3. Create a file called invoke_agent.py:

import json
import boto3

agent_arn = "YOUR_AGENT_ARN"
prompt = "Tell me a joke"

agent_core_client = boto3.client("bedrock-agentcore")

payload = json.dumps({"prompt": prompt}).encode()

response = agent_core_client.invoke_agent_runtime(
    agentRuntimeArn=agent_arn,
    payload=payload
)

content = []
for chunk in response.get("response", []):
    content.append(chunk.decode("utf-8"))
print(json.loads("".join(content)))

Run the script:

python invoke_agent.py

You should see the AI agent’s response.

Step 6: Clean Up

If you no longer want to run the agent, delete the runtime:

aws bedrock-agentcore delete-agent-runtime --agent-runtime-arn <your_arn>

Common Issues

Permission denied: Check your AWS credentials and IAM policies.
Docker warning: Ignore this unless you use — local or — local-build.
Model access denied: Enable model access (such as Claude Sonnet 4.0) in the Bedrock console.
Build errors: Check CloudWatch build logs and IAM policies.

Conclusion

Amazon Bedrock AgentCore makes it easy to create and deploy AI agents without dealing with complex container setups or infrastructure. You can test locally, launch to the cloud with one command, and monitor everything through CloudWatch.

This workflow is ideal for developers who want to move from prototype to production quickly while staying inside the AWS ecosystem.

Resources:

https://strandsagents.com/latest/

https://aws.amazon.com/bedrock/agentcore/

How to Add a Native Rich Text Editor in Expo / React Native (No WebView)

Tue, 12 Aug 2025 18:36:09 GMT

Rich text editing in React Native has always been tricky — especially when you want native performance instead of relying on WebViews. Most available libraries work great for the web, but fall short on mobile.

That’s where [expo-rte](https://github.com/mdadul/expo-rte) comes in.
It’s a pure native rich text editor for Expo and React Native, built using expo-modules, Kotlin, and Swift. No WebView. Fully cross-platform.

In this guide, you’ll learn how to install, set up, and customize expo-rte in your app.

Why `expo-rte`?

Pure native UI — smooth scrolling, native gestures, no WebView overhead.
Cross-platform — works on both iOS and Android.
Feature-rich — bold, italic, underline, strikethrough, bullet lists, numbered lists, undo/redo, and more.
Customizable — configure toolbar layout, button density, and styles.

This guide will walk you through installing and using it in your Expo or React Native project.

Install `expo-rte`

Run:

npm install expo-rte
# or
yarn add expo-rte

Since it’s a native module, you’ll need to run a development build (Expo Go won’t work):

npx expo run:ios
npx expo run:android

Add the Editor to Your App

Create a simple editor screen:

import React, { useRef } from 'react';
import { View } from 'react-native';
import { RichTextEditor, RichTextEditorRef } from 'expo-rte';

export default function App() {
    const editorRef = useRef<RichTextEditorRef>(null);
    const handleChange = ({ nativeEvent }) => {
        console.log('Content:', nativeEvent.content);
    };
    return (
        <View style={{ flex: 1, padding: 20 }}>
            <RichTextEditor
                ref={editorRef}
                content="

                Start typing...

                "
                placeholder="Enter your text here..."
                onChange={handleChange}
                style={{ height: 300 }}    
        />

    );
}

expo-rte lets you control which formatting options appear.

import { ToolbarConfig } from 'expo-rte';

const toolbarConfig: ToolbarConfig = {
  adaptive: true,
  density: 'comfortable',
  scrollable: true,
  groupButtons: true,
  buttons: [
    { type: 'bold', icon: 'B', label: 'Bold', group: 'format' },
    { type: 'italic', icon: 'I', label: 'Italic', group: 'format' },
    { type: 'underline', icon: 'U', label: 'Underline', group: 'format' },
    { type: 'bullet', icon: '•', label: 'Bullet List', group: 'list' },
    { type: 'numbered', icon: '1.', label: 'Numbered List', group: 'list' },
    { type: 'undo', icon: '↶', label: 'Undo', group: 'action' },
    { type: 'redo', icon: '↷', label: 'Redo', group: 'action' },
  ],
};

Pass it into your editor:

<RichTextEditor toolbarConfig={toolbarConfig} />

Control the Editor Programmatically

With a ref, you can:

editorRef.current?.setContent('<p>New content</p>');
const html = await editorRef.current?.getContent();
editorRef.current?.undo();
editorRef.current?.redo();

Troubleshooting

Editor not showing? Make sure you’re using a development build.
Buttons not working? Check your toolbarConfig.
Performance issues? Enable adaptive: true in the toolbar config.

Conclusion: With expo-rte, you can add a native rich text editor to your Expo/React Native app—no WebView required. It’s fast, customizable, and works across iOS and Android.

📌 Full docs & source code: github.com/mdadul/expo-rte

How to Implement Multi-Factor Authentication (MFA) with TOTP in Your Web Application

Mon, 07 Jul 2025 07:35:39 GMT

In today’s digital landscape, securing user accounts with just a password isn’t enough. Multi-Factor Authentication (MFA) adds an essential layer of security by requiring users to provide two or more verification factors. In this comprehensive guide, we’ll walk through implementing Time-based One-Time Password (TOTP) authentication in a full-stack web application.

Understanding MFA and TOTP

What is Multi-Factor Authentication?

Multi-Factor Authentication (MFA) is a security method that requires users to provide two or more verification factors to gain access to an account. These factors typically fall into three categories:

Something you know (password, PIN)
Something you have (smartphone, hardware token)
Something you are (fingerprint, facial recognition)

What is TOTP?

Time-based One-Time Password (TOTP) is a computer algorithm that generates a one-time password using the current time as a source of uniqueness. It’s standardized in RFC 6238 and is widely used by authenticator apps like Google Authenticator, Authy, and Microsoft Authenticator.

Key characteristics of TOTP:

Time-based: Codes expire every 30 seconds
Synchronized: Both server and client use the same time window
Secure: Based on HMAC-SHA1 cryptographic algorithm
Standardized: Works across different authenticator apps

Setting Up the Backend

Let’s start by setting up the necessary dependencies for our Node.js/Bun backend.

Dependencies

{
  "dependencies": {
    "speakeasy": "^2.0.0",
    "qrcode": "^1.5.4",
    "hono": "^4.6.3",
    "jsonwebtoken": "^9.0.2",
    "bcryptjs": "^2.4.3"
  },
  "devDependencies": {
    "@types/speakeasy": "^2.0.10",
    "@types/qrcode": "^1.5.5"
  }
}

Core Libraries Explained

speakeasy: The core library for TOTP generation and verification
qrcode: Generates QR codes that users can scan with their authenticator apps (if you’re a .NET developers, you can use IronQr)
hono: Fast web framework (you can substitute with Express.js)
jsonwebtoken: For JWT token management
bcryptjs: For password hashing

TOTP Utility Setup

First, let’s create a utility file to export our TOTP dependencies:

// src/utils/totp.ts
import * as speakeasy from 'speakeasy';
import QRCode from 'qrcode';
export { speakeasy, QRCode };

Database Schema

The database schema needs to support MFA by storing the TOTP secret and status for each user:

CREATE TABLE IF NOT EXISTS users (
  id INTEGER PRIMARY KEY AUTOINCREMENT,
  email TEXT UNIQUE NOT NULL,
  password_hash TEXT NOT NULL,
  totp_secret TEXT,              -- Base32 encoded secret for TOTP
  totp_enabled INTEGER DEFAULT 0, -- Boolean flag for MFA status
  last_login TEXT
);

Key Fields for MFA

totp_secret: Stores the Base32 encoded secret used for TOTP generation
totp_enabled: Boolean flag indicating whether MFA is enabled for the user

Backend API Implementation

Now let’s implement the complete MFA flow with five key endpoints:

// Enhanced login to check for MFA requirement
app.post('/api/login', async (c: any) => {
  const ip = c.req.header('x-forwarded-for') || c.req.header('x-real-ip') || 'unknown';

  // Rate limiting
  if (rateLimit(ip, 'login', 10, 60_000)) {
    return c.json({ error: 'Too many requests' }, 429);
  }
  const { email, password } = await c.req.json();

  // Validate input
  if (!isValidEmail(email) || !isValidPassword(password)) {
    return c.json({ error: 'Invalid credentials' }, 401);
  }

  const user: any = db.query('SELECT * FROM users WHERE email = ?').get(email);
  if (!user) return c.json({ error: 'Invalid credentials' }, 401);

  const valid = await verifyPassword(password, user.password_hash);
  if (!valid) return c.json({ error: 'Invalid credentials' }, 401);
  // Check if MFA is enabled
  if (user.totp_enabled) {
    return c.json({ requiresTOTP: true });
  }
  // Standard login flow for users without MFA
  db.run('UPDATE users SET last_login = ? WHERE id = ?', [new Date().toISOString(), user.id]);
  const token = generateJWT(user);

  return c.json({ 
    token, 
    user: { email: user.email, totpEnabled: !!user.totp_enabled } 
  });
});

// Login with 2FA verification
app.post('/api/login-2fa', async (c: any) => {
  const ip = c.req.header('x-forwarded-for') || c.req.header('x-real-ip') || 'unknown';

  if (rateLimit(ip, 'login2fa', 10, 60_000)) {
    return c.json({ error: 'Too many requests' }, 429);
  }

3. MFA Setup Endpoint

// Generate MFA secret and QR code
app.post('/api/2fa/setup', authMiddleware, async (c: any) => {
  const user = c.get('user');

  // Generate a new secret
  const secret = speakeasy.generateSecret({ 
    name: `AuthApp:${user.email}`, 
    issuer: 'AuthApp' 
  });

  // Store the secret (temporarily until verified)
  db.run('UPDATE users SET totp_secret = ? WHERE id = ?', [secret.base32, user.id]);

  // Generate QR code data URL
  const otpauthUrl = secret.otpauth_url;
  const qrCodeDataUrl = await QRCode.toDataURL(otpauthUrl);

  return c.json({ 
    secret: secret.base32, 
    qrCode: qrCodeDataUrl 
  });
});

For .NET developers implementing the same TOTP flow, the Iron Suite includes IronQR for generating the authenticator QR codes. The setup works similarly to the Node.js approach but integrates natively with ASP.NET Core or any C# backend.

using IronQr;
using OtpNet;

// Generate TOTP secret
var secret = Base32Encoding.ToString(KeyGeneration.GenerateRandomKey(20));
var otpauthUrl = $"otpauth://totp/YourApp:{userEmail}?secret={secret}&issuer=YourApp";

// Generate QR code
var qrCode = QrWriter.Write(otpauthUrl);
var qrDataUrl = $"data:image/png;base64,{Convert.ToBase64String(qrCode.SaveAsPng())}";

return new { secret, qrCode = qrDataUrl };

// Login with 2FA
app.post('/api/login-2fa', async (c: any) => {
const { email, password, totpCode } = await c.req.json();

// Login with 2FA
app.post('/api/login-2fa', async (c: any) => {
  const { email, password, totpCode } = await c.req.json();

  // Validate credentials first
  const user: any = db.query('SELECT * FROM users WHERE email = ?').get(email);
  if (!user) return c.json({ error: 'Invalid credentials' }, 401);
  const valid = await verifyPassword(password, user.password_hash);
  if (!valid) return c.json({ error: 'Invalid credentials' }, 401);
  // Ensure MFA is enabled
  if (!user.totp_enabled || !user.totp_secret) {
    return c.json({ error: '2FA not enabled' }, 400);
  }
  // Verify TOTP code
  const verified = speakeasy.totp.verify({
    secret: user.totp_secret,
    encoding: 'base32',
    token: totpCode,
    window: 1  // Allow ±30 seconds time drift
  });
  if (!verified) {
    return c.json({ error: 'Invalid 2FA code' }, 401);
  }
  // Successful login
  db.run('UPDATE users SET last_login = ? WHERE id = ?', [new Date().toISOString(), user.id]);
  const token = generateJWT(user);

  return c.json({ 
    token, 
    user: { email: user.email, totpEnabled: !!user.totp_enabled } 
  });
});

.NET (C#) — TOTP Verification:

using OtpNet;

public bool VerifyTotp(string base32Secret, string totpCode)
{
    // Decode Base32 secret (same as encoding: 'base32' in speakeasy)
    var secretBytes = Base32Encoding.ToBytes(base32Secret);

    // Create TOTP instance (30s step, 6 digits, SHA1)
    var totp = new Totp(secretBytes);

    // Verify with ±30s window (same as window: 1)
    bool verified = totp.VerifyTotp(
        totpCode,
        out long timeStepMatched,
        new VerificationWindow(previous: 1, future: 1)
    );

    return verified;
}

4. MFA Verification and Activation

// Verify TOTP code and enable MFA
app.post('/api/2fa/verify', authMiddleware, async (c: any) => {
  const user = c.get('user');
  const { token } = await c.req.json();

  const dbUser: any = db.query('SELECT * FROM users WHERE id = ?').get(user.id);
  if (!dbUser || !dbUser.totp_secret) {
    return c.json({ error: 'No 2FA setup in progress' }, 400);
  }

  // Verify the provided TOTP code
  const verified = speakeasy.totp.verify({
    secret: dbUser.totp_secret,
    encoding: 'base32',
    token,
    window: 1
  });
  if (!verified) {
    return c.json({ error: 'Invalid code' }, 400);
  }
  // Enable MFA for the user
  db.run('UPDATE users SET totp_enabled = 1 WHERE id = ?', [user.id]);

  return c.json({ success: true });
});

5. MFA Disable Endpoint

// Disable MFA for user
app.post('/api/2fa/disable', authMiddleware, async (c: any) => {
  const user = c.get('user');

  // Clear MFA settings
  db.run('UPDATE users SET totp_enabled = 0, totp_secret = NULL WHERE id = ?', [user.id]);

  return c.json({ success: true });
});

Frontend Implementation

Now let’s implement the frontend components to handle the MFA flow.

1. Authentication API Client

// src/api/auth.ts
export interface LoginResponse {
  token?: string;
  requiresTOTP?: boolean;
  totpEnabled?: boolean;
  error?: string;
}
export interface MFASetupResponse {
  secret: string;
  qrCode: string;
}
const getBaseUrl = () => {
  return import.meta.env.VITE_API_BASE_URL || 'http://localhost:3001/api';
};
export async function login(email: string, password: string): Promise<LoginResponse> {
  const res = await fetch(`${getBaseUrl()}/login`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ email, password })
  });
  return res.json();
}
export async function verifyTOTP(email: string, password: string, totpCode: string): Promise<LoginResponse> {
  const res = await fetch(`${getBaseUrl()}/login-2fa`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ email, password, totpCode })
  });
  return res.json();
}
export async function setupMFA(token: string): Promise<MFASetupResponse> {
  const res = await fetch(`${getBaseUrl()}/2fa/setup`, {
    method: 'POST',
    headers: { 'Authorization': `Bearer ${token}` }
  });
  return res.json();
}
export async function verifyMFA(token: string, totpCode: string): Promise<{ success: boolean }> {
  const res = await fetch(`${getBaseUrl()}/2fa/verify`, {
    method: 'POST',
    headers: { 
      'Authorization': `Bearer ${token}`,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ token: totpCode })
  });
  return res.json();
}

// Enhanced login flow with MFA detection
const handleLogin = async (e: React.FormEvent) => {
  e.preventDefault();
  setError('');
  setLoading(true);
  try {
    const response = await login(email, password);

    if (response.requiresTOTP) {
      // Store credentials temporarily for 2FA verification
      sessionStorage.setItem('loginEmail', email);
      sessionStorage.setItem('loginPassword', password);
      navigate('/verify'); // Redirect to 2FA verification page
    } else if (response.token) {
      setToken(response.token);
      navigate('/dashboard');
    } else {
      setError(response.error || 'Login failed');
    }
  } catch (error) {
    setError('Network error');
  } finally {
    setLoading(false);
  }
};

3. TOTP Verification Component

// src/pages/Verify.tsx
const Verify = () => {
  const [totpCode, setTotpCode] = useState('');
  const [error, setError] = useState('');
  const navigate = useNavigate();
  const { setToken } = useAuth();

  const email = sessionStorage.getItem('loginEmail') || '';
  const password = sessionStorage.getItem('loginPassword') || '';
  const mutation = useMutation({
    mutationFn: () => verifyTOTP(email, password, totpCode),
    onSuccess: (data) => {
      if (data.token) {
        setToken(data.token);
        // Clean up stored credentials
        sessionStorage.removeItem('loginEmail');
        sessionStorage.removeItem('loginPassword');
        navigate('/dashboard');
      } else {
        setError(data.error || '2FA failed');
      }
    },
    onError: () => setError('Network error')
  });
  return (
    <div className="verification-container">
      <h2>Two-Factor Verification</h2>
      <p>Enter the 6-digit code from your authenticator app</p>

      <form onSubmit={handleVerify}>
        <input
          type="text"
          value={totpCode}
          onChange={e => setTotpCode(e.target.value)}
          required
          maxLength={6}
          pattern="[0-9]{6}"
          placeholder="123456"
          className="totp-input"
        />

        <button type="submit" disabled={mutation.isPending}>
          {mutation.isPending ? 'Verifying...' : 'Verify & Login'}
        </button>
      </form>

      {error && <div className="error">{error}</div>}
    </div>
  );
};

// MFA Setup component with QR code display
const MFASetupModal = ({ isOpen, onClose, token }) => {
  const [qrCode, setQrCode] = useState('');
  const [totpCode, setTotpCode] = useState('');
  const [error, setError] = useState('');

  const setupMutation = useMutation({
    mutationFn: () => setupMFA(token),
    onSuccess: (data) => {
      setQrCode(data.qrCode);
      setError('');
    },
    onError: () => setError('Failed to setup MFA')
  });
  const verifyMutation = useMutation({
    mutationFn: () => verifyMFA(token, totpCode),
    onSuccess: () => {
      onClose();
      // Refresh user data to show MFA as enabled
    },
    onError: () => setError('Invalid verification code')
  });
  return (
    <div className={`modal ${isOpen ? 'open' : ''}`}>
      <div className="modal-content">
        <h3>Setup Multi-Factor Authentication</h3>

        {!qrCode ? (
          <button onClick={() => setupMutation.mutate()}>
            {setupMutation.isPending ? 'Setting up...' : 'Start MFA Setup'}
          </button>
        ) : (
          <>
            <p>Scan this QR code with your authenticator app:</p>
            <img src={qrCode} alt="MFA QR Code" className="qr-code" />

            <form onSubmit={handleVerify}>
              <input
                type="text"
                value={totpCode}
                onChange={e => setTotpCode(e.target.value)}
                placeholder="Enter verification code"
                maxLength={6}
                pattern="[0-9]{6}"
                required
              />

              <button type="submit" disabled={verifyMutation.isPending}>
                {verifyMutation.isPending ? 'Verifying...' : 'Verify & Enable MFA'}
              </button>
            </form>
          </>
        )}

        {error && <div className="error">{error}</div>}
        <button onClick={onClose}>Close</button>
      </div>
    </div>
  );
};

Security Considerations

1. Secret Storage

Never expose secrets: TOTP secrets should never be sent to the frontend after initial setup
Secure storage: Use proper database encryption for storing TOTP secrets
Environment isolation: Keep secrets separate from other application data

2. Rate Limiting

Implement aggressive rate limiting on MFA endpoints:

// Example rate limiting configuration
const rateLimits = {
  login: { attempts: 10, window: 60000 },     // 10 attempts per minute
  login2fa: { attempts: 5, window: 60000 },   // 5 attempts per minute
  mfaSetup: { attempts: 3, window: 3600000 }  // 3 attempts per hour
};

3. Time Window Management

Clock skew tolerance: Use a window of ±1 period (30 seconds) to account for clock differences
Prevent replay attacks: Consider implementing used token tracking for high-security applications

4. Backup Codes

Consider implementing backup codes for account recovery:

// Generate backup codes during MFA setup
const generateBackupCodes = () => {
  const codes = [];
  for (let i = 0; i < 10; i++) {
    codes.push(crypto.randomBytes(4).toString('hex').toUpperCase());
  }
  return codes;
};

5. Session Management

Clear temporary data: Remove stored credentials after successful 2FA verification
Session timeout: Implement shorter session timeouts for MFA-enabled accounts
Device management: Consider implementing trusted device functionality

Testing Your Implementation

1. Unit Tests for TOTP Functions

// tests/unit/totp.test.ts
import { describe, it, expect } from 'bun:test';
import { speakeasy } from '../../src/utils/totp';
describe('TOTP Functions', () => {
  it('should generate and verify TOTP codes', () => {
    const secret = speakeasy.generateSecret();
    const token = speakeasy.totp({
      secret: secret.base32,
      encoding: 'base32'
    });

    const verified = speakeasy.totp.verify({
      secret: secret.base32,
      encoding: 'base32',
      token,
      window: 1
    });

    expect(verified).toBe(true);
  });
  it('should reject invalid TOTP codes', () => {
    const secret = speakeasy.generateSecret();

    const verified = speakeasy.totp.verify({
      secret: secret.base32,
      encoding: 'base32',
      token: '000000',
      window: 1
    });

    expect(verified).toBe(false);
  });
});

2. Integration Tests

// tests/integration/mfa.test.ts
import { describe, it, expect, beforeAll, afterAll } from 'bun:test';
import { app } from '../../src/app';

describe('MFA Integration Tests', () => {
  let userToken: string;

  beforeAll(async () => {
    // Setup test user and login
    const loginResponse = await app.request('/api/login', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ email: '[email protected]', password: 'password123' })
    });

    const data = await loginResponse.json();
    userToken = data.token;
  });
  it('should setup MFA and return QR code', async () => {
    const response = await app.request('/api/2fa/setup', {
      method: 'POST',
      headers: { 'Authorization': `Bearer ${userToken}` }
    });

    expect(response.status).toBe(200);

    const data = await response.json();
    expect(data.secret).toBeDefined();
    expect(data.qrCode).toBeDefined();
    expect(data.qrCode).toMatch(/^data:image\/png;base64,/);
  });
});

3. Manual Testing Checklist

✅ Setup Flow

[ ] QR code generation works
[ ] QR code scans correctly in authenticator apps
[ ] TOTP verification during setup works
[ ] MFA status updates correctly

✅ Login Flow

[ ] Regular login works without MFA
[ ] Login with MFA enabled prompts for 2FA
[ ] Invalid TOTP codes are rejected
[ ] Valid TOTP codes allow login
[ ] Rate limiting prevents brute force

✅ Edge Cases

[ ] Clock skew tolerance works
[ ] Network interruptions are handled gracefully
[ ] Invalid QR codes don’t break the app
[ ] Disabling MFA works correctly

Source Code: https://github.com/emdadulislam1/auth-app

Conclusion

Implementing TOTP-based MFA significantly enhances your application’s security posture. The implementation we’ve covered includes:

Key Benefits Achieved

Enhanced Security: Users’ accounts are protected even if passwords are compromised
Industry Standard: Uses RFC 6238 TOTP standard, compatible with all major authenticator apps
User-Friendly: Simple setup process with QR code scanning
Scalable: Can handle multiple users and devices efficiently

Next Steps

Consider these enhancements for production applications:

Backup Codes: Implement recovery codes for when users lose their devices
SMS Fallback: Add SMS-based 2FA as a backup option
Device Management: Allow users to manage trusted devices
Admin Controls: Add administrative controls for MFA policies
Audit Logging: Log all MFA events for security monitoring

Security Reminders

Always use HTTPS in production
Implement proper rate limiting
Store secrets securely
Monitor for suspicious authentication patterns
Keep dependencies updated

By following this guide, you’ve implemented a robust, secure, and user-friendly MFA system that follows industry best practices. Your users can now enjoy enhanced account security while maintaining a smooth authentication experience.

Remember: Security is an ongoing process. Regularly review and update your implementation to address new threats and vulnerabilities.

Host Your Own S3-Compatible MinIO Server on a VPS with Caddy and HTTPS

Sun, 20 Apr 2025 12:25:27 GMT

Host Your Own S3-Compatible MinIO Server on a VPS with Caddy and HTTPS

Want to self-host object storage like AWS S3 but on your own VPS? Say hello to MinIO — a blazing-fast, S3-compatible storage solution. In this guide, we’ll show you how to install and secure MinIO using Caddy with automatic HTTPS, and host it under a custom subdomain.

What You’ll Need

A fresh Linux VPS (Ubuntu 20.04+ recommended)
Root access or a sudo user
A domain with DNS control
A subdomain (e.g., storage.yourdomain.com) pointing to your VPS IP

Step 1: Install MinIO

Create a minio user:

sudo useradd -r minio-user -s /sbin/nologin

2. Download and install MinIO:

wget https://dl.min.io/server/minio/release/linux-amd64/minio
chmod +x minio
sudo mv minio /usr/local/bin/

3. Create directories:

sudo mkdir -p /usr/local/share/minio
sudo mkdir -p /etc/minio
sudo chown -R minio-user:minio-user /usr/local/share/minio /etc/minio

4. Create environment file:

sudo nano /etc/minio/minio.env

Add:

MINIO_ROOT_USER=admin MINIO_ROOT_PASSWORD=strongpassword

Step 2: Setup MinIO Systemd Service

sudo nano /etc/systemd/system/minio.service

paste:

[Unit]
Description=MinIO
After=network-online.target

[Service]
User=minio-user
Group=minio-user
EnvironmentFile=/etc/minio/minio.env
ExecStart=/usr/local/bin/minio server /usr/local/share/minio --console-address ":9001"
Restart=always
LimitNOFILE=65536

[Install]
WantedBy=multi-user.target

Then enable and start:

sudo systemctl daemon-reexec
sudo systemctl enable minio
sudo systemctl start minio

Step 3: Point Your Subdomain

Go to your domain DNS provider and create an A record:

storage.yourdomain.com → your VPS IP

Wait a few minutes for it to propagate.

Step 4: Install & Configure Caddy (with HTTPS)

Install Caddy:

sudo apt install -y debian-keyring debian-archive-keyring apt-transport-https
curl -1sLf 'https://dl.cloudsmith.io/public/caddy/stable/gpg.key' | sudo tee /etc/apt/trusted.gpg.d/caddy-stable.asc
curl -1sLf 'https://dl.cloudsmith.io/public/caddy/stable/debian.deb.txt' | sudo tee /etc/apt/sources.list.d/caddy-stable.list
sudo apt update
sudo apt install caddy

2. Edit Caddyfile:

sudo nano /etc/caddy/Caddyfile

Paste:

storage.yourdomain.com {
    handle_path /minio/* {
        reverse_proxy localhost:9000
    }

    handle_path /* {
        reverse_proxy localhost:9001
    }
}

Replace yourdomain.com with your actual domain.

3. Restart Caddy:

sudo systemctl restart caddy

Caddy will automatically fetch SSL certificates and handle HTTP→HTTPS redirects 🎉

Step 5: Test It!

Visit: [https://storage.yourdomain.com](https://storage.yourdomain.com)
Login with the credentials you set in /etc/minio/minio.env

You Did It!

You now have your own secure, S3-compatible object storage running on your VPS with:

MinIO as the storage engine
Caddy for reverse proxy and HTTPS
Your custom domain for easy access

How to Add TanStack Query in Astro + React Project

Tue, 01 Oct 2024 05:15:33 GMT

Photo by Lautaro Andreani on Unsplash

TanStack Query (formerly known as React Query) is a powerful tool for data fetching, caching, and synchronization in React applications. It simplifies handling server-side state in a predictable and efficient manner. Integrating TanStack Query into an Astro project with React can offer the best of both worlds — Astro’s optimized static site generation with React’s interactivity.

In this blog, I’ll walk you through how to add TanStack Query to your Astro + React project. This process involves setting up the QueryClient in your project and using hooks like useMutation and useQuery to manage data fetching and mutations.

Prerequisites

Astro installed in your project.
React set up in Astro.
TanStack Query installed (@tanstack/react-query).

If you haven’t installed TanStack Query yet, you can install it using npm or yarn:

npm install @tanstack/react-query

Or with Yarn:

yarn add @tanstack/react-query

1. Set Up Query Client

To integrate TanStack Query, we first need to initialize the QueryClient. This is a central part of the library and is responsible for managing all queries and mutations.

Let’s create a store/index.ts file that will export a queryClient.

// store/index.ts
import { QueryClient } from "@tanstack/react-query";

export const queryClient = new QueryClient();

Here, we simply create a new instance of QueryClient, which will be used across different components in our React application.

2. Using `useMutation` for Data Submissions

In TanStack Query, useMutation is used to submit or mutate data to the server. For example, let’s consider a form submission where a user registers students. Here is how you can handle a form submission using useMutation.

// any-component.ts
import { useMutation } from "@tanstack/react-query";
import { toast } from "react-hot-toast";
import { queryClient } from '../store';

const submitFormAPI = async (formData) => {
  // API call to submit the form
};

const mutation = useMutation({
  mutationFn: submitFormAPI,
  onSuccess: (data) => {
    toast.success("Registration Successful", {
      description: "The student has been registered successfully.",
    });
    console.log("Submitted data:", data);
    form.reset();
  },
  onError: (error) => {
    toast.error("Registration Failed", {
      description: "There was an error submitting the registration. Please try again.",
    });
    console.error("Error submitting form:", error);
  },
}, queryClient);

In the above code:

submitFormAPI is the function responsible for making an API call to submit form data.
mutationFn is the function executed during the mutation.
onSuccess and onError callbacks handle the successful and failed states of the mutation.

You can use this mutation object in your component to trigger the form submission and handle the success or error messages via a toast notification.

3. Using `useQuery` for Fetching Data

The useQuery hook is used for fetching data from the server. Let's say you want to fetch a list of todos. You can achieve that using useQuery as shown below:

// any-component.tsx
import { useQuery } from "@tanstack/react-query";
import { queryClient } from '../store';

const getTodos = async () => {
  // Fetch todos from the API
  const response = await fetch("/api/todos");
  return response.json();
};

const query = useQuery({ 
  queryKey: ['todos'], 
  queryFn: getTodos 
}, queryClient);

In this code:

getTodos is a function responsible for fetching the todo list from the API.
useQuery fetches the data and caches it using the queryClient instance.

4. Handling TanStack Query in Astro + React

In regular React apps, you would typically wrap your application with QueryClientProvider at the root level, but this approach doesn't work as expected in Astro due to its nature of partial hydration and separation of client and server logic.

For Astro + React integration, you don’t need to wrap the QueryClientProvider around your app. Instead, directly import queryClient and pass it into the useMutation or useQuery hooks, as shown in the previous examples. This bypasses the need for a global provider and allows TanStack Query to work within the Astro ecosystem.

5. Complete Example

Here’s a simple example of how you would integrate TanStack Query in a React component within an Astro project.

// src/components/TodoList.tsx
import React from 'react';
import { useQuery } from "@tanstack/react-query";
import { queryClient } from '../store';

const getTodos = async () => {
  const response = await fetch("/api/todos");
  return response.json();
};

const TodoList = () => {
  const { data, error, isLoading } = useQuery({ queryKey: ['todos'], queryFn: getTodos }, queryClient);

  if (isLoading) return <p>Loading...</p>;
  if (error) return <p>Error loading todos</p>;

  return (
    <ul>
      {data.map((todo: any) => (
        <li key={todo.id}>{todo.title}</li>
      ))}
    </ul>
  );
};

export default TodoList;

This component fetches a list of todos and displays them in a list. You can include this component in your Astro pages like this:

---
import TodoList from '../components/TodoList';
---

Conclusion

Integrating TanStack Query into an Astro + React project might seem tricky at first, especially when the typical QueryClientProvider wrap method doesn't work as expected. However, as demonstrated, using queryClient directly within your hooks like useMutation and useQuery is a practical solution. With this setup, you can manage server-side data fetching, mutations, and caching effectively.

Now, you can take full advantage of TanStack Query in your Astro project, ensuring optimized and well-handled server-side state management in your React components.

How to Solve the Expo Network Response Timed Out Problem

Thu, 08 Aug 2024 14:13:53 GMT

If you’re developing a React Native app with Expo and you’re encountering a “network response timed out” error, it’s likely due to the port that Expo’s Metro bundler is running on not being open on your machine.

The solution is to open the necessary port so that your device or emulator can connect to the Metro server.

Steps to Solve the Expo Network Response Timed Out Problem on Linux (Ubuntu)

Check the Current Open Ports:

In your terminal, run the following command to view the currently open ports:

sudo ufw status verbose

Look for the port that Expo’s Metro bundler is running on (usually 8081).
If you don’t see the port listed, you’ll need to open it.

2. Open the Expo Metro Port: Run the following command to open the Expo Metro port (replace 8081 with the port number if different):

sudo ufw allow 8081/tcp

This will open the port and allow traffic to flow through it.

After following these steps, your Expo “network response timed out” issue should be resolved, and you should be able to connect your device or emulator to the Expo Metro server without any problems.

If you continue to encounter issues, make sure to check your firewall settings and ensure that the specified port is not being blocked. You may also want to try restarting your development environment or the Expo Metro server to see if that resolves the problem.

20 Awesome APIs to Enhance Your Development Projects

Fri, 12 Apr 2024 04:26:57 GMT

Photo by Douglas Lopes on Unsplash

As a developer, having access to powerful APIs can be a game-changer, allowing you to quickly integrate robust functionality into your applications. In this post, we’ve curated a list of 20 awesome APIs spanning various domains, from image management to weather data, news, and more. Whether you’re building a web app, mobile app, or any other type of software, these APIs are sure to come in handy.

1. Unsplash API (https://unsplash.com/developers) — Access a massive collection of high-quality stock photos and serve them directly in your app.

2. WatchMode API (https://api.watchmode.com/) — Integrate data on movies, TV shows, and streaming services to build entert20 Awesome APIs to Enhance Your Development Projectsainment apps and services.

3. Discord API (https://discord.com/developers/docs/reference) — Build bots, automation tools, and integrations for the popular Discord chat platform.

4. World News API (https://worldnewsapi.com/) — Fetch up-to-date news articles from sources around the globe for your news apps or dashboards.

5. SVIX API (https://www.svix.com/) — Access SVIX’s vector image creation API to generate unique illustrations on the fly.

6. Kroki (https://kroki.io/) — Create diagrams and visualizations as code using a simple text-based syntax.

7. Google APIs (https://developers.google.com/docs/api/reference/rest) — Tap into Google’s vast suite of APIs for maps, cloud services, artificial intelligence, and more.

8. HTTP Dog (https://http.dog/) — A simple API for testing HTTP request methods like GET, POST, PUT, and more.

9. GeoKEO (https://geokeo.com/) — Geocoding and reverse geocoding APIs to map locations or extract places from coordinates.

10. Ticketmaster API (https://developer.ticketmaster.com/products-and-docs/apis/getting-started/) — Access event data and ticketing functionality for concerts, sports, and more.

11. iLovePDF (https://developer.ilovepdf.com/) — Manipulate PDFs programmatically with APIs for compression, merging, splitting, and other operations.

12. Ollama (https://ollama.com/) — Get up and running with large language models.

13. Dictionary API (https://dictionaryapi.dev/) — Look up definitions, synonyms, pronunciations, and more with a simple dictionary API.

14. OpenWeatherMap (https://openweathermap.org/api) — Access current weather data and forecasts for any location on Earth.

15. Alpha Vantage (https://www.alphavantage.co/) — Retrieve real-time and historical stock data through this financial markets API.

16. WordPress REST API (https://developer.wordpress.org/rest-api/) — Interact with WordPress sites and content programmatically.

17. Spotify Web API (https://developer.spotify.com/documentation/web-api) — Build applications that leverage Spotify’s music streaming service.

18. Deepgram (https://deepgram.com/) — Accurate speech-to-text transcription and recognition via API.

19. Resend (https://resend.com) — Send emails, SMS, voice messages, push notifications and more through a single API.

20. NASA APIs (https://api.nasa.gov/) — Explore NASA’s open data resources like imagery, astrophysics data, Mars rover photos, and more.

With this diverse set of APIs at your fingertips, you’ll have the building blocks to create truly innovative and feature-rich applications. Don’t hesitate to explore their documentation and get started integrating them into your next project. Happy coding!

Warp — The Terminal Reimagined for Modern Developers

Fri, 12 Apr 2024 04:19:08 GMT

[Warp-your new favorite terminal
Warp is a Rust-based terminal built for speed. With Warp, you can type in a terminal like an IDE, navigate your output…app.warp.dev](https://app.warp.dev/referral/EXNJM6 "https://app.warp.dev/referral/EXNJM6")

If you’re a developer who spends a lot of time on the command line, you owe it to yourself to check out Warp — a groundbreaking new terminal that supercharges your productivity with AI assistance, modern editing capabilities, and collaborative workflows.

The first thing that struck me about Warp is just how fast and responsive it feels. Built with Rust, it boots up instantly and inputs register with zero lag. But it’s the innovative feature set that really makes Warp shine.

Modern Editing: One of my biggest pain points with traditional terminals is the clunky text editing experience. Warp addresses this brilliantly with an editing mode that feels just like a modern IDE. You can use the keyboard or mouse to insert, copy, select text with ease. Vim keybindings are supported out of the box. And smart completions help you type commands faster without needing to install plugins.

AI Command Generation: This is where Warp gets really magical. You can just describe what you want to do in plain English, and Warp’s built-in AI will generate the appropriate command(s) for you. No more furiously Googling or checking man pages — Warp’s AI acts as an intelligent command line assistant. And crucially, all processing happens locally, so your data stays private.

Warp Drive Workflows: Warp Drive is a revolutionary way to save, organize and share terminal commands and workflows across your team. You can parameterize commands, categorize them into collections, and bring up any workflow on demand with a few keystrokes. For teams, Warp Drive acts as a centralized, realtime-updated knowledge base for all your company’s scripts and DevOps processes.

I’ve barely scratched the surface of Warp’s capabilities here. It also has great customization options for themes, secure encrypted data storage, optional cloud backup, and more. After using Warp for a few weeks, going back to a traditional terminal feels like driving a beat-up pickup truck after getting used to a Tesla.

Warp is currently in beta, but you can request access and download it for Mac, Windows or Linux at warp.dev. For any developer who wants to supercharge their command line productivity, it’s an absolute must-try. Highly recommended!

Introducing Queryhub: Revolutionizing Learning with AI-Powered Study Companion

Sat, 06 Apr 2024 19:34:18 GMT

Hello friends and family, brothers and sisters, and the World!!! We’re Introducing Queryhub — Your Ultimate Study Companion!

https://www.queryhub.info

As students ourselves, we understand the challenges of navigating through vast amounts of academic information. That’s why we’ve created Queryhub, a web application designed to revolutionize the way you learn and collaborate.

Query Forum:
Imagine a platform where students from all universities and departments can come together to ask questions, share knowledge, and find answers. With Queryhub’s AI-powered search, you’ll never struggle to find relevant information again. Can’t find what you’re looking for? Simply create a new question, and let the community provide insightful answers. Upvote, downvote, and verify solutions — it’s a true collaborative learning experience.

Query AI:
For those who prefer diving into PDFs, books, and research papers, Queryhub’s Query AI is here to help. Simply upload your document, and our intelligent chatbot will provide you with concise answers and suggest related questions — making your reading experience more efficient and interactive.
We’re thrilled to have brought this project to life, and we couldn’t have done it without the hard work and dedication of our dedicated team. The pioneers are Arthi Barua, Emdadul Islam, MD. Mehrab Evan, Rafayet Habib, and Tareq Ahmed

Join us on this exciting journey and experience the power of Queryhub! Share your thoughts and let us know how we can continue to improve your learning experience.

A Guide to Downloading Images from a Database using Node.js

Sat, 23 Mar 2024 23:21:46 GMT

Photo by Sigmund on Unsplash

Introduction: In this tutorial, we’ll explore how to download images from a MongoDB database using Node.js. We’ll walk through setting up a Node.js project, connecting to a MongoDB database, defining a schema for image URLs, and creating a script to download and save images locally.

Prerequisites: Before we begin, ensure you have the following:

Basic knowledge of JavaScript and Node.js.
Node.js installed on your machine.
Access to a MongoDB database with a collection containing image URLs.

Step 1: Set Up Your Project: Let’s start by setting up our Node.js project. Open your terminal and execute the following commands:

mkdir image-downloader
cd image-downloader
npm init -y

Next, install the required dependencies:

npm install mongoose

Step 2: Connect to MongoDB: Create a file named dbConnect.js inside a config directory to handle the MongoDB connection:

// config/dbConnect.js
const mongoose = require('mongoose');

const connectDB = async () => {
  try {
    await mongoose.connect('mongodb://localhost:27017/your-database-name', {
      useNewUrlParser: true,
      useUnifiedTopology: true,
    });
    console.log('MongoDB Connected');
  } catch (error) {
    console.error('Error connecting to MongoDB:', error);
    process.exit(1);
  }
};

module.exports = connectDB;

Make sure to replace 'mongodb://localhost:27017/your-database-name' with your actual MongoDB connection URL.

Step 3: Define the Member Model: Create a file named member.js inside a model directory to define the schema for your Member model:

// model/member.js
const mongoose = require('mongoose');

const memberSchema = new mongoose.Schema({
  image: String,
});

const Member = mongoose.model('Member', memberSchema);

module.exports = Member;

Step 4: Download Images: Now, let’s create a script named downloadImages.js in the root directory of our project:

// downloadImages.js
const Member = require('./model/member');
const initDB = require('./config/dbConnect');
const fs = require('fs');
const https = require('https');

initDB();

async function downloadImage() {
  try {
    console.log('DB Member fetching images...');
    const members = await Member.find({});
    console.log('DB Member fetched');
    console.log(members);
    const ImageUrls = members.map((member) => member.image);

    console.log('Downloading images...');

    await Promise.all(
      ImageUrls.map(async (url, index) => {
        const imageName = url.split('/').pop();
        const file = fs.createWriteStream(`public/members/${imageName}`);

        https
          .get(url, (response) => {
            response.pipe(file);

            file.on('finish', () => {
              file.close();
              console.log(`Image ${index} downloaded as ${imageName}`);
            });
          })
          .on('error', (err) => {
            fs.unlink(`public/members/${imageName}`);
            console.error(`Error downloading image: ${err.message}`);
          });
      })
    );
  } catch (error) {
    console.error(error);
    process.exit(1);
  }
}

downloadImage();

Step 5: Run the Script: Execute the following command in your terminal to start downloading the images:

node downloadImages.js

This script fetches image URLs from the MongoDB database, downloads each image using HTTPS, and saves them in the public/members directory.

Conclusion: Congratulations! You’ve successfully created a script to download images from a MongoDB database using Node.js. Feel free to integrate this script into your Node.js applications to handle image downloads efficiently.

Setting Up Seeders in Node.js and Mongoose with Example

Wed, 10 Jan 2024 11:06:41 GMT

Photo by Gabriel Heinzer on Unsplash

Introduction: In Node.js applications using MongoDB with Mongoose, seeders play a crucial role in populating the database with initial data. This article will guide you through the process of setting up seeders, with a specific focus on creating an admin user during the seeding process.

Understanding Seeders: Seeders are scripts designed to populate your database with predefined data. They are essential for maintaining a consistent and realistic database state during development and testing.

Installing Necessary Packages: Ensure you have the required packages installed for your Node.js and Mongoose projects. If not, install Mongoose:

npm install mongoose

Project Structure: Organize your project with designated folders for models and seeders. Here’s an example structure:

project-root
├── models
│   └── user.js
├── seeders
│   └── admin-seeder.js
└── app.js

Creating a Mongoose Model: Define a Mongoose model for the data you want to seed. For this example, let’s create a simple User model.

// models/user.js
const mongoose = require("mongoose");

const userSchema = new mongoose.Schema({
  name: String,
  password: String,
  isAdmin: Boolean,
  // Add other fields as needed
});

const UserModel = mongoose.model("User", userSchema);

module.exports = UserModel;

Writing the Admin Seeder Script: Create the seeder script to populate the database, including the creation of an admin user.

// seeders/admin-seeder.js
const mongoose = require("mongoose");
const bcrypt = require("bcryptjs");
const UserModel = require("../models/user");

async function seedAdmin() {
  // Connect to the database
  await mongoose.connect("mongodb://localhost/your-database", {
    useNewUrlParser: true,
    useUnifiedTopology: true,
  });

  // Check if admin already exists
  const existingAdmin = await UserModel.findOne({ isAdmin: true });

  if (!existingAdmin) {
    // Create admin credentials
    const adminCredentials = {
      name: "Admin User",
      password: "adminpassword",
      isAdmin: true,
      // Add other fields as needed
    };

    // Hash the admin password
    const salt = await bcrypt.genSalt(10);
    const hashedPassword = await bcrypt.hash(adminCredentials.password, salt);
    adminCredentials.password = hashedPassword;

    // Create admin user
    await UserModel.create(adminCredentials);

    console.log("Admin user created successfully");
  } else {
    console.log("Admin user already exists");
  }

  // Close the database connection
  await mongoose.disconnect();
}

// Execute the admin seeder
seedAdmin().then(() => {
  console.log("Admin seeding completed");
  process.exit(0);
}).catch((err) => {
  console.error("Error seeding admin:", err);
  process.exit(1);
});

Running the Admin Seeder Script: Execute the admin seeder script whenever you need to populate the database, including the creation of the admin user.

node seeders/admin-seeder.js

Conclusion: Setting up seeders in Node.js and Mongoose provides an efficient way to populate your database with initial data. By incorporating an example of creating an admin user during the seeding process, this guide helps you establish a solid foundation for managing your database seeders in Node.js projects.

Resolving “Window is not defined” Error during npm run build in Next.js SSR Application

Thu, 07 Dec 2023 11:36:19 GMT

Window is not defined solution

Background

Our development team encountered a critical issue while running the npm run build command in a Next.js server-side rendered (SSR) application. The error message indicated that "window is not defined," pointing to a problem related to server-side rendering.

Problem Statement

When attempting to build the project using the npm script for production (npm run build), the build process failed with an error that specifically mentioned the absence of the "window" object. This issue is common in Next.js applications that utilize server-side rendering, as certain components may attempt to access the "window" object, which is not available on the server side.

Investigation

To identify the root cause of the problem, our development team thoroughly examined the components and dependencies involved in the build process. It was determined that certain components were trying to access the “window” object directly, causing the build to fail.

Solution

To resolve the “window is not defined” error during the build process, we implemented the following solution:

1. Conditional Rendering

We modified the affected components to conditionally check whether the “window” object is defined before attempting to access it. This conditional rendering ensures that the problematic code is only executed on the client side, preventing errors during server-side rendering.

if (typeof window !== "undefined") {
  // Code that relies on the window object
  // ...
}

This simple check ensures that the code within the conditional block is only executed in a client-side context where the “window” object is available.

2. Dynamic Import with Next.js

To handle the SSR-related issues more gracefully, we leveraged Next.js dynamic imports with the ssr: false option. By doing this, we allowed specific components to be loaded dynamically on the client side, avoiding potential conflicts during server-side rendering.

import dynamic from 'next/dynamic';

const DynamicComponent = dynamic(() => import('../path/to/component'), {
  ssr: false,
});

This approach ensures that the designated component is only loaded on the client side, mitigating any issues related to the “window is not defined” error during the build process.

Results

Implementing the above solutions successfully resolved the “window is not defined” error during the npm run build command in our Next.js SSR application. The build process now completes without any issues, and the application functions as expected in both development and production environments.

This case study highlights the importance of understanding the nuances of server-side rendering in Next.js applications and provides a practical solution for mitigating common challenges associated with the “window is not defined” error during the build process.

Integrating OAuth with Google using the Devise Gem(ROR): Comprehensive Documentation

Fri, 24 Nov 2023 16:43:05 GMT

Photo by Mitchell Luo on Unsplash

Introduction

OAuth (Open Authorization) is an industry-standard protocol for authorization, enabling third-party applications to access user data without requiring the user to share their login credentials. In this documentation, we will guide you through the process of implementing OAuth using the google_oauth2 gem in a Ruby on Rails application with Devise for authentication.

Prerequisites

Before you begin, ensure that you have the following:

Ruby installed on your machine (version 2.5 or higher)
Ruby on Rails framework installed (version 5.0 or higher)
An existing Ruby on Rails application
Basic knowledge of Ruby on Rails and Devise gem

Step 1: Setup Google Developer Console

Before integrating OAuth with Google, you need to set up a project in the Google Developer Console and obtain credentials. Follow these steps:

Visit the Google Developer Console and create a new project.
Enable the Google+ API by navigating to the Library section and searching for “Google+ API.” Click on it and enable it for your project.
Navigate to the Credentials section and click on the Create Credentials button. Choose OAuth client ID.
Configure the OAuth client ID settings. Select Web Application as the application type.
In the Authorized Redirect URIs field, enter the callback URL where Google will redirect the user after authentication. The format of the callback URL will be http://localhost:3000/users/auth/google_oauth2/callback (replace localhost:3000 with your actual domain and port).
Save the OAuth client ID and secret generated by Google. You will need these later in your Rails application.

Step 2: Add ‘google_oauth2’ Gem to Your Gemfile

To integrate OAuth with Google in your Rails application, you need to add the google_oauth2 gem to your Gemfile and install it using Bundler. Follow these steps:

Open your application’s Gemfile using a text editor.
Add the following line to the Gemfile:

gem 'omniauth-google-oauth2'

3. Save the file and close it.

4.Open your terminal or command prompt and navigate to your application’s directory.

5. Run the following command to install the gem:

$ bundle install

Step 3: Configure Devise for OAuth

Next, you need to configure Devise to work with OAuth using the google_oauth2 gem. Follow these steps:

Open the file config/initializers/devise.rb.
Locate the config.omniauth block and uncomment it (remove the leading '#' character).
Modify the config.omniauth block to include the following lines:

config.omniauth :google_oauth2, 'GOOGLE_CLIENT_ID', 'GOOGLE_CLIENT_SECRET', { access_type: 'offline', prompt: 'consent' }

Replace 'GOOGLE_CLIENT_ID' and 'GOOGLE_CLIENT_SECRET' with the credentials obtained from the Google Developer Console.

4. Save the file.

Step 5: Implement

the OmniauthCallbacksController Now, you need to create a controller to handle the OAuth callback. Follow these steps:

Create a new file called app/controllers/users/omniauth_callbacks_controller.rb.
Define the OmniauthCallbacksController class and inherit from Devise::OmniauthCallbacksController. Implement the callback method as follows:

class Users::OmniauthCallbacksController < Devise::OmniauthCallbacksController
def google_oauth2
@user = User.from_omniauth(request.env['omniauth.auth'])
if @user.persisted?
sign_in_and_redirect @user, event: :authentication
set_flash_message(:notice, :success, kind: 'Google') if is_navigational_format?
else
redirect_to new_user_registration_url
end
end
end

In this example, the User.from_omniauth method is responsible for finding or creating a user based on the OAuth response.

3. Save the file.

Step 6: Implement the User Model Method

To handle the user creation or authentication based on the OAuth response, you need to implement a method in your User model. Follow these steps:

Open the file app/models/user.rb.
Add the following code to define the from_omniauth method:

class User < ApplicationRecord
# ...

def self.from_omniauth(auth)
where(provider: auth.provider, uid: auth.uid).first_or_create do |user|
user.email = auth.info.email
user.password = Devise.friendly_token[0, 20]
# Additional user attributes can be set here based on the auth response
end
end

# ...
end

This example creates a new user with the provided email and generates a random password if a user with the same provider and UID combination does not already exist.

3. Save the file.

Step 7: Update User Views

Finally, you need to update your user views to include a link or button to trigger the OAuth authentication process. Follow these steps:

Open the view file where you want to place the OAuth authentication link/button (e.g., app/views/devise/sessions/new.html.erb).
Add the following code to include the link/button:

<%= link_to "Sign in with Google", user_google_oauth2_omniauth_authorize_path %>

You can style this link/button according to your application’s design.

3. Save the file.

Conclusion

Congratulations! You have successfully implemented OAuth with the Google Devise gem in your Ruby on Rails application. Users can now authenticate with their Google accounts using OAuth. You can further customize the user model and views to suit your application’s needs. Refer to the Devise and omniauth-google-oauth2 documentation for more advanced usage and customization options.

Mastering GitHub OmniAuth Integration in Ruby on Rails: A Step-by-Step Guide

Fri, 24 Nov 2023 16:23:49 GMT

Photo by Roman Synkevych on Unsplash

Step 1:

Go to the GitHub Developer Settings page: https://github.com/settings/developers
Click on the “New OAuth App” button.
Fill in the required fields:
Application Name: Choose a name for your application.
Homepage URL: This should be the URL of your application’s home page.
Authorization callback URL: This should be the URL where GitHub will redirect users after authentication. For development, use something like [http://localhost:3000/auth/github/callback](http://localhost:3000/auth/github/callback.).

4. Click on “Register application” to create the OAuth application.

5. Once created, take note of the “Client ID” and “Client Secret” values, as you’ll need them later.

Step 2: Add the omniauth-github gem

In your Rails application’s Gemfile, add the following line:

gem 'omniauth-github’
gem "omniauth-rails_csrf_protection"

Then run bundle install in your terminal.

Step 3: Configure OmniAuth

First define your application id and secret in config/initializers/devise.rb. 273 no line. Configuration options can be passed as the last parameter here as key/value pairs.

config.omniauth :guthub, 'github_CLIENT_ID', 'github_CLIENT_SECRET', {}

Then add the following to ‘config/routes.rb’so the callback routes are defined.

devise_for :users, controllers: { omniauth_callbacks: 'users/omniauth_callbacks' }

Make sure your model is omniauthable. Generally this is /app/models/user.rb

devise :omniauthable, omniauth_providers: [:github]

Then make sure your callbacks controller is setup app/controllers/users/omniauth_callbacks_controller.rb:

# app/controllers/users/omniauth_callbacks_controller.rb:

class Users::OmniauthCallbacksController < Devise::OmniauthCallbacksController
def github
# You need to implement the method below in your model (e.g. app/models/user.rb)
@user = User.from_omniauth(request.env['omniauth.auth'])

if @user.persisted?
flash[:notice] = I18n.t 'devise.omniauth_callbacks.success', kind: 'Github'
sign_in_and_redirect @user, event: :authentication
else
session['devise.github_data'] = request.env['omniauth.auth'].except('extra') # Removing extra as it can overflow some session stores
redirect_to new_user_registration_url, alert: @user.errors.full_messages.join("\n")
end
end
end

and bind to or create the user model/user.rb

def self.from_omniauth(access_token)
data = access_token.info
user = User.where(email: data['email']).first

# Uncomment the section below if you want users to be created if they don't exist
unless user
user = User.create(
email: data['email'],
password: Devise.friendly_token[0,20]
)
end
user
end

That’s it! Your app now supports GitHub authentication.

If your face any error, like can not verify CSRF token, then add this command in controller/application_controller.rb

skip_before_action :verify_authenticity_token

A Guide to Web Accessibility

Thu, 16 Nov 2023 23:52:43 GMT

Hey there, fellow creators! Today, let’s dive into something that’s close to our hearts—web accessibility. Imagine a world where everyone can effortlessly surf the digital realm, regardless of their abilities. In this blog post, we’re talking about making the web a welcoming place for every user.

Let’s kick things off with a simple truth: web accessibility matters. It’s not about ticking off boxes; it’s about creating a space where a diverse range of users can feel at home. Think about someone using a screen reader or navigating with a keyboard—web accessibility ensures their journey is just as smooth and enjoyable.

Now, let’s break down the essentials — the Web Content Accessibility Guidelines (WCAG). Picture these guidelines as a friendly map guiding us toward inclusivity. They cover everything from making content adaptable to providing alternatives for images, forming the backbone of an online world that’s open to all.

Enough theory — let’s get hands-on. Imagine coding with semantic HTML and effortlessly adding alternative text to your images. These aren’t just best practices; they’re small steps that collectively make a big difference. We’ll explore practical tips to make web accessibility an integral part of our creative process.

Think of design not just as colors and layouts, but as a philosophy. Inclusive design is like setting a place at the table for everyone from the get-go. It ensures that our websites aren’t just functional but are warm, welcoming spaces for every visitor, regardless of their abilities.

Imagine having a toolkit that helps you ensure your website is accessible to everyone. Visualize tools like screen reader simulators and color contrast checkers — your allies in crafting a digital space that’s not just functional but beautifully accessible.

Let’s bring it back to people. Imagine talking to users with different needs and experiences. The power of empathy in our work becomes evident as we consider their insights. It’s about making choices that resonate universally, creating interfaces that genuinely understand and cater to the diversity of human experiences.

Now, let’s zoom out. Picture a shift happening in our industry. It’s not just about following rules; it’s a movement. Imagine being part of a community where standards evolve, regulations make the web more inclusive, and advocacy becomes the driving force. It’s about being part of something bigger than ourselves.

As we wrap up, imagine the impact of our collective efforts. Every line of code, every design decision — we’re shaping a web where accessibility is the norm, not the exception. Let’s keep this journey going, encouraging each other to champion inclusivity in every aspect of our work. The future of web development? It’s inclusive, and it’s in our hands. Ready to make a difference in the world of accessible web development? Let’s do this together!

Boost Your Website’s Speed Using Contemporary Picture Formats

Thu, 16 Nov 2023 23:51:01 GMT

Welcome to the fast-paced universe of web development, where optimizing website performance reigns supreme. Today, let’s uncover the often-overlooked magic of image formats and their profound impact on web performance and loading times.

Optimized images are the unsung heroes of web performance. They not only enhance the user experience but also play a crucial role in shaping page loading times. Imagine a website that loads swiftly and delights users with seamless visuals—that's the power of image optimization we’re about to explore.

Meet the superheroes of image formats—WebP and AVIF. WebP boasts lossless and lossy compression, while AVIF takes it a step further with even smaller file sizes. Take, for instance, a high-resolution image that typically weighs down a page. Converting it to WebP or AVIF can significantly reduce its size without compromising quality, ensuring a faster, more responsive website.

Now, let’s get our hands dirty. Implementing WebP and AVIF in your web development toolkit is easier than you might think. Imagine a snippet of code seamlessly integrated into your project, transforming images on the fly. Tools like ImageMagick or online converters make the conversion process a breeze, making it accessible for developers of all levels.

Time for a showdown! Imagine a website with traditional formats like JPEG and PNG. Now, let’s compare its loading speed with the same website using WebP and AVIF. The data speaks volumes — faster loading times mean happier users. Metrics don’t lie, and the impact on user experience is clear when you make the switch to next-gen image formats.

Not every browser speaks the language of WebP and AVIF fluently. Here’s where the magic happens. Imagine a strategy that ensures a seamless experience for users, regardless of their browser. While modern browsers embrace these formats, implementing graceful fallbacks ensures that users on older browsers don’t miss out on the optimized experience.

Time for success stories! Imagine a website that faced sluggish loading times until it embraced WebP and AVIF. Imagine the transformation—a faster, more efficient website that keeps users engaged. These aren’t just tales; they’re real-world examples paving the way for your success in the realm of optimized web performance.

Bravo! Let’s wrap up this performance-packed journey. Imagine the impact of adopting next-gen image formats—it's not just a trend but a necessity for turbocharging your web projects. Bid farewell to sluggish loading times and usher in a faster, more efficient user experience. The speed revolution begins with a simple choice: embracing WebP and AVIF for a web that’s both swift and stunning. Are you ready for the transformation?

Exploring the Most Used Linux Commands with Examples

Mon, 09 Oct 2023 17:25:30 GMT

Photo by Gabriel Heinzer on Unsplash

Introduction:

Linux, with its powerful command-line interface (CLI), is a favorite among developers, system administrators, and enthusiasts alike. It offers a plethora of commands that make it a versatile and efficient operating system. In this article, we’ll dive into some of the most commonly used Linux commands, providing examples to help you understand their functionality and usefulness.

1. ls — List Directory Contents

The ls command is the go-to tool for listing the contents of a directory. By default, it displays files and directories in the current directory.

Example:

$ ls

2. cd — Change Directory

cd is used to change the current working directory. It allows you to navigate through the file system.

Example:

$ cd /path/to/directory

3. pwd — Print Working Directory

To know your current location in the file system, use the `pwd` command.

Example:

$ pwd

4. mkdir — Create Directory

Need to create a new directory? Use mkdir.

Example:

$ mkdir new_directory

5. rm — Remove Files and Directories

rm is used for deleting files and directories. Be cautious with this command, as it can lead to irreversible data loss.

Example:

$ rm file.txt
$ rm -r directory/

6. cp — Copy Files and Directories

Use cp to copy files and directories.

Example:

$ cp file.txt new_file.txt
$ cp -r directory/ new_directory/

7. mv — Move or Rename Files and Directories

mv is used for moving files and directories. It can also rename files and directories.

Example:

$ mv old_file.txt new_location/
$ mv old_name.txt new_name.txt

8. touch — Create Empty Files

Create an empty file using the touch command.

Example:

$ touch new_file.txt

9. cat — Concatenate and Display File Contents

cat displays the contents of a file on the terminal.

Example:

$ cat file.txt

10. grep — Search Text Using Patterns

grep is a powerful tool for searching text within files using patterns.

Example:

$ grep “search_term” file.txt

11.ps — Display Information about Running Processes

`ps` shows information about the current running processes.

Example:

$ ps aux

12. kill — Terminate Processes

Use kill to terminate processes by their process ID (PID).

Example:

$ kill -9 PID

13. df — Display Disk Space Usage

df provides information about disk space usage on your system.

Example:

$ df -h

14. du — Display Directory/File Space Usage

du displays the space usage of directories and files.

Example:

$ du -sh directory/

15. chmod — Change File Permissions

chmod is used to change file permissions.

Example:

$ chmod 755 file.sh

Conclusion

These are just a few of the most commonly used Linux commands. Familiarizing yourself with these commands and their usage will greatly enhance your ability to work efficiently on a Linux system. As you become more proficient with the Linux CLI, you’ll discover countless other commands that can help you perform various tasks and manage your system effectively. So, keep exploring and mastering the Linux command-line interface to become a proficient Linux user.

How to Set Up Husky, ESLint, and Prettier in a Node.js Project

Fri, 11 Aug 2023 17:57:08 GMT

Photo by Pakata Goh on Unsplash

In this tutorial, we will walk you through the process of setting up Husky, ESLint, and Prettier in a Node.js application. These tools will help you maintain consistent code quality, enforce coding standards, and ensure that your codebase remains clean and error-free. We’ll cover everything from installation to advanced configuration.

Prerequisites

Before we begin, make sure you have the following installed on your system:

- Node.js (with npm, the Node.js package manager) — You can download it from the official Node.js website: https://nodejs.org/

Step 1: Create a Node.js Project

If you don’t already have a Node.js project, you can create one using the following commands:

mkdir my-node-app
cd my-node-app
npm init -y

Step 2: Install Dependencies

In this step, we’ll install the necessary dependencies: ESLint, Prettier, and Husky.

npm install eslint prettier husky — save-dev

Step 3: Configure ESLint

Create an ESLint configuration file in your project’s root directory. You can create a basic `.eslintrc.json` file with the following content:

{
“extends”: [“eslint:recommended”],
“parserOptions”: {
“ecmaVersion”: 2021
},
“rules”: {
// Your custom rules here
}
}
```

Step 4: Configure Prettier

Create a Prettier configuration file in your project’s root directory. You can create a `.prettierrc.json` file with your preferred formatting options:

{
“singleQuote”: true,
“trailingComma”: “es5”,
“tabWidth”: 2
}

Step 5: Configure Husky

Husky enables us to run scripts (such as ESLint and Prettier) automatically before committing code. To set up Husky, add the following to your package.json:

{
“husky”: {
“hooks”: {
“pre-commit”: “lint-staged”
}
},
“lint-staged”: {
“*.js”: [
“eslint — fix”,
“prettier — write”,
“git add”
]
}
}

Step 6: Create Sample Code

Create a sample JavaScript file index.js in your project’s root directory:

const greeting = “Hello, world!”;
console.log(greeting);

Step 7: Test the Setup

Now that everything is set up, let’s test it:

1. Make sure you’re in your project’s root directory.
2. Modify index.js to introduce a linting error, like removing a semicolon.
3. Try to commit the changes using `git commit -am “Test commit”`.

Husky should prevent the commit due to the linting error, and ESLint will automatically fix the issue and format the code using Prettier.

Advanced Configuration

To further customize your setup, you can:

- Extend ESLint rules in your `.eslintrc.json` file.
- Explore additional Prettier options in your `.prettierrc.json` file.
- Add more pre-commit tasks to `lint-staged` in your `package.json`.

By following this tutorial, you’ve successfully set up Husky, ESLint, and Prettier in your Node.js application. These tools will help you maintain consistent code quality and enhance the development experience for you and your team.

Integrating GitHub OAuth with Passport.js: Handling Email Validation

Wed, 09 Aug 2023 12:46:05 GMT

Photo by Gabriel Heinzer on Unsplash

Introduction:
OAuth authentication is a powerful way to enable users to log into your application using their existing accounts on popular platforms like Google and GitHub. Passport.js, a widely-used authentication middleware for Node.js, simplifies the process of implementing various authentication strategies, including OAuth. In this tutorial, we’ll delve into integrating GitHub OAuth with Passport.js, specifically addressing the challenge of handling email validation.

Prerequisites:
Before you begin, make sure you have a basic understanding of OAuth authentication, Node.js, and npm packages. Familiarity with GitHub OAuth and Passport.js will be beneficial for following this tutorial.

GitHub OAuth Integration and Email Retrieval:

In many OAuth authentication scenarios, you want to gather essential user information, such as their email, to ensure a seamless user experience. GitHub OAuth, however, introduces a unique challenge as not all users make their email publicly available on their profiles. This challenge necessitates a careful approach to ensure you retrieve accurate and valid email data.

To address this challenge, we’ll walk through the process of integrating GitHub OAuth with Passport.js and using the GitHub API to fetch the user’s email. We’ll focus on the following steps:

1. Setting Up Passport.js and GitHub OAuth:
Begin by creating a new Node.js application and installing the necessary dependencies, including Passport.js and the GitHub OAuth strategy. You’ll need to register your application on GitHub and obtain the clientID and clientSecret.

Install the required packages:

npm install passport passport-github2 node-fetch

Create the Passport.js configuration file and set up the GitHub strategy.

2. Fetching User Email from GitHub API:
To retrieve the user’s email from GitHub, we’ll use the GitHub API. Specifically, we’ll make a request to the `/user/emails` endpoint using the user’s access token. This approach ensures accurate and up-to-date email information.

Integrate the `node-fetch` package to handle API requests.

const fetch = require(‘node-fetch’);

// Inside GitHub strategy callback
try {
const emailResponse = await fetch(‘https://api.github.com/user/emails', {
headers: {
Authorization: `Bearer ${accessToken}`,
‘User-Agent’: ‘Your-App-Name’,
},
});
const emailData = await emailResponse.json();

// Find the primary email
const primaryEmail = emailData.find(email => email.primary);

if (primaryEmail) {
// Proceed with user registration or authentication
} else {
console.error(‘No primary email found.’);
done(null, false);
}
} catch (error) {
console.error(error.message);
done(null, false);
}

3. Integrating Email Retrieval with Registration
After fetching the user’s primary email from the GitHub API, integrate it with your user registration process. Create a new user record in your database using the retrieved email and other profile information.

Conclusion: Integrating GitHub OAuth with Passport.js and handling email validation might initially seem like a complex task, but with the right approach, it becomes a valuable addition to your authentication strategy. By using the GitHub API to retrieve user email information, you ensure that your application obtains accurate and up-to-date data, leading to a more reliable and user-friendly experience for your users.

As you continue to develop and refine your authentication flow, the skills you’ve gained from this tutorial will prove beneficial. By addressing email validation challenges, you’re not only enhancing your application’s security but also creating a smoother onboarding process for your users.

In this tutorial, you’ve learned how to integrate GitHub OAuth with Passport.js while overcoming the challenge of email validation. By utilizing the GitHub API to fetch user email information directly, you’ve gained insights into a powerful approach to handling OAuth authentication. As you advance in your development journey, remember that continuous learning and problem-solving are key to mastering complex authentication scenarios and building robust applications.

Thank you for following along with this tutorial. Feel free to explore further customization options, refine your authentication flow, and delve into other authentication strategies supported by Passport.js. Happy coding!

Using Git Bash with Multiple GitHub Accounts using SSH Keys

Sun, 06 Aug 2023 02:47:42 GMT

Photo by Roman Synkevych on Unsplash

Introduction: If you’re new to the world of version control and collaborating on GitHub, you might be wondering how to handle multiple GitHub accounts on the same computer efficiently. Fortunately, with a simple setup using SSH keys, you can seamlessly switch between different GitHub accounts without the hassle of logging in and out repeatedly. In this beginner-friendly guide, we’ll walk you through the step-by-step process of configuring Git Bash to work with two GitHub accounts using SSH keys.

Step 1: Generating SSH Keys

SSH keys are secure cryptographic keys that allow you to authenticate with GitHub without the need for a username and password. Let’s generate SSH keys for each of your GitHub accounts:

1. Open Git Bash: First, launch Git Bash on your computer. If you haven’t installed Git Bash yet, you can download it from the official Git website and install it following the installation wizard.

2. Generate SSH Keys: In the Git Bash terminal, type the following commands, replacing <Email_1> and <Email_2 with the email addresses associated with your GitHub accounts:

For Account 1:

ssh-keygen -t ed25519 -C “<EMAIL_1>”

For Account 2:

ssh-keygen -t ed25519 -C “<EMAIL_2>”

Press Enter to run the command. You will be prompted to save the keys in the default location (~/.ssh/) with filenames like id_ed25519 and id_ed25519.pub.

Step 2: Adding SSH Keys to GitHub
To use your newly generated SSH keys for authentication on GitHub, you need to add them to your GitHub accounts:

1. Copy the Public Key: Run the following commands in Git Bash to copy the public keys for each GitHub account:

For Account 1:

clip < ~/.ssh/id_ed25519.pub

For Account 2:

clip < ~/.ssh/id_ed25519.pub

The public keys are now copied to your clipboard.

2. Adding Keys to GitHub: Log in to your GitHub Account 1 in your web browser. Then, go to “Settings” -> “SSH and GPG keys” -> “New SSH key” and paste the key you copied earlier.

3. Repeat the above step for Account 2, but this time, log in to your GitHub Account 2.

Step 3: Configuring SSH for Multiple Accounts
Next, we need to configure SSH to differentiate between the two GitHub accounts. We’ll create or edit the SSH configuration file to accomplish this:

1. Create the Configuration File: In Git Bash, type the following command to create the SSH configuration file (if it doesn’t exist):

touch ~/.ssh/config

2. Edit the Configuration File: Open the configuration file using a text editor. We’ll use the Nano editor for this example:

nano ~/.ssh/config

Add the following lines to the configuration file, replacing Email_1 and Email_2 with the corresponding email addresses used to generate the keys:

# Account 1
Host github.com
HostName github.com
User git
IdentityFile ~/.ssh/id_ed25519
# Account 2
Host github.com-acc2
HostName github.com
User git
IdentityFile ~/.ssh/id_ed25519.pub

Save and exit the text editor (for Nano, press `Ctrl+O`, then `Ctrl+X`).

Step 4: Configuring Repository URLs
Finally, to complete the setup, we need to adjust the remote URLs of the repositories associated with each GitHub account:

For Account 1’s repositories, run the following command, replacing `username` with your Account 1 GitHub username and `repo` with the repository name:

git remote set-url origin [email protected]:username/repo.git

2. For Account 2’s repositories, run the following command, replacing username with your Account 2 GitHub username and repo with the repository name:

git remote set-url origin [email protected]:username/repo.git

Conclusion:
Congratulations! You have successfully set up Git Bash to work with two GitHub accounts using SSH keys. Now, you can seamlessly switch between your accounts without any hassle, making version control and collaboration a breeze. As you continue your journey with Git and GitHub, this setup will empower you to work efficiently and securely with multiple accounts simultaneously. Happy coding!

Oracle Cheat Sheet

Sun, 07 May 2023 02:26:50 GMT

Oracle Logo

Oracle is one of the most popular relational database management systems in the world, used by many organizations to store and manage their data. SQL is the standard language used to interact with Oracle databases, allowing users to retrieve, modify, and manipulate data. However, even experienced Oracle users may need a quick reference guide for frequently used SQL commands. In this blog post, we’ll provide a cheat sheet of commonly used Oracle SQL commands that can help you write more efficient and effective SQL queries.

SELECT

The SELECT statement is used to retrieve data from one or more tables.

SELECT column1, column2, ...
FROM table_name;

WHERE

The WHERE clause is used to filter data based on certain criteria.

SELECT column1, column2, ...
FROM table_name
WHERE condition;

GROUP BY

The GROUP BY clause is used to group rows that have the same values.

SELECT column1, COUNT(column2)
FROM table_name
GROUP BY column1;

ORDER BY

The ORDER BY clause is used to sort the results in ascending or descending order.

SELECT column1, column2, ...
FROM table_name
ORDER BY column1 DESC;

JOIN

The JOIN clause is used to combine rows from two or more tables based on a related column.

SELECT column1, column2, ...
FROM table1
JOIN table2
ON table1.column = table2.column;

INSERT

The INSERT statement is used to insert new rows into a table.

INSERT INTO table_name (column1, column2, ...)
VALUES (value1, value2, ...);

UPDATE

The UPDATE statement is used to modify existing rows in a table.

UPDATE table_name
SET column1 \= value1, column2 \= value2, ...
WHERE condition;

DELETE

The DELETE statement is used to delete existing rows from a table.

DELETE FROM table_name
WHERE condition;

Whether you’re a beginner or an experienced Oracle user, having a quick reference guide for commonly used SQL commands can save you time and improve your productivity. In this blog post, we’ve provided a cheat sheet of frequently used Oracle SQL commands, including SELECT, WHERE, GROUP BY, ORDER BY, JOIN, INSERT, UPDATE, and DELETE. While this is not an exhaustive list of all SQL commands, it covers many of the fundamental commands that every Oracle user should be familiar with. By mastering these commands, you’ll be able to write more efficient and effective SQL queries, and make the most of your Oracle database.

MongoDB Cheat Sheet

Sun, 30 Apr 2023 11:34:55 GMT

MongoDB Logo

MongoDB is a popular NoSQL database used in modern web applications. With its flexible document-based data model and scalability, it has become a go-to database for many developers. However, with its many features and options, it can be overwhelming to remember all the commands and syntax. That’s why a MongoDB cheat sheet can be a handy resource for developers who want to quickly reference the essential commands and operators.

Installation
Download MongoDB from the official website
Install MongoDB on your system
Start the MongoDB server using the command: mongod

2. Basic commands:

Show all databases: show dbs
Select a database: use <database>
Show all collections in the current database: show collections
Insert a document into a collection: db.<collection>.insertOne(<document>)
Find all documents in a collection: db.<collection>.find()
Find documents that match a specific condition: db.<collection>.find(<query>)
Update a document: db.<collection>.updateOne(<filter>, <update>)
Delete a document: db.<collection>.deleteOne(<filter>)
Delete all documents in a collection: db.<collection>.deleteMany({})

3. Query Operators:

Comparison Operators: $eq, $ne, $lt, $lte, $gt, $gte
Logical Operators: $and, $or, $not
Element Operators: $exists, $type
Array Operators: $in, $nin, $all, $size

4. Aggregation:

Group documents by a specific field: db.<collection>.aggregate([{ $group: { _id: <field>, <accumulator> } }])
Sort documents by a specific field: db.<collection>.find().sort({ <field>: 1/-1 })
Limit the number of documents returned: db.<collection>.find().limit(<limit>)
Skip a certain number of documents: db.<collection>.find().skip(<skip>)
Count the number of documents in a collection: db.<collection>.count()

5.Indexing:

Create an index: db.<collection>.createIndex({ <field>: 1/-1 })
Show all indexes in a collection: db.<collection>.getIndexes()
Remove an index: db.<collection>.dropIndex({ <field>: 1/-1 })

In conclusion, a MongoDB cheat sheet can be an incredibly useful resource for developers who work with MongoDB on a regular basis. It provides a quick reference for the essential commands and operators needed to interact with the database. By keeping this cheat sheet handy, developers can increase their productivity and reduce the time spent searching for commands and syntax. Whether you’re a beginner or an experienced MongoDB user, a cheat sheet can be a valuable tool to have in your arsenal.

Guideline for reading papers.

Thu, 06 Apr 2023 13:34:43 GMT

Reading a paper can be a daunting task, especially if you are new to the field or the paper is particularly technical. Here is a step-by-step guideline that you can follow to read a paper:

Start with the title and abstract: The title and abstract can give you a quick idea of what the paper is about. They can also help you decide if the paper is relevant to your interests.
Skim the introduction: The introduction can provide you with the background information on the topic and explain the motivation for the research. Skimming through the introduction can give you a general idea of what the paper is about.
Read the conclusion: The conclusion can summarize the main findings and the contribution of the paper. Reading the conclusion can give you an overview of the paper’s main arguments and findings.
Scan the headings and subheadings: The headings and subheadings can help you understand the structure of the paper and the main sections. Scanning them can help you navigate through the paper.
Read the figures and tables: Figures and tables can provide a visual representation of the data and the findings. Reading the figures and tables can help you understand the main results and the methodology.
Read the methodology and results sections: The methodology and results sections can provide you with the details of the study design, the data collection, and the analysis. These sections can help you evaluate the quality of the study and the validity of the results.
Read the discussion: The discussion can interpret the findings, explain the implications, and suggest future research directions. Reading the discussion can help you understand the significance of the paper and the contribution to the field.
Take notes: Taking notes can help you remember the main points and the key findings of the paper. You can also jot down any questions or comments you may have.
Reflect and discuss: After reading the paper, take some time to reflect on the main points and the contribution to the field. You can also discuss the paper with your peers or colleagues to get their opinions and feedback.

By following these steps, you can read a paper effectively and efficiently. Remember, reading a paper is a skill that can be developed with practice and patience.

Mongoose Cheat Sheet

Sat, 01 Apr 2023 07:51:36 GMT

mongoose

If you’re working with Mongoose, the popular object data modeling (ODM) library for MongoDB in Node.js, having a quick reference guide or “cheat sheet” can be incredibly helpful. In this blog post, we provide a concise summary of some of the most commonly used Mongoose methods and syntax, organized by category, to help you work more efficiently and effectively with this powerful ODM.

Schema definition

const { Schema } = require('mongoose');
const userSchema = new Schema({
name: String,
email: { type: String, unique: true },
age: Number,
isAdmin: { type: Boolean, default: false },
createdAt: { type: Date, default: Date.now }
});

Model definition

const mongoose = require('mongoose');
const userSchema = require('./userSchema');
const User = mongoose.model('User', userSchema);
Creating a document
const user = new User({
name: 'John Doe',
email: '[email protected]',
age: 30
});
user.save();

Finding documents

// Find all documents
const users = await User.find();
// Find documents that match a query
const admins = await User.find({ isAdmin: true });
// Find a single document by ID
const user = await User.findById(userId);

Updating documents

// Update a single document by ID
await User.findByIdAndUpdate(userId, { name: 'Jane Doe' });
// Update multiple documents that match a query
await User.updateMany({ isAdmin: true }, { isAdmin: false });

Deleting documents

// Delete a single document by ID
await User.findByIdAndDelete(userId);
// Delete multiple documents that match a query
await User.deleteMany({ isAdmin: false });

Validation

const userSchema = new Schema({
name: { type: String, required: true },
email: { type: String, required: true, unique: true },
age: { type: Number, min: 18 },
isAdmin: { type: Boolean, default: false },
createdAt: { type: Date, default: Date.now }
});

In Mongoose, you can define relationships between models using references or subdocuments.

Using references:
To define a relationship between two models using references, you can use the ref property in a field definition. The ref property specifies the name of the target model. Here’s an example:

const userSchema = new mongoose.Schema({
name: String,
posts: [{
type: mongoose.Schema.Types.ObjectId,
ref: 'Post'
}]
});

const postSchema = new mongoose.Schema({
title: String,
content: String,
author: {
type: mongoose.Schema.Types.ObjectId,
ref: 'User'
}
});

In this example, we have two models: User and Post. The User model has a field called posts, which is an array of ObjectId values that reference Postdocuments. The Post model has a field called author, which is an ObjectIdvalue that references a User document.

To populate the posts field of a User document with the corresponding Post documents, you can use the populate() function:

const user = await User.findById(userId).populate('posts');

This will retrieve the User document with the specified _id value and then retrieve the Post subdocument with the specified postId value.

Emdadul's Blog

How to Deploy an AI Agent with Amazon Bedrock AgentCore

Table of Contents

Prerequisites

Step 1: Set Up AWS CLI

Step 2: Install and Create Your Agent

Create a requirements.txt file

Breaking Down the Code

Step 3: Test the Agent Locally

Step 4: Deploy to AgentCore Runtime

Step 5: Invoke the Agent with AWS SDK

Step 6: Clean Up

Common Issues

Conclusion

How to Add a Native Rich Text Editor in Expo / React Native (No WebView)

Why expo-rte?

Install expo-rte

Add the Editor to Your App

Customize the Toolbar

Control the Editor Programmatically

Troubleshooting

How to Implement Multi-Factor Authentication (MFA) with TOTP in Your Web Application

Understanding MFA and TOTP

What is Multi-Factor Authentication?

What is TOTP?

Setting Up the Backend

Dependencies

Core Libraries Explained

TOTP Utility Setup

Database Schema

Key Fields for MFA

Backend API Implementation

1. Enhanced Login Endpoint

2. MFA Login Verification

3. MFA Setup Endpoint

4. MFA Verification and Activation

5. MFA Disable Endpoint

Frontend Implementation

1. Authentication API Client

2. Enhanced Login Component

3. TOTP Verification Component

4. MFA Setup Modal Component

Security Considerations

1. Secret Storage

2. Rate Limiting

3. Time Window Management

4. Backup Codes

5. Session Management

Testing Your Implementation

1. Unit Tests for TOTP Functions

2. Integration Tests

3. Manual Testing Checklist

Conclusion

Key Benefits Achieved

Next Steps

Security Reminders

Host Your Own S3-Compatible MinIO Server on a VPS with Caddy and HTTPS

What You’ll Need

Step 1: Install MinIO

Step 2: Setup MinIO Systemd Service

Step 3: Point Your Subdomain

Step 4: Install & Configure Caddy (with HTTPS)

Step 5: Test It!

You Did It!

How to Add TanStack Query in Astro + React Project

Prerequisites

1. Set Up Query Client

2. Using useMutation for Data Submissions

3. Using useQuery for Fetching Data

4. Handling TanStack Query in Astro + React

5. Complete Example

Conclusion

How to Solve the Expo Network Response Timed Out Problem

20 Awesome APIs to Enhance Your Development Projects

Warp — The Terminal Reimagined for Modern Developers

Introducing Queryhub: Revolutionizing Learning with AI-Powered Study Companion

A Guide to Downloading Images from a Database using Node.js

Setting Up Seeders in Node.js and Mongoose with Example

Resolving “Window is not defined” Error during npm run build in Next.js SSR Application

Background

Create a `requirements.txt` file

Why `expo-rte`?

Install `expo-rte`

2. Using `useMutation` for Data Submissions

3. Using `useQuery` for Fetching Data