DEV Community: Abdur Rakib Rony

Building a Modern Survey Landing Page with Next.js and Tailwind CSS 🎨

Abdur Rakib Rony — Tue, 10 Jun 2025 03:48:25 +0000

🛠️ Tech Stack

Next.js 13+ with App Router
React 18 with hooks
Tailwind CSS
react-confetti
Embedded forms integration

✨ Key Features

1. Smooth Loading Animation

The page uses a subtle fade-in effect that makes the content feel more polished:

const [isLoaded, setIsLoaded] = useState(false);

useEffect(() => {
  setIsLoaded(true);
}, []);

// In JSX
<div className={`transition-all duration-1000 ease-out ${
  isLoaded ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-5'
}`}>

2. Celebratory Confetti Effect

const [showConfetti, setShowConfetti] = useState(false);

useEffect(() => {
  const confettiTimer = setTimeout(() => {
    setShowConfetti(true);
    setTimeout(() => setShowConfetti(false), 4000);
  }, 1000);

  return () => clearTimeout(confettiTimer);
}, []);

3. Responsive Window Dimensions

const [windowDimensions, setWindowDimensions] = useState({
  width: 0,
  height: 0,
});

useEffect(() => {
  const updateWindowDimensions = () => {
    setWindowDimensions({
      width: window.innerWidth,
      height: window.innerHeight,
    });
  };

  updateWindowDimensions();
  window.addEventListener('resize', updateWindowDimensions);

  return () => window.removeEventListener('resize', updateWindowDimensions);
}, []);

🎨 Design Implementation

Color Palette

