Forem: Danielle Hayes

Secure Remote Access to AWS Environments Using VPN and Zero-Trust Principles

Danielle Hayes — Tue, 04 Nov 2025 16:39:50 +0000

Managing a cloud environment often means balancing security with accessibility. For teams working on AWS, providing remote access to resources while ensuring data safety is critical. In this post, I’ll walk through best practices for implementing secure remote access to your AWS environments using VPN and zero-trust principles.

Why Secure Remote Access Matters

Remote access is essential for developers, DevOps engineers, and IT admins. However, without proper controls, it can become a major attack vector. Common challenges include:

Exposing sensitive data to public networks
Unauthorized access from compromised endpoints
Difficulty in auditing and monitoring user activity

A combination of VPNs and zero-trust access models can help mitigate these risks.

Step 1: Set Up an AWS Client VPN

AWS Client VPN is a managed VPN service that allows users to securely connect to your AWS VPC. Here’s a quick overview:

Navigate to the AWS VPC console and select Client VPN Endpoints.
Create a Client VPN endpoint, specifying your authentication method (Active Directory, mutual certificates, or SAML).
Associate the VPN with the appropriate VPC subnets to allow access to resources.
Configure authorization rules to control which users or groups can access which subnets.

Tip: Using mutual certificate authentication improves security compared to password-only methods.

Step 2: Implement Zero-Trust Access

Zero-trust architecture ensures users are verified before granting access to any resource, even if they are inside the network. Key steps:

Enable AWS Verified Access or IAM policies that enforce least-privilege access.
Use multi-factor authentication (MFA) for all users.
Monitor access patterns via AWS CloudTrail and CloudWatch to detect anomalies.

Zero-trust principles minimize risk if a VPN credential or endpoint is compromised.

Step 3: Monitor and Audit Access

Visibility is critical. For remote access:

Enable VPC Flow Logs to track network activity.
Use AWS CloudTrail to log API calls and user actions.
Regularly review logs for suspicious behavior and enforce alerts for anomalies.

This combination ensures you can detect unauthorized access attempts and respond quickly.

Step 4: Combine VPN and Zero-Trust for Best Security

While VPNs provide a secure tunnel, they’re not enough alone. Integrating zero-trust access ensures that only authenticated and authorized users reach your AWS resources. Together, they provide:

✅ Encrypted and secure remote connections
✅ Controlled and auditable access to sensitive resources
✅ Reduced attack surface even for remote users

Conclusion

Secure remote access is crucial for teams working on AWS. By combining AWS Client VPN with zero-trust principles, you can provide your team with reliable access while protecting your cloud infrastructure.

Have you implemented secure remote access in your AWS environment? Share your experiences or tips in the comments!

Send Emails from Your Next.js App Using EmailJS

Danielle Hayes — Tue, 04 Nov 2025 16:29:47 +0000

Need a way to send emails directly from your frontend? Whether it’s contact forms, notifications, or feedback messages, EmailJS makes it simple — no backend required. Here’s a step-by-step guide to integrating EmailJS with your Next.js app.

What is EmailJS?

EmailJS allows you to send emails straight from JavaScript without needing a server. It supports popular email services like Gmail, Outlook, and more. This is perfect for sending transactional emails or form submissions directly from your frontend.

Create an EmailJS Account

Go to EmailJS and sign up.
Set up an Email Service (e.g., Gmail).
Create a Template to define the email content (name, email, message, etc.).
Copy your Service ID, Template ID, and Public Key — you’ll need them later.

Install EmailJS SDK

Install the official EmailJS SDK via npm or yarn:

npm install @emailjs/browser
# or
yarn add @emailjs/browser

Build a Contact Form

Create a simple form in Next.js to capture user input and send emails via EmailJS.

"use client";
import { useState } from "react";
import emailjs from "@emailjs/browser";
import { toast } from "react-toastify";