bg-[#fdf8f3]  /* Warm cream background */
text-[#5e3c27] /* Rich brown for headings */
text-[#7a5b4a] /* Medium brown for subtext */

Typography

<h1 className="text-3xl md:text-4xl lg:text-5xl font-semibold text-[#5e3c27] mb-2 md:mb-3 leading-tight">
  Fashion That Feels Like You
</h1>

<p className="text-lg md:text-xl text-[#7a5b4a] mb-6 md:mb-8">
  Where Style Meets Comfort
</p>

📱 Responsive Design

<div className="max-w-4xl mx-auto px-5 md:px-10 py-10 md:py-20 text-center">
  <Image
    className="w-full h-auto rounded-xl shadow-lg shadow-[#5e3c27]/10"
    // ... other props
  />
</div>

🔗 Form Integration

<iframe 
  src="https://your-form-provider.com/embed/survey-id"
  allowFullScreen
  className="w-full h-[800px] md:h-[1000px] border-0 bg-white"
  title="Survey Form"
  frameBorder="0"
  marginWidth="0"
  marginHeight="0"
/>

Integration Tips:

Set allowFullScreen for better UX
Use responsive heights (h-[800px] md:h-[1000px])
Remove borders for seamless integration
Include title attribute for accessibility

🚀 Performance & SEO

Image Optimization

<Image 
  src={logoImage} 
  alt="Company Logo" 
  width={200} 
  height={120}
  className="mx-auto max-w-[200px] h-auto"
  priority // For above-the-fold images
/>

Meta Tags

<Head>
  <title>Your Landing Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="description" content="Your page description..." />
</Head>

🎯 Key Takeaways

✅ Smooth animations enhance user experience

✅ Warm color palettes create emotional connection

✅ Responsive design works across all devices

✅ Next.js optimizations improve performance

🔧 Component Structure

const SurveyLanding = () => {
  // State management
  const [isLoaded, setIsLoaded] = useState(false);
  const [showConfetti, setShowConfetti] = useState(false);

  // Effects for animations
  useEffect(() => {
    setIsLoaded(true);
    // Confetti timer logic
  }, []);

  return (
    <div className="min-h-screen bg-[#fdf8f3]">
      {/* Content with animations */}
    </div>
  );
};

Implementing Secure Single Sign-On Between Vue & NodeJs Applications

Abdur Rakib Rony — Thu, 20 Mar 2025 05:03:03 +0000

Introduction
Single Sign-On (SSO) is a crucial feature in modern web applications that allows users to navigate between related systems without the friction of multiple logins. In this article, I'll walk through how to implement a secure SSO mechanism between two vue and nodejs applications using AES-256-CBC encryption.
The implementation I'm sharing came from a real-world project where we needed to allow users to seamlessly switch between a Client Panel and a Partner/IB Panel while maintaining proper authentication and security.

The Problem
Our application had two separate panels:

Client Panel: Where regular users manage their accounts
Partner/IB Panel: Where partners (Introducing Brokers) manage their business

Some users had access to both panels, and we wanted to provide a smooth experience for them to switch between panels without having to log in multiple times.

Solution Overview
Our solution uses:

AES-256-CBC encryption to securely pass user identity between panels
Shared encryption key stored in the database
Token-based authentication to maintain separate sessions in each panel
Vue.js and Vuetify for the frontend components

The basic flow works like this:

User clicks "Switch to Partner Panel" in the Client Panel
Client Panel encrypts the user's ID and redirects to Partner Panel with the encrypted token
Partner Panel decrypts the token, verifies the user, and logs them in automatically
The same process works in reverse for switching back to the Client Panel

Database Setup
First, we need to set up the database to store our encryption key and panel URLs:

Add an encryption key to the broker_settings table:

INSERT INTO broker_settings (name, value)
VALUES ('CUSTOM_ENCRYPTION_KEY', '66f7a1a9-675c-8010-b25a-48230661874a');

Ensure you have the panel URLs in your general_informations table:

-- Make sure these columns exist
ALTER TABLE general_informations ADD COLUMN client_portal_url VARCHAR(255);
ALTER TABLE general_informations ADD COLUMN partner_portal_url VARCHAR(255);

-- Set the URLs
UPDATE general_informations 
SET client_portal_url = 'https://client.example.com',
    partner_portal_url = 'https://partner.example.com'
WHERE id = 1;

Backend Implementation
Client Panel AuthController Methods
Let's add three methods to the Client Panel's AuthController:

switchToPartnerPanel: Generates an encrypted token and provides the URL to redirect to the Partner Panel

async switchToPartnerPanel({ auth, response }) {
  try {
    // Ensure user is authenticated
    const user = await auth.getUser()
    if (!user) {
      return response.status(401).json({
        type: 'error',
        message: 'User not authenticated'
      })
    }

    // Check if user has IB status (partner privileges)
    if (!user.ib_status || user.ib_status !== 1) {
      return response.status(403).json({
        type: 'error',
        message: 'You do not have access to the Partner Panel'
      })
    }

    // Get encryption key from database
    const encryptionKey = await BrokerSitting.query()
      .where('name', 'CUSTOM_ENCRYPTION_KEY')
      .first()

    if (!encryptionKey || !encryptionKey.value) {
      return response.status(500).json({
        type: 'error',
        message: 'SSO configuration error'
      })
    }

    // Create a proper 32-byte key using SHA-256
    const crypto = require('crypto')
    const hash = crypto.createHash('sha256')
    hash.update(encryptionKey.value)
    const keyBuffer = hash.digest() // This gives a 32-byte buffer

    // Use the first 16 bytes of the key as the IV
    const iv = keyBuffer.slice(0, 16)

    // Get user ID to encrypt
    const userId = user.id

    // Encrypt the user ID using AES-256-CBC
    const cipher = crypto.createCipheriv('aes-256-cbc', keyBuffer, iv)
    let token = cipher.update(String(userId), 'utf8', 'base64')
    token += cipher.final('base64')

    // Get partner panel URL from database
    const partnerPortalInfo = await Database
      .table('general_informations')
      .select('partner_portal_url')
      .first()

    if (!partnerPortalInfo || !partnerPortalInfo.partner_portal_url) {
      return response.status(500).json({
        type: 'error',
        message: 'Partner portal URL not configured'
      })
    }

    // Create the SSO URL with the encrypted token
    const ssoUrl = `${partnerPortalInfo.partner_portal_url.replace(/\/$/, '')}/sso-login?token=${encodeURIComponent(token)}`

    // Return the URL to redirect to
    return response.status(200).json({
      type: 'success',
      ssoUrl
    })
  } catch (error) {
    console.error('SSO error:', error)
    return response.status(500).json({
      type: 'error',
      message: 'Internal server error',
      error: process.env.NODE_ENV === 'development' ? error.message : undefined
    })
  }
}

handleSSOLogin: Receives an encrypted token from the Partner Panel, decrypts it, and logs the user in

async handleSSOLogin({ request, response, auth, session }) {
  try {
    const { token } = request.all()

    if (!token) {
      return response.status(400).json({
        type: 'error',
        message: 'SSO token is required'
      })
    }

    // Get encryption key from database
    const encryptionKey = await BrokerSitting.query()
      .where('name', 'CUSTOM_ENCRYPTION_KEY')
      .first()

    if (!encryptionKey || !encryptionKey.value) {
      return response.status(500).json({
        type: 'error',
        message: 'SSO configuration error'
      })
    }

    // Create a proper 32-byte key using SHA-256
    const crypto = require('crypto')
    const hash = crypto.createHash('sha256')
    hash.update(encryptionKey.value)
    const keyBuffer = hash.digest() // This gives a 32-byte buffer

    // Use the first 16 bytes of the key as the IV
    const iv = keyBuffer.slice(0, 16)

    // Decrypt the token to get user ID
    let userId
    try {
      const decipher = crypto.createDecipheriv('aes-256-cbc', keyBuffer, iv)
      userId = decipher.update(token, 'base64', 'utf8')
      userId += decipher.final('utf8')
    } catch (error) {
      return response.status(400).json({
        type: 'error',
        message: 'Invalid SSO token'
      })
    }

    // Find the user in database
    const user = await Account.query()
      .where('id', userId)
      .first()

    if (!user) {
      return response.status(404).json({
        type: 'error',
        message: 'User not found'
      })
    }

    // Check if user is active
    if (user.status === 0) {
      return response.status(403).json({
        type: 'error',
        message: 'Account is blocked'
      })
    }

    // Check if email is verified
    if (user.email_status === 0) {
      return response.status(403).json({
        type: 'error',
        message: 'Email not verified'
      })
    }

    // Log in the user
    const authToken = await auth.generate(user)

    // Record login activity
    const now = moment().format('YYYY-MM-DD HH:mm:ss')
    const userAgentString = request.header('user-agent')
    const userAgent = UserAgent.parse(userAgentString)
    const userDevice = `${userAgent.family} ${userAgent.major}`

    const sessionId = uuidv4()
    session.put('loginActivitySessionId', sessionId)

    const userActivityService = new LoginActivityService()
    await userActivityService.logLoginActivity(
      user.id,
      1, // Panel = 1 for client panel
      sessionId,
      now,
      null,
      userDevice,
      request.header('referer'),
      request.ip()
    )

    // Get logout time from settings
    const logOutTimeSetting = await BrokerSitting.query()
      .where('name', 'log_out_time_client')
      .first()

    const logOutTime = logOutTimeSetting ?
      parseInt(logOutTimeSetting.value) * 60 * 1000 :
      30 * 60 * 1000 // Default to 30 minutes

    return response.status(200).json({
      type: 'success',
      message: 'SSO login successful',
      logOutTime: logOutTime,
      client: authToken
    })
  } catch (error) {
    console.error('SSO login error:', error)
    return response.status(500).json({
      type: 'error',
      message: 'Internal server error',
      error: process.env.NODE_ENV === 'development' ? error.message : undefined
    })
  }
}

logoutAndRedirectToPartner: Logs the user out of the Client Panel and redirects to the Partner Panel's logout page

async logoutAndRedirectToPartner({ auth, response }) {
  const loginUser = await auth.user.id
  const loginActivity = await LoginActivity.query()
    .where('user_id', loginUser)
    .where('panel', 1)
    .where('logout_time', null)
    .orderBy('id', 'desc')
    .first()

  if (loginActivity) {
    const userActivityService = new LoginActivityService()
    await userActivityService.logLogoutActivity(
      loginUser,
      1,
      loginActivity.session_id
    )
  }

  await auth.logout()

  // Get partner panel URL from database
  const partnerPortalInfo = await Database
    .table('general_informations')
    .select('partner_portal_url')
    .first()

  if (!partnerPortalInfo || !partnerPortalInfo.partner_portal_url) {
    return response.status(500).json({
      type: 'error',
      message: 'Partner portal URL not configured'
    })
  }

  return response.status(200).json({
    type: 'success',
    message: 'Logged out successfully',
    redirectUrl: `${partnerPortalInfo.partner_portal_url.replace(/\/$/, '')}/logout`
  })
}

Partner Panel AuthController Methods
Now let's implement the corresponding methods in the Partner Panel's AuthController:

handleSSOLogin: Receives an encrypted token from the Client Panel

async handleSSOLogin({ request, response, auth, session }) {
  try {
    const { token } = request.all();

    if (!token) {
      return response.status(400).json({
        type: 'error',
        message: 'SSO token is required'
      });
    }

    // Get encryption key from database
    const encryptionKey = await BrokerSitting.query()
      .where('name', 'CUSTOM_ENCRYPTION_KEY')
      .first();

    if (!encryptionKey || !encryptionKey.value) {
      return response.status(500).json({
        type: 'error',
        message: 'SSO configuration error'
      });
    }

    // Create a proper 32-byte key using SHA-256
    const crypto = require('crypto');
    const hash = crypto.createHash('sha256');
    hash.update(encryptionKey.value);
    const keyBuffer = hash.digest();

    // Use the first 16 bytes of the key as the IV
    const iv = keyBuffer.slice(0, 16);

    // Decrypt the token to get user ID
    let userId;
    try {
      const decipher = crypto.createDecipheriv('aes-256-cbc', keyBuffer, iv);
      userId = decipher.update(token, 'base64', 'utf8');
      userId += decipher.final('utf8');
    } catch (error) {
      console.error('Token decryption error:', error);
      return response.status(400).json({
        type: 'error',
        message: 'Invalid SSO token'
      });
    }

    // Find the user in database
    const user = await Account.query()
      .where('id', userId)
      .first();

    if (!user) {
      return response.status(404).json({
        type: 'error',
        message: 'User not found'
      });
    }

    // Verify the user has IB status
    if (!user.ib_status || user.ib_status !== 1) {
      return response.status(403).json({
        type: 'error',
        message: 'You do not have access to the Partner Panel'
      });
    }

    // Check if user is active
    if (user.status === 0) {
      return response.status(403).json({
        type: 'error',
        message: 'Account is blocked'
      });
    }

    // Log in the user
    await auth.loginViaId(user.id);

    // Record login activity
    const now = moment().format("YYYY-MM-DD HH:mm:ss");
    const userAgentString = request.header("user-agent");
    const userAgent = UserAgent.parse(userAgentString);
    const userDevice = `${userAgent.family} ${userAgent.major}`;

    const sessionId = uuidv4();
    session.put("loginActivitySessionId", sessionId);

    const userActivityService = new LoginActivityService();
    await userActivityService.logLoginActivity(
      user.id,
      2, // Panel = 2 for partner panel
      sessionId,
      now,
      null,
      userDevice,
      request.header("referer"),
      request.ip()
    );

    // Redirect to dashboard
    return response.redirect('/dashboard');
  } catch (error) {
    console.error('SSO login error:', error);
    return response.status(500).json({
      type: 'error',
      message: 'Internal server error'
    });
  }
}

switchToClientPanel: Generates an encrypted token and provides the URL to redirect to the Client Panel

async switchToClientPanel({ auth, response }) {
  try {
    // Ensure user is authenticated
    const user = await auth.getUser();

    if (!user) {
      return response.status(401).json({
        type: 'error',
        message: 'User not authenticated'
      });
    }

    // Get encryption key from database
    const encryptionKey = await BrokerSitting.query()
      .where('name', 'CUSTOM_ENCRYPTION_KEY')
      .first();

    if (!encryptionKey || !encryptionKey.value) {
      return response.status(500).json({
        type: 'error',
        message: 'SSO configuration error'
      });
    }

    // Create a proper 32-byte key using SHA-256
    const crypto = require('crypto');
    const hash = crypto.createHash('sha256');
    hash.update(encryptionKey.value);
    const keyBuffer = hash.digest();

    // Use the first 16 bytes of the key as the IV
    const iv = keyBuffer.slice(0, 16);

    // Get user ID to encrypt
    const userId = user.id;

    // Encrypt the user ID using AES-256-CBC
    const cipher = crypto.createCipheriv('aes-256-cbc', keyBuffer, iv);
    let token = cipher.update(String(userId), 'utf8', 'base64');
    token += cipher.final('base64');

    // Get client panel URL from database
    const clientPortalInfo = await Database
      .table('general_informations')
      .select('client_portal_url')
      .first();

    if (!clientPortalInfo || !clientPortalInfo.client_portal_url) {
      return response.status(500).json({
        type: 'error',
        message: 'Client portal URL not configured'
      });
    }

    // Create the SSO URL with the encrypted token
    const ssoUrl = `${clientPortalInfo.client_portal_url.replace(/\/$/, '')}/sso-login?token=${encodeURIComponent(token)}`;

    // Return the URL to redirect to
    return response.status(200).json({
      type: 'success',
      ssoUrl
    });
  } catch (error) {
    console.error('SSO error:', error);
    return response.status(500).json({
      type: 'error',
      message: 'Internal server error'
    });
  }
}

logoutAndRedirectToClient: Logs the user out of the Partner Panel and redirects to the Client Panel

async logoutAndRedirectToClient({ auth, response, session }) {
  try {
    const user = await auth.getUser();
    const userId = user.id;

    // Log logout activity
    const loginActivity = await LoginActivity.query()
      .where('user_id', userId)
      .where('panel', 2) // Partner panel
      .where('logout_time', null)
      .orderBy('id', 'desc')
      .first();

    if (loginActivity) {
      const userActivityService = new LoginActivityService();
      await userActivityService.logLogoutActivity(
        userId,
        2, // Partner panel
        loginActivity.session_id
      );
    }

    // Perform logout
    await auth.logout();
    session.clear();

    // Get client panel URL
    const clientPortalInfo = await Database
      .table('general_informations')
      .select('client_portal_url')
      .first();

    // Redirect to client panel
    if (clientPortalInfo && clientPortalInfo.client_portal_url) {
      return response.status(200).json({
        type: 'success',
        message: 'Logged out successfully',
        redirectUrl: `${clientPortalInfo.client_portal_url.replace(/\/$/, '')}/login`
      });
    } else {
      return response.status(200).json({
        type: 'success',
        message: 'Logged out successfully'
      });
    }
  } catch (error) {
    console.error('Logout error:', error);
    return response.status(500).json({
      type: 'error',
      message: 'Internal server error'
    });
  }
}

Setting Up Routes
Add these routes to your Client Panel's routes file:

// Client Panel routes
Route.get('/switch-to-partner', 'AuthController.switchToPartnerPanel').middleware(['auth'])
Route.get('/sso-login', 'AuthController.handleSSOLogin')
Route.get('/logout-to-partner', 'AuthController.logoutAndRedirectToPartner').middleware(['auth'])

And these routes to your Partner Panel's routes file:

// Partner Panel routes
Route.get('/sso-login', 'AuthController.handleSSOLogin')
Route.get('/switch-to-client', 'AuthController.switchToClientPanel').middleware(['auth'])
Route.get('/logout', 'AuthController.logoutAndRedirectToClient').middleware(['auth'])

Frontend Implementation
Now let's implement the UI components to trigger the panel switching.

Client Panel Vue Component
Create a component for the Client Panel that allows switching to the Partner Panel:

<template>
  <div>
    <v-btn
      text
      :loading="isLoading"
      :disabled="isLoading"
      @click="switchToPartnerPanel"
      class="mx-2"
    >
      <v-icon left>mdi-swap-horizontal</v-icon>
     Switch to Partner Panel
    </v-btn>

    <v-snackbar
      v-model="showError"
      color="error"
      timeout="5000"
      bottom
    >
      {{ error }}
      <template v-slot:action="{ attrs }">
        <v-btn
          text
          v-bind="attrs"
          @click="showError = false"
        >
          Close
        </v-btn>
      </template>
    </v-snackbar>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
  name: 'PanelSwitcher',
  computed: {
    ...mapState('panelSwitcher', ['isLoading', 'error']),
    showError: {
      get() {
        return this.error !== null;
      },
      set(value) {
        if (!value) {
          this.$store.commit('panelSwitcher/SET_ERROR', null);
        }
      }
    }
  },
  methods: {
    ...mapActions('panelSwitcher', ['switchToPartnerPanel'])
  }
}
</script>

Partner Panel Vue Component
Create a similar component for the Partner Panel to switch back to the Client Panel:

<template>
  <div>
    <v-btn
      text
      :loading="isLoading"
      :disabled="isLoading"
      @click="switchToClientPanel"
      class="mx-2"
    >
      <v-icon left>mdi-swap-horizontal</v-icon>
      {{ $t('clientPanel') || 'Switch to Client Panel' }}
    </v-btn>

    <v-snackbar
      v-model="showError"
      color="error"
      timeout="5000"
      bottom
    >
      {{ error }}
      <template v-slot:action="{ attrs }">
        <v-btn
          text
          v-bind="attrs"
          @click="showError = false"
        >
          Close
        </v-btn>
      </template>
    </v-snackbar>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
  name: 'PanelSwitcher',
  computed: {
    ...mapState('panelSwitcher', ['isLoading', 'error']),
    showError: {
      get() {
        return this.error !== null;
      },
      set(value) {
        if (!value) {
          this.$store.commit('panelSwitcher/SET_ERROR', null);
        }
      }
    }
  },
  methods: {
    ...mapActions('panelSwitcher', ['switchToClientPanel'])
  }
}
</script>

Vuex Store Module
Create a Vuex store module for each panel to handle the panel switching:

// Client Panel: store/modules/panelSwitcher.js
import toast from "@/services/Notification";
import HTTP from "@/_helpers/http";

// State
const state = {
  ssoUrl: null,
  isLoading: false,
  error: null
};

// Getters
const getters = {};

// Mutations
const mutations = {
  SET_LOADING(state, isLoading) {
    state.isLoading = isLoading;
  },
  SET_ERROR(state, error) {
    state.error = error;
  },
  SET_SSO_URL(state, url) {
    state.ssoUrl = url;
  }
};

// Actions
const actions = {
  async switchToPartnerPanel({ commit }) {
    commit('SET_LOADING', true);
    commit('SET_ERROR', null);

    try {
      const response = await HTTP({
        trackProgress: true,
        loadingText: 'Preparing panel switch...'
      }).get('/switch-to-partner');

      if (response.status === 200 && response.data.type === 'success') {
        commit('SET_SSO_URL', response.data.ssoUrl);
        // Redirect to partner panel
        window.location.href = response.data.ssoUrl;
      } else {
        commit('SET_ERROR', response.data.message || 'Failed to switch panel');
        toast.error(response.data.message || 'Failed to switch panel');
      }
    } catch (error) {
      console.error(error);
      commit('SET_ERROR', 'Connection error, please try again');
      toast.error('Connection error, please try again');
    } finally {
      commit('SET_LOADING', false);
    }
  }
};

export default {
  namespaced: true,
  state,
  getters,
  mutations,
  actions
};

Create a similar module for the Partner Panel, but with **switchToClientPanel **instead.

Security Considerations
This implementation includes several security measures:

Secure Key Management: The encryption key is stored in the database, not hardcoded in the application
Strong Encryption: We use AES-256-CBC with a proper 32-byte key derived from SHA-256
Minimal Data Transfer: Only the user ID is encrypted and passed between panels
Permission Verification: Users must have the proper permissions to access each panel
Activity Logging: All login and logout activities are recorded
Error Handling: Comprehensive error handling prevents security issues from improper use

Implementing Two-Factor Authentication in Next.js 14 with NextAuth.js

Abdur Rakib Rony — Thu, 06 Mar 2025 17:01:04 +0000

Two-factor authentication (2FA) adds an essential layer of security to your web applications. In this guide, I'll walk you through implementing a complete 2FA solution in a Next.js 14 application using NextAuth.js and TOTP (Time-based One-Time Password).

Why Implement 2FA?
With data breaches becoming increasingly common, relying solely on passwords is no longer sufficient. 2FA adds an extra verification step, requiring users to provide a code from their mobile device in addition to their password. This significantly reduces the risk of unauthorized access, even if passwords are compromised.

Prerequisites

A Next.js 14 application using the App Router
NextAuth.js for authentication
MongoDB or another database for user data storage
Basic knowledge of React and Next.js

Overview of Our Implementation
We'll build a complete 2FA system that:

Allows users to enable 2FA from their account settings
Generates a QR code for users to scan with authenticator apps
Verifies the 2FA setup with a code from the user's authenticator app
Redirects users to a verification page during login if 2FA is enabled
Provides a way to disable 2FA when needed

Setting Up the Database
First, we need to update our user schema to store 2FA-related information:

// models/user.js
import mongoose from "mongoose";

const userSchema = new mongoose.Schema(
  {
    // Existing user fields...
    email: String,
    firstName: String,
    lastName: String,
    // ... other fields

    // 2FA fields
    twoFactorEnabled: {
      type: Boolean,
      default: false,
    },
    twoFactorSecret: String,
  },
  { timestamps: true }
);

const User = mongoose.models.users || mongoose.model("users", userSchema);

export default User;

Installing Required Packages
We'll need a few packages to generate and verify TOTP codes:
npm install otplib qrcode

Creating Utility Functions for 2FA
Next, let's create utility functions to handle 2FA operations:

// utils/2fa.js
import { authenticator } from 'otplib';
import QRCode from 'qrcode';

// Generate a secret for a user
export const generateTwoFactorSecret = (email) => {
  const secret = authenticator.generateSecret();
  const serviceName = 'YourAppName';
  const otpAuthUrl = authenticator.keyuri(email, serviceName, secret);

  return { secret, otpAuthUrl };
};

// Generate QR code as data URL
export const generateQRCode = async (otpAuthUrl) => {
  try {
    const qrCodeDataUrl = await QRCode.toDataURL(otpAuthUrl);
    return qrCodeDataUrl;
  } catch (error) {
    console.error('Error generating QR code:', error);
    throw error;
  }
};

// Verify OTP code
export const verifyToken = (token, secret) => {
  try {
    return authenticator.verify({ token, secret });
  } catch (error) {
    console.error('Error verifying token:', error);
    return false;
  }
};

Configuring NextAuth.js
The next step is to update our NextAuth.js configuration to handle 2FA:

// lib/auth.js
import CredentialsProvider from "next-auth/providers/credentials";
import GoogleProvider from "next-auth/providers/google";
import FacebookProvider from "next-auth/providers/facebook";
import User from "@/models/user";
import { connectToDB } from "./db";

export const authOptions = {
  secret: process.env.NEXTAUTH_SECRET,
  pages: {
    signIn: "/login",
    error: "/login",
    verify: "/verify-2fa",
  },
  session: {
    strategy: "jwt",
  },
  callbacks: {
    async signIn({ user, account }) {
      if (account.provider === "credentials") {
        const email = user.email;
        await connectToDB();

        const dbUser = await User.findOne({ email });

        // Check if 2FA is enabled
        if (dbUser && dbUser.twoFactorEnabled) {
          user.requiresTwoFactor = true;
          return true;
        }

        return true;
      }

      // Handle social logins similarly
      if (account.provider === "google" || account.provider === "facebook") {
        // Similar logic for social logins
        // ...
      }

      return true;
    },
    async jwt({ token, user, trigger, session }) {
      // When first creating the JWT
      if (user) {
        token._id = user._id;
        token.user_role = user.user_role;

        // Pass along the 2FA requirement
        if (user.requiresTwoFactor) {
          token.requiresTwoFactor = true;
        }
      }

      // Handle updates, including 2FA verification
      if (trigger === "update" && session?.twoFactorVerified) {
        token.requiresTwoFactor = false;
      }

      return token;
    },
    async session({ session, token }) {
      // Include user details in session
      if (token?._id) {
        session.user._id = token._id;
        session.user.user_role = token.user_role;
      }

      // Expose the 2FA requirement to the client
      if (token.requiresTwoFactor) {
        session.requiresTwoFactor = true;
      }

      return session;
    },
  },
  providers: [
    // Your providers configuration
    // ...
  ],
};

Creating API Endpoints for 2FA Management
We need to create several API endpoints to handle 2FA operations:

2FA Setup Endpoint

// app/api/2fa/setup/route.js
import { getServerSession } from "next-auth/next";
import { NextResponse } from "next/server";
import { authOptions } from "@/lib/auth";
import { connectToDB } from "@/lib/db";
import User from "@/models/user";
import { generateTwoFactorSecret, generateQRCode } from "@/utils/2fa";

export async function POST() {
  try {
    const session = await getServerSession(authOptions);

    if (!session) {
      return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
    }

    await connectToDB();

    const user = await User.findOne({ email: session.user.email });

    if (!user) {
      return NextResponse.json({ error: "User not found" }, { status: 404 });
    }

    const { secret, otpAuthUrl } = generateTwoFactorSecret(user.email);
    const qrCodeDataUrl = await generateQRCode(otpAuthUrl);

    // Store the secret temporarily
    user.twoFactorSecret = secret;
    await user.save();

    return NextResponse.json({
      success: true,
      qrCodeDataUrl,
    });
  } catch (error) {
    console.error("Error setting up 2FA:", error);
    return NextResponse.json(
      { error: "Failed to set up 2FA" },
      { status: 500 }
    );
  }
}

2FA Verification Endpoint

// app/api/2fa/verify/route.js
import { getServerSession } from "next-auth/next";
import { NextResponse } from "next/server";
import { authOptions } from "@/lib/auth";
import { connectToDB } from "@/lib/db";
import User from "@/models/user";
import { verifyToken } from "@/utils/2fa";

export async function POST(req) {
  try {
    const session = await getServerSession(authOptions);

    if (!session) {
      return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
    }

    const { token } = await req.json();

    if (!token) {
      return NextResponse.json({ error: "Token is required" }, { status: 400 });
    }

    await connectToDB();

    const user = await User.findOne({ email: session.user.email });

    if (!user || !user.twoFactorSecret) {
      return NextResponse.json(
        { error: "2FA setup not initiated" },
        { status: 400 }
      );
    }

    const isValid = verifyToken(token, user.twoFactorSecret);

    if (!isValid) {
      return NextResponse.json({ error: "Invalid token" }, { status: 400 });
    }

    // Enable 2FA for the user
    user.twoFactorEnabled = true;
    await user.save();

    return NextResponse.json({
      success: true,
      message: "Two-factor authentication enabled",
    });
  } catch (error) {
    console.error("Error verifying 2FA token:", error);
    return NextResponse.json(
      { error: "Failed to verify token" },
      { status: 500 }
    );
  }
}

2FA Login Verification Endpoint

// app/api/auth/verify-2fa/route.js
import { getServerSession } from "next-auth/next";
import { NextResponse } from "next/server";
import { authOptions } from "@/lib/auth";
import { connectToDB } from "@/lib/db";
import User from "@/models/user";
import { verifyToken } from "@/utils/2fa";

export async function POST(req) {
  try {
    const session = await getServerSession(authOptions);

    if (!session) {
      return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
    }

    const { token } = await req.json();

    if (!token) {
      return NextResponse.json({ error: "Token is required" }, { status: 400 });
    }

    await connectToDB();

    const user = await User.findOne({ email: session.user.email });

    if (!user || !user.twoFactorSecret) {
      return NextResponse.json(
        { error: "User not found or 2FA not set up" },
        { status: 404 }
      );
    }

    const isValid = verifyToken(token, user.twoFactorSecret);

    if (!isValid) {
      return NextResponse.json({ error: "Invalid token" }, { status: 400 });
    }

    return NextResponse.json({
      success: true,
      message: "Two-factor authentication verified",
    });
  } catch (error) {
    console.error("Error verifying 2FA:", error);
    return NextResponse.json(
      { error: "Failed to verify 2FA" },
      { status: 500 }
    );
  }
}

Creating the UI Components
2FA Setup Component

// components/TwoFactorSetup.jsx
"use client";
import { useState, useEffect } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { toast } from "@/components/ui/use-toast";
import { useSession } from "next-auth/react";

const TwoFactorSetup = () => {
  const { data: session } = useSession();
  const [qrCode, setQrCode] = useState("");
  const [token, setToken] = useState("");
  const [loading, setLoading] = useState(false);
  const [setupMode, setSetupMode] = useState(false);
  const [isEnabled, setIsEnabled] = useState(false);
  const [isStatusLoading, setIsStatusLoading] = useState(true);
  const [disableMode, setDisableMode] = useState(false);

  useEffect(() => {
    // Fetch the current 2FA status when component mounts
    const checkTwoFactorStatus = async () => {
      try {
        setIsStatusLoading(true);
        const response = await fetch("/api/2fa/status");
        const data = await response.json();

        if (response.ok) {
          setIsEnabled(data.enabled);
        }
      } catch (error) {
        console.error("Error checking 2FA status:", error);
      } finally {
        setIsStatusLoading(false);
      }
    };

    if (session) {
      checkTwoFactorStatus();
    }
  }, [session]);

  const initiateTwoFactorSetup = async () => {
    try {
      setLoading(true);
      const response = await fetch("/api/2fa/setup", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
      });

      const data = await response.json();

      if (!response.ok) {
        throw new Error(data.error || "Failed to set up 2FA");
      }

      setQrCode(data.qrCodeDataUrl);
      setSetupMode(true);
    } catch (error) {
      toast({
        variant: "destructive",
        title: "Error",
        description: error.message,
      });
    } finally {
      setLoading(false);
    }
  };

  const verifyAndEnable = async () => {
    // Handle verification and enabling 2FA
    // ...
  };

  // Rest of the component implementation
  // ...

  return (
    <div className="space-y-6">
      <div className="border p-6 rounded-md">
        <h3 className="text-lg font-medium mb-4">Two-Factor Authentication</h3>

        {isEnabled ? (
          // Show 2FA enabled UI
          // ...
        ) : !setupMode ? (
          // Show setup button
          // ...
        ) : (
          // Show QR code and verification form
          // ...
        )}
      </div>
    </div>
  );
};

export default TwoFactorSetup;

2FA Verification Page

// app/verify-2fa/page.jsx
"use client";
import { useState, useEffect } from "react";
import { useRouter } from "next/navigation";
import { useSession } from "next-auth/react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { toast } from "@/components/ui/use-toast";

export default function VerifyTwoFactor() {
  const [token, setToken] = useState("");
  const [loading, setLoading] = useState(false);
  const [sessionChecked, setSessionChecked] = useState(false);
  const router = useRouter();
  const { data: session, status, update } = useSession();

  useEffect(() => {
    // Only run this check after session is loaded
    if (status !== "loading") {
      setSessionChecked(true);

      // If user is authenticated but doesn't need 2FA, redirect them away
      if (session && !session.requiresTwoFactor) {
        router.push("/");
      }
    }
  }, [session, status, router]);

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

    if (!token || token.length !== 6) {
      toast({
        variant: "destructive",
        title: "Error",
        description: "Please enter a valid 6-digit code",
      });
      return;
    }

    try {
      setLoading(true);

      const response = await fetch("/api/auth/verify-2fa", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({ token }),
      });

      const data = await response.json();

      if (!response.ok) {
        throw new Error(data.error || "Failed to verify code");
      }

      // Update the session to mark 2FA as verified
      await update({
        twoFactorVerified: true,
      });

      toast({
        title: "Success",
        description: "Two-factor authentication verified",
      });

      // Redirect to the home page
      router.push("/account/profile");
    } catch (error) {
      toast({
        variant: "destructive",
        title: "Error",
        description: error.message,
      });
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="w-full sm:max-w-md mx-auto py-10 space-y-8 p-4 sm:p-6">
      <div className="text-center">
        <h1 className="text-2xl font-bold">Verify Your Identity</h1>
        <p className="text-sm text-gray-500 mt-2">
          Enter the 6-digit code from your authenticator app
        </p>
      </div>

      <form onSubmit={handleVerification} className="space-y-6">
        {/* Form implementation */}
      </form>
    </div>
  );
}