export default function ContactForm() {
  const [formData, setFormData] = useState({ name: "", email: "", message: "" });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData({ ...formData, [name]: value });
  };

  const handleSubmit = async (e) => {
    e.preventDefault();

    const serviceID = process.env.NEXT_PUBLIC_EMAILJS_SERVICE_ID;
    const templateID = process.env.NEXT_PUBLIC_EMAILJS_TEMPLATE_ID;
    const userID = process.env.NEXT_PUBLIC_EMAILJS_PUBLIC_KEY;

    try {
      const response = await emailjs.send(serviceID, templateID, formData, userID);
      if (response.status === 200) {
        toast.success("Message sent successfully!");
        setFormData({ name: "", email: "", message: "" });
      }
    } catch (error) {
      toast.error("Failed to send message. Please try again later.");
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        name="name"
        placeholder="Your Name"
        value={formData.name}
        onChange={handleChange}
        required
      />
      <input
        type="email"
        name="email"
        placeholder="Your Email"
        value={formData.email}
        onChange={handleChange}
        required
      />
      <textarea
        name="message"
        placeholder="Your Message"
        value={formData.message}
        onChange={handleChange}
        required
      />
      <button type="submit">Send Message</button>
    </form>
  );
}

Highlights:

useState: Manages form data.

emailjs.send: Sends the email using EmailJS.

toast: Shows success or error notifications (optional).

Use Environment Variables

Keep sensitive data safe by storing your Service ID, Template ID, and Public Key in .env.local:

NEXT_PUBLIC_EMAILJS_SERVICE_ID=your_service_id
NEXT_PUBLIC_EMAILJS_TEMPLATE_ID=your_template_id
NEXT_PUBLIC_EMAILJS_PUBLIC_KEY=your_public_key

Restart your development server after adding or updating environment variables.

Deploy Your App

Deploy your Next.js app to Vercel or any platform:

Push your code to GitHub.
Connect the repository in Vercel and deploy.
Add the environment variables in Vercel dashboard to enable email functionality in production.

✅ Why This Approach Works

No backend needed: Send emails directly from your frontend.
Flexible: Works with any supported email service.
Quick setup: Perfect for contact forms, feedback forms, or notifications.

With this setup, your Next.js app can now send emails instantly and efficiently. 🚀

Get Telegram Notifications from Your Next.js App in Minutes

Danielle Hayes — Tue, 04 Nov 2025 16:21:42 +0000

Want to get real-time notifications from your website directly in Telegram? Whether it’s contact form submissions, system alerts, or user activity, using a Telegram bot is a simple and effective solution. Here’s how to set it up with Next.js.

Create a Telegram Bot

Open Telegram and search @botfather.
Type /newbot and follow the instructions.
Save the Bot Token provided.

Get your Chat ID:

Personal chat: Send a message to your bot, then visit:
https://api.telegram.org/bot<YOUR_BOT_TOKEN>/getUpdates
Group chat: Add the bot to a group, send a message, and use the same URL.

Set Up a Next.js API Route

Create a server-side endpoint to send messages via the bot.

// pages/api/notify.js
import axios from 'axios';

export default async function handler(req, res) {
  if (req.method !== 'POST') return res.status(405).json({ message: 'Method not allowed' });

  const { name, email, message } = req.body;
  const botToken = process.env.TELEGRAM_BOT_TOKEN;
  const chatId = process.env.TELEGRAM_CHAT_ID;

  try {
    const response = await axios.post(`https://api.telegram.org/bot${botToken}/sendMessage`, {
      chat_id: chatId,
      text: `New message:\nName: ${name}\nEmail: ${email}\nMessage: ${message}`,
    });
    res.status(200).json({ success: response.data.ok });
  } catch (err) {
    console.error(err);
    res.status(500).json({ success: false });
  }
}

Store TELEGRAM_BOT_TOKEN and TELEGRAM_CHAT_ID in .env.local.

Create a Contact Form