Updating Middleware for 2FA Flow
To ensure users are properly redirected to the 2FA verification page when needed, update your middleware:

// middleware.js
import { getToken } from "next-auth/jwt";
import { NextResponse } from "next/server";

export async function middleware(req) {
  const url = req.nextUrl.clone();

  try {
    const token = await getToken({
      req,
      secret: process.env.NEXTAUTH_SECRET,
    });

    // Define protected routes
    const protectedRoutes = ["/dashboard", "/account", "/checkout"];

    // Check if 2FA is required but not verified
    const requires2FA = token?.requiresTwoFactor === true;

    // Skip middleware for the verify-2fa page and its API
    if (url.pathname === "/verify-2fa" || url.pathname === "/api/auth/verify-2fa") {
      return NextResponse.next();
    }

    // If 2FA is required, redirect to verification page
    if (token && requires2FA && url.pathname !== "/verify-2fa") {
      return NextResponse.redirect(new URL("/verify-2fa", req.url));
    }

    // Handle other authentication and authorization logic
    // ...

    return NextResponse.next();
  } catch (error) {
    console.error("Middleware error:", error);
    return NextResponse.redirect(new URL("/login", req.url));
  }
}

export const config = {
  matcher: ["/((?!api|_next/static|_next/image|favicon.ico|public).*)"],
};