"use client";
import { useState } from 'react';
import axios from 'axios';

export default function ContactForm() {
  const [form, setForm] = useState({ name: '', email: '', message: '' });

  const handleChange = (e) => setForm({ ...form, [e.target.name]: e.target.value });

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      const res = await axios.post('/api/notify', form);
      alert(res.data.success ? 'Message sent!' : 'Failed to send message.');
      if (res.data.success) setForm({ name: '', email: '', message: '' });
    } catch {
      alert('Error sending message.');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input name="name" value={form.name} onChange={handleChange} placeholder="Name" required />
      <input name="email" value={form.email} onChange={handleChange} placeholder="Email" type="email" required />
      <textarea name="message" value={form.message} onChange={handleChange} placeholder="Message" required />
      <button type="submit">Send</button>
    </form>
  );
}

Deploy and Test

Add your environment variables in production.
Submit the form — messages appear instantly in Telegram.

✅ Why This Works

Real-time updates: No need to constantly check your backend.
Lightweight: No complex notification system required.
Flexible: Works for personal or group chats.

Now your Next.js app can send instant notifications directly to Telegram, keeping you informed wherever you are. 🚀

Configuring Vite for Development Over VPN 🚀

Danielle Hayes — Tue, 04 Nov 2025 16:10:34 +0000

Vite is an amazing development tool with lightning-fast build times, hot-module reloading, and an intuitive configuration setup. However, working behind a VPN can sometimes cause issues when developing locally. Let’s walk through how to configure Vite to work seamlessly over a VPN.

Why the Issue with VPNs?

When you’re using a VPN, network requests and traffic are often tunneled through different gateways. This can affect how local development servers (like Vite) interact with your machine’s network interfaces. The most common issues are:

Host Binding: Vite defaults to localhost (127.0.0.1), which might not be accessible over the VPN.
Port Conflicts: Certain VPNs block or reserve specific ports.

Fixing Vite Configuration for VPNs

To solve these issues, you need to tweak the Vite configuration slightly. Luckily, Vite offers an easy way to modify how the dev server behaves.

1. Bind Vite to Your Local Network Interface

By default, Vite binds to localhost. You can configure Vite to bind to all network interfaces using the server.host option. This will allow devices connected to your local network (even over a VPN) to access your development server.