Environment Variables
Make sure you have these environment variables set in your .env.local file:

NEXTAUTH_SECRET=your_next_auth_secret
NEXTAUTH_URL=http://localhost:3000

Common Issues and Troubleshooting
Database Connection Issues
If you're having trouble saving 2FA information to the database, ensure your model is correctly defined and imported. Use debugging logs to verify the data is correctly saved.

Session Not Updating
If the session isn't properly updating after 2FA verification, check your client-side update logic. The useSession().update() method is the correct way to update the session client-side.

Redirection Problems
If users aren't being redirected to the 2FA verification page when needed, check your middleware logic and ensure the token.requiresTwoFactor flag is properly set during login.

Mastering Next.js Intercepting Routes: Unlocking Seamless UI Transitions

Abdur Rakib Rony — Thu, 06 Feb 2025 08:09:52 +0000

🚀 Introduction

Next.js 13 introduced Intercepting Routes, a powerful feature that allows us to enhance user experience by keeping the current page visible while rendering modals, panels, or popups. This technique is perfect for cases like in-app notifications, media previews, and profile editing without full-page navigation.

In this guide, we’ll explore three real-world scenarios where intercepting routes can be a game-changer.

1️⃣ Scenario: In-App Notifications Panel

Use Case:

Clicking on a notification should open a notification details panel without navigating away from the current page.

🔧 Implementation

Notification Bell Component (app/components/NotificationBell.tsx)

"use client";
import Link from "next/link";

export default function NotificationBell() {
  return (
    <div>
      <Link href="/notifications" as="/notifications/panel">
        <button className="p-2 bg-blue-500 text-white rounded">🔔 Notifications</button>
      </Link>
    </div>
  );
}

Notification Panel Route (app/notifications/panel.tsx)

"use client";
import { useRouter } from "next/navigation";

export default function NotificationPanel() {
  const router = useRouter();

  return (
    <div className="fixed right-0 top-0 w-80 h-full bg-white shadow-lg p-4">
      <h2 className="text-lg font-bold">Notifications</h2>
      <p>New messages, updates, and alerts will appear here.</p>
      <button className="mt-4 px-4 py-2 bg-red-500 text-white rounded" onClick={() => router.back()}>
        Close
      </button>
    </div>
  );
}

✅ How It Works

Clicking the Notification Bell opens the notification panel (/notifications/panel).
The main page remains visible while the panel overlays it.

2️⃣ Scenario: Image or Video Preview

📝 Use Case:

Clicking on an image should open a fullscreen media preview modal instead of navigating to a new page.

🔧 Implementation

Gallery Page (app/gallery/page.tsx)

"use client";
import Link from "next/link";

export default function GalleryPage() {
  return (
    <div>
      <h1>Gallery</h1>
      <ul>
        {["image1", "image2", "image3"].map((id) => (
          <li key={id}>
            <Link href={`/gallery/${id}`} as={`/gallery/${id}/preview`}>
              <img src={`/images/${id}.jpg`} alt={id} className="w-32 h-32 cursor-pointer" />
            </Link>
          </li>
        ))}
      </ul>
    </div>
  );
}

Preview Modal Route (app/gallery/[id]/preview.tsx)

"use client";
import { useRouter } from "next/navigation";

export default function ImagePreview({ params }: { params: { id: string } }) {
  const router = useRouter();

  return (
    <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-80">
      <img src={`/images/${params.id}.jpg`} alt={params.id} className="max-w-full max-h-full" />
      <button className="absolute top-4 right-4 text-white text-xl" onClick={() => router.back()}>
        ✖ Close
      </button>
    </div>
  );
}

✅ How It Works

Clicking an image thumbnail opens a fullscreen modal (/gallery/image1/preview).
Pressing Close (✖) restores the gallery page.

3️⃣ Scenario: Context-Based Form Editing

📝 Use Case:

Clicking Edit Profile should open a form inside a modal without leaving the profile page.

🔧 Implementation

Profile Page (app/profile/page.tsx)

"use client";
import Link from "next/link";

export default function ProfilePage() {
  return (
    <div>
      <h1>My Profile</h1>
      <p>Name: John Doe</p>
      <p>Email: john@example.com</p>
      <Link href="/profile/edit" as="/profile/edit/modal">
        <button className="mt-4 px-4 py-2 bg-blue-500 text-white rounded">Edit Profile</button>
      </Link>
    </div>
  );
}

Edit Profile Modal (app/profile/edit/modal.tsx)

"use client";
import { useRouter } from "next/navigation";

export default function EditProfileModal() {
  const router = useRouter();

  return (
    <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50">
      <div className="bg-white p-6 rounded-lg shadow-lg w-96">
        <h2 className="text-xl font-semibold">Edit Profile</h2>
        <input type="text" placeholder="Name" className="block w-full border p-2 my-2" />
        <input type="email" placeholder="Email" className="block w-full border p-2 my-2" />
        <button className="mt-4 px-4 py-2 bg-green-500 text-white rounded">Save</button>
        <button className="mt-4 px-4 py-2 bg-red-500 text-white rounded ml-2" onClick={() => router.back()}>
          Cancel
        </button>
      </div>
    </div>
  );
}

✅ How It Works

Clicking Edit Profile opens a form modal (/profile/edit/modal).
Clicking Cancel restores the original profile page.

🎯 Conclusion

Intercepting routes in Next.js enhance user experience by keeping content visible while allowing seamless navigation. Whether it's notifications, media previews, or form modals, this approach ensures smooth transitions without full-page reloads.

🚀 Start implementing these patterns in your Next.js projects today and build modern, dynamic web applications!

Building a YouTube-Style Loading Bar in Vue 2: A Complete Guide

Abdur Rakib Rony — Wed, 05 Feb 2025 09:52:07 +0000

Have you ever noticed that sleek loading bar at the top of YouTube or Dev.to that appears when you navigate between pages? In this tutorial, we'll build a similar loading bar in Vue 2 using Vuex for state management and Axios for handling HTTP requests. Our implementation will include progress tracking for both uploads and downloads, making it perfect for modern web applications.

What We'll Build
We'll create a global loading bar that:

Shows progress for all API requests automatically
Tracks both upload and download progress
Has smooth animations
Can display custom loading text
Manages multiple concurrent requests
Uses Vuex for state management

Prerequisites

Basic knowledge of Vue 2
Understanding of Vuex
Familiarity with Axios
A Vue 2 project with Vuex and Axios installed

Implementation Steps

1. Setting Up the Vuex Store
First, let's create a Vuex module to manage our loading state. Create a new file store/modules/loader.js then import this into your store store/index.js:

const state = {
    pendingRequests: 0,
    isLoading: false,
    loadingText: '',
    progress: 0,
    showPercentage: false
};

const mutations = {
    INCREMENT_PENDING_REQUESTS(state) {
        state.pendingRequests++;
        state.isLoading = true;
    },
    DECREMENT_PENDING_REQUESTS(state) {
        state.pendingRequests--;
        state.isLoading = state.pendingRequests > 0;
        if (!state.isLoading) {
            state.progress = 0;
            state.loadingText = '';
            state.showPercentage = false;
        }
    },
    SET_LOADING_TEXT(state, text) {
        state.loadingText = text;
    },
    SET_PROGRESS(state, progress) {
        state.progress = Math.min(Math.max(progress, 0), 100);
        state.showPercentage = true;
    }
};

const getters = {
    isLoading: state => state.isLoading,
    loadingText: state => state.loadingText,
    progress: state => state.progress,
    showPercentage: state => state.showPercentage
};

export default {
    namespaced: true,
    state,
    mutations,
    getters
};

2. Creating the Loading Bar Component
Create a new component components/GlobalLoader.vue:

<template>
  <div v-show="isLoading" class="progress-container">
    <div 
      class="progress-bar"
      :style="{ 
        transform: `scaleX(${progress / 100})`,
        opacity: progress === 100 ? 0 : 1
      }"
    ></div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'GlobalLoader',

  computed: {
    ...mapGetters('loader', [
      'isLoading',
      'progress',
      'showPercentage'
    ])
  }
}
</script>

<style scoped>
.progress-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  z-index: 9999;
  background-color: rgba(255, 255, 255, 0.1);
}

.progress-bar {
  width: 100%;
  height: 100%;
  background-color: #16bb93;
  transform-origin: left;
  transition: transform 0.2s ease, opacity 0.3s ease;
}
</style>

3. Creating an Axios Instance with Progress Tracking
Create a new file for your HTTP client configuration:

import axios from 'axios';
import store from '@/store';

const apiBaseUrl = process.env.VUE_APP_NODE_ENV === 'development'
  ? process.env.VUE_APP_LOCAL_BASE_URL
  : process.env.VUE_APP_BASE_URL;

export default ({ loadingText = '', trackProgress = false } = {}) => {
  const instance = axios.create({
    baseURL: apiBaseUrl,
    headers: {
      Accept: '*/*',
      Authorization: `Bearer ${store.state.authentication.token}`,
      locale: 'en',
    },
  });

  // Request interceptor
  instance.interceptors.request.use(
    config => {
      store.commit('loader/INCREMENT_PENDING_REQUESTS');
      if (loadingText) {
        store.commit('loader/SET_LOADING_TEXT', loadingText);
      }

      if (trackProgress) {
        // Initialize progress
        store.commit('loader/SET_PROGRESS', 0);

        // Track upload progress
        config.onUploadProgress = progressEvent => {
          if (progressEvent.total) {
            const percentCompleted = Math.round(
              (progressEvent.loaded * 50) / progressEvent.total
            );
            store.commit('loader/SET_PROGRESS', percentCompleted);
          }
        };

        // Track download progress
        config.onDownloadProgress = progressEvent => {
          if (progressEvent.total) {
            const percentCompleted = Math.round(
              50 + (progressEvent.loaded * 50) / progressEvent.total
            );
            store.commit('loader/SET_PROGRESS', percentCompleted);
          }
        };
      }

      return config;
    },
    error => {
      store.commit('loader/DECREMENT_PENDING_REQUESTS');
      return Promise.reject(error);
    }
  );

  // Response interceptor
  instance.interceptors.response.use(
    response => {
      if (trackProgress) {
        store.commit('loader/SET_PROGRESS', 100);
      }
      store.commit('loader/DECREMENT_PENDING_REQUESTS');
      return response;
    },
    error => {
      store.commit('loader/DECREMENT_PENDING_REQUESTS');
      return Promise.reject(error);
    }
  );

  return instance;
};

How It Works

State Management: The Vuex module tracks:

Number of pending requests
Loading state
Progress percentage
Custom loading text

Progress Tracking: We split the progress bar into two phases:

First 50% for upload progress
Last 50% for download progress

Request Handling:

The request interceptor increments the pending requests counter
The response interceptor decrements it
When all requests complete, the loading bar disappears

Smooth Animations:

CSS transitions create smooth progress updates
The bar fades out when reaching 100%
Transform-origin ensures the bar grows from left to right

Usage Example
Here's how to use the loading bar in your API calls:

async login({ commit }, parameter) {
  try {
    const response = await HTTP({
      trackProgress: true,
      loadingText: 'Processing...'
    }).post('/auth/login', {
      email: parameter.email,
      password: parameter.password,
    });

    // Handle response...
  } catch (error) {
    // Handle error...
  }
}

Best Practices and Tips

The loader handles multiple concurrent requests gracefully by tracking the number of pending requests.
Use v-show instead of v-if to prevent frequent DOM updates.
Split the progress bar into upload and download phases for better user feedback.

Conclusion
This implementation provides a professional, YouTube-style loading experience for your Vue 2 application. It's highly customizable and can be easily integrated into any Vue project using Vuex and Axios.

Building a Professional Email System with Next.js and Brevo: A Complete Guide

Abdur Rakib Rony — Thu, 26 Dec 2024 06:23:45 +0000

In this comprehensive guide, we'll explore how to create a robust email system using Next.js and Brevo (formerly Sendinblue). We'll build professional, responsive email templates and implement a reliable email sending system.

Table of Contents

Introduction
Setting Up Brevo
Project Setup
Creating Email Templates
Implementing the API
Testing and Troubleshooting
Best Practices
Conclusion

Introduction
Email communication remains a crucial component of modern web applications. Whether it's order confirmations, password resets, or promotional content, having a reliable email system is essential. In this tutorial, we'll use Brevo's powerful email API with Next.js to create a professional email system.

Setting Up Brevo
First, you'll need to set up your Brevo account:

Sign up at Brevo
Navigate to SMTP & API section
Generate an API key
Add and verify your domain

// Store your API key in .env.local
BREVO_API_KEY=your_api_key_here

Project Setup
Let's start by installing the necessary dependencies:

npm install @sendinblue/client

Creating Email Templates
We'll create reusable email templates using a modular approach. Here's an example structure:

// utils/emailRenderer.js
export function renderEmailTemplate(templateName, data) {
  const sharedStyles = {
    mainContainer: "font-family: Arial, sans-serif; max-width: 600px;",
    header: "text-align: center; margin-bottom: 30px;",
    // ... more shared styles
  };

  const templates = {
    orderConfirmation: ({ orderNumber, items, total }) => `
      <div style="${sharedStyles.mainContainer}">
        <!-- Template content -->
      </div>
    `,
    // ... more templates
  };

  return templates[templateName](data);
}

Implementing the API
Create an API route to handle email sending:

// app/api/send-email/route.js
import { NextResponse } from "next/server";
import * as SibApiV3Sdk from "@sendinblue/client";
import { getEmailTemplate } from "@/utils/emailUtils";

export async function POST(req) {
  try {
    const { toEmail, subject, templateName, templateData } = await req.json();

    const htmlContent = getEmailTemplate(templateName, templateData);
    const client = new SibApiV3Sdk.TransactionalEmailsApi();

    client.setApiKey(
      SibApiV3Sdk.TransactionalEmailsApiApiKeys.apiKey,
      process.env.BREVO_API_KEY
    );

    const emailData = {
      sender: { email: "no-reply@yourdomain.com", name: "Your Brand" },
      to: [{ email: toEmail }],
      subject: subject,
      htmlContent: htmlContent,
      // ... additional configuration
    };

    const response = await client.sendTransacEmail(emailData);
    return NextResponse.json({ success: true, response });
  } catch (err) {
    console.error("Error sending email:", err);
    return NextResponse.json(
      { error: "An error occurred while sending the email" },
      { status: 500 }
    );
  }
}

Testing Your Email System
Here's an example of how to test your email system:

// Example test payload
const testEmail = {
  toEmail: "test@example.com",
  subject: "Welcome to Our Store!",
  templateName: "orderConfirmation",
  templateData: {
    orderNumber: "ORD123",
    items: [
      {
        name: "Product 1",
        quantity: 2,
        price: 29.99
      }
    ],
    total: 59.98
  }
};

// Send test email
await fetch('/api/send-email', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(testEmail)
});

Conclusion
Building a professional email system with Next.js and Brevo provides a robust solution for handling all types of email communications. By following this guide, you can implement a scalable and maintainable email system for your applications.

Resources
Brevo API Documentation
Next.js Documentation
Email Template Best Practices

Building a Full-Stack CRUD App with Next.js 14, Prisma, and PostgreSQL

Abdur Rakib Rony — Sat, 09 Nov 2024 16:27:40 +0000

In this tutorial, we'll build a full-stack CRUD (Create, Read, Update, Delete) application using Next.js 14, Prisma ORM, and PostgreSQL. We'll use Server Actions for data mutations and follow Next.js best practices.

Prerequisites

Node.js installed on your machine
Basic understanding of React and Next.js
A code editor (VS Code recommended)

Step 1: Installing PostgreSQL
Download PostgreSQL for your operating system from postgresql.org

During installation:

Remember the password you set for the postgres user
Keep the default port (5432)
Install the command line tools

Verify installation by opening Command Prompt/Terminal:

psql -U postgres
# Enter your password when prompted

Create a new database:

CREATE DATABASE mydb;
\q

Step 2: Setting Up Next.js Project
Create a new Next.js project:

npx create-next-app@latest user-management
cd user-management

Choose the following options:

Would you like to use TypeScript? › No
Would you like to use ESLint? › Yes
Would you like to use Tailwind CSS? › Yes
Would you like to use src/ directory? › Yes
Would you like to use App Router? › Yes
Would you like to customize the default import alias? › No

Install Prisma dependencies:

npm install prisma @prisma/client
npx prisma init

Step 3: Configure Prisma
Update your .env file:

DATABASE_URL="postgresql://postgres:yourpassword@localhost:5432/mydb?schema=public"

Replace yourpassword with your PostgreSQL password.

Create your Prisma schema in prisma/schema.prisma:

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

model User {
  id        Int      @id @default(autoincrement())
  email     String   @unique
  name      String?
  createdAt DateTime @default(now())
}

Push the schema to your database:

npx prisma db push

Step 4: Setting Up Server Actions
Create src/app/actions/users.js:

'use server'

import { prisma } from '@/lib/prisma'
import { revalidatePath } from 'next/cache'

export async function getUsers() {
  try {
    const users = await prisma.user.findMany()
    return { users }
  } catch (error) {
    return { error: 'Failed to fetch users' }
  }
}

export async function createUser(formData) {
  try {
    const name = formData.get('name')
    const email = formData.get('email')

    const user = await prisma.user.create({
      data: { name, email }
    })

    revalidatePath('/')
    return { user }
  } catch (error) {
    return { error: 'Failed to create user' }
  }
}

export async function updateUser(formData) {
  try {
    const id = parseInt(formData.get('id'))
    const name = formData.get('name')
    const email = formData.get('email')

    const user = await prisma.user.update({
      where: { id },
      data: { name, email }
    })

    revalidatePath('/')
    return { user }
  } catch (error) {
    return { error: 'Failed to update user' }
  }
}

export async function deleteUser(formData) {
  try {
    const id = parseInt(formData.get('id'))

    await prisma.user.delete({
      where: { id }
    })

    revalidatePath('/')
    return { success: true }
  } catch (error) {
    return { error: 'Failed to delete user' }
  }
}

Step 5: Create Components
Create src/app/components/UserForm.js:

'use client'

import { useFormStatus } from 'react-dom'
import { createUser } from '@/app/actions/users'

function SubmitButton() {
  const { pending } = useFormStatus()

  return (
    <button 
      type="submit"
      disabled={pending}
      className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 disabled:bg-blue-300"
    >
      {pending ? 'Adding...' : 'Add User'}
    </button>
  )
}

export default function UserForm() {
  return (
    <form action={createUser} className="space-y-4">
      <div>
        <label htmlFor="name" className="block mb-1">Name:</label>
        <input 
          type="text" 
          id="name" 
          name="name" 
          required
          className="border p-2 rounded w-full"
        />
      </div>
      <div>
        <label htmlFor="email" className="block mb-1">Email:</label>
        <input 
          type="email" 
          id="email" 
          name="email" 
          required
          className="border p-2 rounded w-full"
        />
      </div>
      <SubmitButton />
    </form>
  )
}