Edit your vite.config.js (or vite.config.ts if you're using TypeScript):

// vite.config.js
export default {
  server: {
    host: '0.0.0.0', // Bind to all available network interfaces
    port: 3000, // Default port, change if necessary
  },
};

2. Consider Changing the Port (if needed)

Some VPNs block certain ports or cause conflicts with ports you’re trying to use. If you notice connection issues, try using a different port. You can easily change the port in your vite.config.js:

// vite.config.js
export default {
  server: {
    host: '0.0.0.0',
    port: 8080, // Change to a different port, like 8080 or 5000
  },
};

3. Use HTTPS if Required

Some VPNs require secure communication over HTTPS. If that’s the case, you can enable HTTPS in Vite by generating SSL certificates or using self-signed ones.

// vite.config.js
import fs from 'fs';
import path from 'path';

export default {
  server: {
    host: '0.0.0.0',
    https: {
      key: fs.readFileSync(path.resolve(__dirname, 'path/to/your/ssl-key.pem')),
      cert: fs.readFileSync(path.resolve(__dirname, 'path/to/your/ssl-cert.pem')),
    },
  },
};

4. Tweak Your Firewall or VPN Configuration

If you still face connectivity issues, ensure your VPN or firewall isn't blocking traffic on the port Vite uses. You might need to:

Allow traffic to the development server port (e.g., 3000) in your VPN’s settings.
Disable or adjust your firewall rules for local development.

Wrapping Up

Working with Vite over a VPN doesn’t have to be a hassle. By binding Vite to all network interfaces, tweaking the port, and potentially adding HTTPS support, you can keep your development environment smooth—even when working remotely behind a VPN.

Have any other tips or issues you encountered? Drop them in the comments below! 💬

Happy coding! 🎉

Applying an Image on a 3D Model with React Three Drei’s Decal

Danielle Hayes — Tue, 04 Nov 2025 16:05:18 +0000

Adding images or patterns to 3D models can bring your scene to life, especially if you’re building applications where customization, such as tattoo previews on mannequin models, is important. Here’s how you can achieve this using Decal from React Three Drei, a powerful set of helpers for React Three Fiber.

Prerequisites
Before we start, make sure you have a project set up with:

React Three Fiber for rendering 3D scenes with React
React Three Drei for additional 3D helpers like Decal
GLTF or OBJ model of a 3D object (e.g., mannequin or similar)

Install Required Packages

If you haven’t yet, install @react-three/fiber, @react-three/drei, and three:

npm install @react-three/fiber @react-three/drei three

Set Up the 3D Scene and Canvas

In your main App.js file, initialize the 3D scene. Here’s the basic setup for a Canvas component:

// App.js
import React from 'react';
import { Canvas } from '@react-three/fiber';
import { Suspense } from 'react';
import { Loader } from '@react-three/drei';
import Experience from './components/Experience';

function App() {
  return (
    <div style={{ width: '100vw', height: '100vh' }}>
      <Canvas>
        <Suspense fallback={null}>
          <Experience />
        </Suspense>
      </Canvas>
      <Loader />
    </div>
  );
}

export default App;

Create the Canvas Component

The Canvas component will load the model and apply a decal to it. Let’s break it down into steps.

Load the Model
Use the useGLTF hook to load a 3D model. Make sure your model is placed in the public/models directory and is in .glb or .gltf format.
Apply the Decal Texture
Use the Decal component from @react-three/drei. This component will allow you to apply an image to the model.

Building the Canvas Component

Now let’s dive into the Canvas component code.

// Experience.jsx
import React, { useRef } from 'react';
import { useGLTF, Decal, useTexture } from '@react-three/drei';
import { useFrame } from '@react-three/fiber';

function Experience() {
  // Load the 3D model
  const { nodes } = useGLTF('/models/male_mannequin.glb');

  // Load the texture to be applied as a decal
  const decalTexture = useTexture('/textures/tattoo.png');

  // A ref for rotating the model (optional)
  const modelRef = useRef();

  // Rotate the model for some interaction
  useFrame(() => {
    modelRef.current.rotation.y += 0.01;
  });

  return (
    <group ref={modelRef} position={[0, -1.5, 0]}>
      {/* Mannequin model */}
      <mesh geometry={nodes.mannequin.geometry} castShadow receiveShadow>
        <meshStandardMaterial color="lightgrey" />

        {/* Decal component to apply the image */}
        <Decal 
          position={[0, 0.5, 0.6]}     // Adjust position based on your model's needs
          rotation={[Math.PI, 0, 0]}    // Adjust rotation for orientation
          scale={0.3}                   // Adjust size of the decal
          map={decalTexture}            // Pass the loaded texture here
        />
      </mesh>
    </group>
  );
}

export default Experience;

Adjusting the Decal Properties

To make sure the decal appears exactly where you want it, experiment with these properties:

position: [x, y, z] coordinates to place the decal on the model. Adjust these based on the model’s geometry.
rotation: [x, y, z] values to orient the decal. Use radians, e.g., Math.PI for 180 degrees.
scale: Controls the size of the decal. Start small (e.g., 0.1 or 0.3) and increase as needed.

Adding a Fallback or Error Boundary

If the model or texture is having trouble loading, wrap the Experience component in a fallback or error boundary.

<Suspense fallback={<LoadingScreen />}>
  <Experience />
</Suspense>

Testing and Fine-Tuning

Run the app, and you should see the decal applied to the 3D model! Adjust the position, rotation, and scale to fit the decal exactly where you want it.

All set!