Create src/app/components/UserListItem.js:

'use client'

import { useState } from 'react'
import { updateUser, deleteUser } from '@/app/actions/users'
import { useFormStatus } from 'react-dom'

function Button({ children, ...props }) {
  const { pending } = useFormStatus()

  return (
    <button 
      {...props}
      disabled={pending}
      className={`px-3 py-1 rounded text-white disabled:opacity-50 ${props.className}`}
    >
      {pending ? 'Loading...' : children}
    </button>
  )
}

export default function UserListItem({ user }) {
  const [isEditing, setIsEditing] = useState(false)

  if (isEditing) {
    return (
      <li className="p-4 bg-gray-100 rounded">
        <form action={updateUser} className="space-y-2">
          <input type="hidden" name="id" value={user.id} />
          <input
            type="text"
            name="name"
            defaultValue={user.name}
            className="border p-2 rounded w-full"
            required
          />
          <input
            type="email"
            name="email"
            defaultValue={user.email}
            className="border p-2 rounded w-full"
            required
          />
          <div className="space-x-2">
            <Button 
              type="submit"
              className="bg-green-500 hover:bg-green-600"
            >
              Save
            </Button>
            <button
              type="button"
              onClick={() => setIsEditing(false)}
              className="bg-gray-500 text-white px-3 py-1 rounded hover:bg-gray-600"
            >
              Cancel
            </button>
          </div>
        </form>
      </li>
    )
  }

  return (
    <li className="p-4 bg-gray-100 rounded flex justify-between items-center">
      <div>
        {user.name} ({user.email})
      </div>
      <div className="space-x-2">
        <button
          onClick={() => setIsEditing(true)}
          className="bg-blue-500 text-white px-3 py-1 rounded hover:bg-blue-600"
        >
          Edit
        </button>
        <form action={deleteUser} className="inline">
          <input type="hidden" name="id" value={user.id} />
          <Button 
            type="submit"
            className="bg-red-500 hover:bg-red-600"
            onClick={(e) => {
              if (!confirm('Are you sure?')) {
                e.preventDefault()
              }
            }}
          >
            Delete
          </Button>
        </form>
      </div>
    </li>
  )
}

Step 6: Create Main Page
src/app/page.js:

import { getUsers } from './actions/users'
import UserForm from './components/UserForm'
import UserListItem from './components/UserListItem'

export default async function Home() {
  const { users, error } = await getUsers()

  if (error) {
    return <div className="p-4 text-red-500">Error: {error}</div>
  }

  return (
    <main className="p-4 max-w-4xl mx-auto">
      <h1 className="text-2xl font-bold mb-4">Users Management</h1>

      <div className="mb-8">
        <h2 className="text-xl mb-2">Current Users:</h2>
        {users?.length > 0 ? (
          <ul className="space-y-2">
            {users.map((user) => (
              <UserListItem key={user.id} user={user} />
            ))}
          </ul>
        ) : (
          <p className="text-gray-500">No users found.</p>
        )}
      </div>

      <div className="mt-8">
        <h2 className="text-xl mb-2">Add New User:</h2>
        <UserForm />
      </div>
    </main>
  )
}

Step 7: Create Prisma Instance
Create src/lib/prisma.js:

import { PrismaClient } from '@prisma/client'

const globalForPrisma = global

if (!globalForPrisma.prisma) {
  globalForPrisma.prisma = new PrismaClient()
}

export const prisma = globalForPrisma.prisma

Features Implemented

Create new users with name and email
Display list of all users
Edit existing users with inline form
Delete users with confirmation
Server-side data validation
Optimistic UI updates
Loading states for all actions
Error handling

Follow Github Code
https://github.com/abdur-rakib-rony/postgres-and-prisma-nextjs-crud-operation

Implementing Afterpay in a Next.js E-commerce Application: A Complete Guide

Abdur Rakib Rony — Sat, 09 Nov 2024 02:49:28 +0000

As e-commerce continues to evolve, offering flexible payment options has become crucial for business success. In this guide, I'll walk you through implementing Afterpay in a Next.js e-commerce application, sharing real-world code examples and best practices.

What is Afterpay?
Afterpay is a "buy now, pay later" service that allows customers to split their purchases into four equal installments, paid every two weeks. It's particularly popular in Australia, New Zealand, the United States, and the United Kingdom.

Prerequisites
Before we begin, make sure you have:

A Next.js application
An Afterpay merchant account
Basic understanding of React and API integration
Axios for API calls

Implementation Overview
Our implementation will cover:

Configuring Afterpay credentials
Setting up the API client
Creating the Afterpay component
Handling checkout flow
Managing payment confirmation
Error handling and validation

1. Setting Up Afterpay Configuration

First, let's set up our Afterpay API client. Create a file lib/afterpay.js:

import axios from "axios";

const AFTERPAY_BASE_URL = "https://global-api-sandbox.afterpay.com/v2";
const AFTERPAY_MERCHANT_ID = "YOUR_MERCHANT_ID";
const AFTERPAY_SECRET_KEY = "YOUR_SECRET_KEY";

// Create base64 encoded auth token
const authToken = Buffer.from(
  `${AFTERPAY_MERCHANT_ID}:${AFTERPAY_SECRET_KEY}`
).toString("base64");

// Create axios instance with default config
export const afterpayApi = axios.create({
  baseURL: AFTERPAY_BASE_URL,
  headers: {
    "Content-Type": "application/json",
    Accept: "application/json",
    Authorization: `Basic ${authToken}`,
    "User-Agent": `Merchant/${AFTERPAY_MERCHANT_ID}`,
  },
});

2. Creating Helper Functions

// Get Afterpay configuration
export const getAfterpayConfig = async () => {
  try {
    const { data } = await afterpayApi.get("/configuration");
    return data;
  } catch (error) {
    console.error("Afterpay config error:", error.response?.data || error.message);
    throw error;
  }
};

// Format cart items for Afterpay
export const formatAfterpayItems = (cartItems) => {
  return cartItems.map((item) => ({
    name: item.title,
    sku: item._id.toString(),
    quantity: item.quantity,
    price: {
      amount: item.price.toString(),
      currency: "AUD",
    },
    categories: [[item.category, item.subCategory]],
    pageUrl: `/products/${item.handle}`,
    imageUrl: item.featured_image,
  }));
};

// Check if order amount is eligible for Afterpay
export const isOrderEligibleForAfterpay = (amount, config) => {
  if (!config) return false;
  const min = parseFloat(config.minimumAmount.amount);
  const max = parseFloat(config.maximumAmount.amount);
  return amount >= min && amount <= max;
};

3. Creating the Afterpay Component
Here's our React component for the Afterpay payment button:

"use client";

import React, { useEffect, useState } from "react";
import Image from "next/image";

export default function Afterpay({ paymentData }) {
  const [config, setConfig] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  // Format checkout data for Afterpay
  const formatCheckoutData = () => {
    const items = formatAfterpayItems(paymentData.orderProducts);

    return {
      amount: {
        amount: paymentData.total.toString(),
        currency: "AUD",
      },
      consumer: {
        phoneNumber: paymentData.shippingAddress.phone,
        givenNames: paymentData.shippingAddress.firstName,
        surname: paymentData.shippingAddress.lastName,
        email: paymentData.shippingAddress.email,
      },
      shipping: {
        name: `${paymentData.shippingAddress.firstName} ${paymentData.shippingAddress.lastName}`,
        line1: paymentData.shippingAddress.address,
        area1: paymentData.shippingAddress.suburb,
        region: paymentData.shippingAddress.state,
        postcode: paymentData.shippingAddress.postcode,
        countryCode: "AU",
        phoneNumber: paymentData.shippingAddress.phone,
      },
      merchant: {
        redirectConfirmUrl: `${YOUR_DOMAIN}/confirm`,
        redirectCancelUrl: `${YOUR_DOMAIN}/cancel`,
        popupOriginUrl: YOUR_DOMAIN,
      },
      items,
      merchantReference: paymentData.orderId,
    };
  };

  // Handle checkout process
  const handleCheckout = async () => {
    if (!config) return;

    setLoading(true);
    setError(null);

    try {
      const checkoutData = formatCheckoutData();
      const response = await fetch("/api/afterpay", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(checkoutData),
      });

      const data = await response.json();

      if (data.error) {
        throw new Error(data.error);
      }

      if (data.redirectCheckoutUrl) {
        // Store data for confirmation
        sessionStorage.setItem("afterpayToken", data.token);
        sessionStorage.setItem("afterpayAmount", paymentData.total.toString());
        sessionStorage.setItem("afterpayOrderId", paymentData.orderId);

        // Redirect to Afterpay checkout
        window.location.href = data.redirectCheckoutUrl;
      }
    } catch (error) {
      setError("Unable to initiate Afterpay checkout. Please try again.");
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="w-full">
      <button
        onClick={handleCheckout}
        disabled={loading || !isEligible}
        className="w-full border flex items-center justify-center rounded-lg p-3 px-5 bg-primary-color text-white"
      >
        {loading ? (
          "Processing..."
        ) : (
          <div className="flex items-center gap-2">
            <span>Pay with</span>
            <Image
              src="/afterpay.png"
              alt="Afterpay"
              width={100}
              height={20}
              className="h-5 w-auto object-contain"
            />
          </div>
        )}
      </button>
    </div>
  );
}

4. Setting Up API Routes
Create an API route for handling Afterpay requests (app/api/afterpay/route.js):

import { NextResponse } from "next/server";
import { createCheckout, getAfterpayConfig } from "@/lib/afterpay";

export async function GET() {
  try {
    const config = await getAfterpayConfig();
    return NextResponse.json(config);
  } catch (error) {
    return NextResponse.json(
      { error: error.response?.data?.message || error.message },
      { status: error.response?.status || 500 }
    );
  }
}

export async function POST(request) {
  try {
    const checkoutData = await request.json();

    // Validate required fields
    const requiredFields = ["amount", "consumer", "shipping", "merchant"];
    const missingFields = requiredFields.filter(
      (field) => !checkoutData[field]
    );

    if (missingFields.length > 0) {
      return NextResponse.json(
        {
          error: "Missing required fields",
          details: `Missing: ${missingFields.join(", ")}`,
        },
        { status: 400 }
      );
    }

    const response = await createCheckout(checkoutData);
    return NextResponse.json(response);
  } catch (error) {
    return NextResponse.json(
      { error: error.response?.data?.message || error.message },
      { status: error.response?.status || 500 }
    );
  }
}

5. Handling Payment Confirmation
Create a confirmation page (app/confirm/page.js) to handle successful payments:

"use client";

export default function ConfirmPage() {
  const searchParams = useSearchParams();
  const [processing, setProcessing] = useState(true);
  const [paymentDetails, setPaymentDetails] = useState(null);

  useEffect(() => {
    const handleConfirmation = async () => {
      try {
        const status = searchParams.get("status");
        const orderToken = searchParams.get("orderToken");

        if (status === "SUCCESS" && orderToken) {
          const amount = sessionStorage.getItem("afterpayAmount");
          const merchantReference = sessionStorage.getItem("afterpayOrderId");

          const response = await fetch("/api/afterpay/capture", {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify({
              orderToken,
              amount,
              merchantReference,
            }),
          });

          if (!response.ok) {
            throw new Error("Payment capture failed");
          }

          const data = await response.json();
          setPaymentDetails(data);
        }
      } catch (error) {
        console.error("Confirmation error:", error);
      } finally {
        setProcessing(false);
      }
    };

    handleConfirmation();
  }, [searchParams]);

  // Render confirmation UI
}

Best Practices and Tips

Error Handling: Always implement comprehensive error handling at every step of the payment process.
Validation: Validate all data before sending it to Afterpay to avoid failed API calls.
Security: Never expose your Afterpay credentials in client-side code.
Testing: Use Afterpay's sandbox environment extensively before going live.
User Experience: Provide clear feedback during the payment process and handle edge cases gracefully.

Implementing Hosted Checkout with ANZ Worldline Payment Solutions in Next.js

Abdur Rakib Rony — Thu, 26 Sep 2024 20:25:40 +0000

As developers, integrating secure and efficient payment solutions into our applications is crucial. In this post, we'll walk through implementing a hosted checkout solution using ANZ Worldline Payment Solutions in a Next.js application. This approach offers a seamless payment experience while maintaining high security standards.

What is Hosted Checkout?
Hosted Checkout is a payment solution where the payment form is hosted by the payment provider. This method simplifies PCI DSS compliance as sensitive card data is handled directly by the provider's secure systems.

Prerequisites

A Next.js application
An account with ANZ Worldline Payment Solutions
Basic knowledge of React and API routes in Next.js

Setting Up the Project
First, let's set up our Next.js project structure:

src/
  app/
    api/
      create-hosted-checkout/
        route.js
      payment-details/
        [paymentId]/
          route.js
    checkout/
      page.jsx
    payment-result/
      page.jsx
    page.jsx

Implementing the Hosted Checkout

Create the Hosted Checkout API Route In src/app/api/create-hosted-checkout/route.js:

import { NextResponse } from "next/server";
const onlinePaymentsSdk = require("onlinepayments-sdk-nodejs");

const client = onlinePaymentsSdk.init({
    host: 'payment.preprod.anzworldline-solutions.com.au',
    apiKeyId: 'YOUR_API_KEY_ID',
    secretApiKey: 'YOUR_SECRET_API_KEY',
    integrator: 'OnlinePayments',
});

const baseUrl = process.env.NEXT_PUBLIC_BASE_URL || 'http://localhost:3000';

export async function POST(request) {
    const createHostedCheckoutRequest = {
        order: {
            amountOfMoney: {
                amount: 10 * 100, // 1000 cents AUD = $10
                currencyCode: 'AUD',
            },
        },
        hostedCheckoutSpecificInput: {
            returnUrl: `${baseUrl}/payment-result`,
        },
    };

    try {
        const response = await client.hostedCheckout.createHostedCheckout(
            'YOUR_MERCHANT_ID',
            createHostedCheckoutRequest,
            null
        );

        return NextResponse.json(response);
    } catch (error) {
        console.error("Error creating payment:", error);
        return NextResponse.json(
            { error: "Failed to create payment", details: error.message },
            { status: 500 }
        );
    }
}

Implement the Checkout Page In src/app/checkout/page.jsx:

"use client";
import React, { useState, useEffect } from "react";
import { CreditCard } from "lucide-react";

export default function CheckoutPage() {
    const [res, setRes] = useState(null);

    useEffect(() => {
        if (res && res.body && res.body.redirectUrl) {
            window.location.href = res.body.redirectUrl;
        }
    }, [res]);

    const submitForm = async () => {
        try {
            const response = await fetch("/api/create-hosted-checkout", {
                method: "POST",
            });
            const data = await response.json();
            setRes(data);
        } catch (error) {
            console.error("Error during checkout:", error);
        }
    };

    return (
        <div className="min-h-screen py-6 flex flex-col justify-center items-center container mx-auto">
            <button
                className="border flex items-center rounded-lg p-2 bg-fuchsia-500 font-semibold text-white hover:bg-fuchsia-600 transition-colors"
                onClick={submitForm}
            >
                <CreditCard className="mr-2 h-5 w-5" /> Checkout
            </button>
            {res && (
                <div className="border rounded-lg p-10 mt-10 break-words max-w-full overflow-x-auto">
                    <p>Redirecting to payment page...</p>
                    <pre className="mt-4 text-sm">
                        {JSON.stringify(res, null, 2)}
                    </pre>
                </div>
            )}
        </div>
    );
}

3. Handle Payment Result
Create an API route to fetch payment details:
In src/app/api/payment-details/[paymentId]/route.js:

import { NextResponse } from "next/server";
const onlinePaymentsSdk = require("onlinepayments-sdk-nodejs");

const client = onlinePaymentsSdk.init({
    host: 'payment.preprod.anzworldline-solutions.com.au',
    apiKeyId: 'YOUR_API_KEY_ID',
    secretApiKey: 'YOUR_SECRET_API_KEY',
    integrator: 'OnlinePayments',
});

export async function GET(request, { params }) {
    const hostedCheckoutId = params.paymentId;

    if (!hostedCheckoutId) {
        return NextResponse.json(
            { error: "Hosted Checkout ID is required" },
            { status: 400 }
        );
    }

    try {
        const hostedCheckoutStatus = await client.hostedCheckout.getHostedCheckout(
            'YOUR_MERCHANT_ID',
            hostedCheckoutId,
            null
        );

        return NextResponse.json(hostedCheckoutStatus);
    } catch (error) {
        console.error("Error getting payment details:", error);
        return NextResponse.json(
            { error: "Failed to get payment details", details: error.message },
            { status: 500 }
        );
    }
}

Then, create a page to display the payment result:
In src/app/payment-result/page.jsx:

"use client";
import React, { useEffect, useState } from "react";
import { useSearchParams } from "next/navigation";

export default function PaymentResultPage() {
    const [paymentDetails, setPaymentDetails] = useState(null);
    const [error, setError] = useState(null);
    const searchParams = useSearchParams();
    const hostedCheckoutId = searchParams.get("hostedCheckoutId");

    useEffect(() => {
        if (hostedCheckoutId) {
            fetch(`/api/payment-details/${hostedCheckoutId}`)
                .then((response) => {
                    if (!response.ok) {
                        throw new Error('Network response was not ok');
                    }
                    return response.json();
                })
                .then((data) => setPaymentDetails(data))
                .catch((error) => {
                    console.error("Error fetching payment details:", error);
                    setError("Failed to fetch payment details. Please try again.");
                });
        }
    }, [hostedCheckoutId]);

    if (error) {
        return <div className="text-red-500">{error}</div>;
    }

    if (!paymentDetails) {
        return <div>Loading payment details...</div>;
    }

    return (
        <div className="p-4">
            <h1 className="text-2xl font-bold mb-4">Payment Result</h1>
            <pre className="bg-gray-100 p-4 rounded overflow-x-auto">
                {JSON.stringify(paymentDetails, null, 2)}
            </pre>
        </div>
    );
}

Conclusion
With these components in place, you've successfully implemented a hosted checkout solution using ANZ Worldline Payment Solutions in your Next.js application. This approach provides a secure and seamless payment experience for your users while simplifying PCI DSS compliance for your application.
Remember to replace placeholder values like YOUR_API_KEY_ID, YOUR_SECRET_API_KEY, and YOUR_MERCHANT_ID with your actual credentials from ANZ Worldline Payment Solutions.
By leveraging hosted checkout, you can focus on building great features for your application while leaving the complexities of payment processing to the experts.