Building an SMS Scheduler with Next.js and AWS EventBridge

npx create-next-app@latest sms-scheduler-app --ts --tailwind --eslint --app --src-dir --import-alias ""@/*""
cd sms-scheduler-app

npm install next-auth @aws-sdk/client-scheduler @aws-sdk/client-sns @aws-sdk/client-dynamodb @aws-sdk/lib-dynamodb zod react-datepicker @types/react-datepicker date-fns date-fns-tz uuid @types/uuid
# or
yarn add next-auth @aws-sdk/client-scheduler @aws-sdk/client-sns @aws-sdk/client-dynamodb @aws-sdk/lib-dynamodb zod react-datepicker @types/react-datepicker date-fns date-fns-tz uuid @types/uuid

# .env.local

# AWS Credentials (Ensure the corresponding IAM user/role has necessary permissions)
# IMPORTANT: Replace with your actual AWS credentials for local development.
# For production, use secure methods like IAM Roles instead of hardcoding keys here.
# See Section 4, Step 2 for required permissions.
AWS_ACCESS_KEY_ID=YOUR_ACTUAL_AWS_ACCESS_KEY_ID
AWS_SECRET_ACCESS_KEY=YOUR_ACTUAL_AWS_SECRET_ACCESS_KEY
AWS_REGION=us-east-1 # Replace with your preferred AWS region (e.g., us-west-2)

# NextAuth Configuration
NEXTAUTH_URL=http://localhost:3000 # Change for production deployment URL
NEXTAUTH_SECRET= # Generate a strong secret using: openssl rand -base64 32

# Application Specific Variables
# IMPORTANT: Replace with the actual ARN and names of the AWS resources you create.
# These AWS resources will be created in later steps (see Section 4).
EVENTBRIDGE_SCHEDULER_ROLE_ARN=arn:aws:iam::YOUR_ACTUAL_AWS_ACCOUNT_ID:role/YourSchedulerExecutionRoleName # Replace ACCOUNT_ID and RoleName
DYNAMODB_SCHEDULES_TABLE_NAME=SmsSchedulesTableName # Replace with your chosen table name

# Optional: Specify an SNS Topic ARN if you prefer not to publish directly to phone numbers
# Replace YOUR_REGION, YOUR_ACTUAL_AWS_ACCOUNT_ID, and YourSnsTopicName if using this option.
# SNS_TOPIC_ARN=arn:aws:sns:YOUR_REGION:YOUR_ACTUAL_AWS_ACCOUNT_ID:YourSnsTopicName

// src/components/SchedulerForm.tsx
'use client';

import React, { useState } from 'react';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
import { formatISO } from 'date-fns';

export default function SchedulerForm() {
  const [phoneNumber, setPhoneNumber] = useState('');
  const [message, setMessage] = useState('');
  const [scheduledAt, setScheduledAt] = useState<Date | null>(new Date());
  const [isLoading, setIsLoading] = useState(false);
  const [statusMessage, setStatusMessage] = useState('');
  const [isError, setIsError] = useState(false);

  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    setIsLoading(true);
    setStatusMessage('');
    setIsError(false);

    if (!scheduledAt) {
      setStatusMessage('Please select a valid date and time.');
      setIsError(true);
      setIsLoading(false);
      return;
    }

    // Basic validation (more robust validation happens server-side)
    if (!phoneNumber || !message) {
        setStatusMessage('Phone number and message are required.');
        setIsError(true);
        setIsLoading(false);
        return;
    }

    // Ensure date is in the future (client-side check, server enforces)
    if (scheduledAt <= new Date()) {
        setStatusMessage('Scheduled time must be in the future.');
        setIsError(true);
        setIsLoading(false);
        return;
    }

    try {
      const response = await fetch('/api/schedule', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          phoneNumber,
          message,
          // Send timestamp in UTC ISO format
          scheduledAt: formatISO(scheduledAt),
        }),
      });

      const result = await response.json();

      if (!response.ok) {
        throw new Error(result.error || `HTTP error! status: ${response.status}`);
      }

      setStatusMessage(`Success! Message scheduled with ID: ${result.scheduleId}`);
      setIsError(false);
      // Optionally clear the form
      // setPhoneNumber('');
      // setMessage('');
      // setScheduledAt(new Date());

    } catch (error: any) {
      console.error('Scheduling failed:', error);
      setStatusMessage(`Scheduling failed: ${error.message}`);
      setIsError(true);
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <form onSubmit={handleSubmit} className="space-y-4 max-w-md mx-auto p-6 bg-white rounded-lg shadow-md">
      <h2 className="text-2xl font-semibold text-gray-800 mb-4">Schedule SMS Reminder</h2>

      <div>
        <label htmlFor="phoneNumber" className="block text-sm font-medium text-gray-700 mb-1">
          Phone Number (E.164 format)
        </label>
        <input
          type="tel"
          id="phoneNumber"
          value={phoneNumber}
          onChange={(e) => setPhoneNumber(e.target.value)}
          placeholder="+12065550100"
          required
          className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
        />
         <p className="text-xs text-gray-500 mt-1">Include country code, e.g., +1 for US/Canada.</p>
      </div>

      <div>
        <label htmlFor="message" className="block text-sm font-medium text-gray-700 mb-1">
          Message
        </label>
        <textarea
          id="message"
          value={message}
          onChange={(e) => setMessage(e.target.value)}
          rows={3}
          required
          maxLength={140} // Example limit
          className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
        />
         <p className="text-xs text-gray-500 mt-1">{message.length}/140 characters</p>
      </div>

      <div>
        <label htmlFor="scheduledAt" className="block text-sm font-medium text-gray-700 mb-1">
          Send At
        </label>
        <DatePicker
          selected={scheduledAt}
          onChange={(date: Date | null) => setScheduledAt(date)}
          showTimeSelect
          timeFormat="HH:mm"
          timeIntervals={15}
          dateFormat="MMMM d, yyyy h:mm aa"
          minDate={new Date()} // Prevent selecting past dates
          className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
          wrapperClassName="w-full"
        />
      </div>

      <button
        type="submit"
        disabled={isLoading}
        className="w-full px-4 py-2 bg-indigo-600 text-white font-semibold rounded-md shadow hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed"
      >
        {isLoading ? 'Scheduling...' : 'Schedule Reminder'}
      </button>

      {statusMessage && (
        <p className={`mt-4 text-sm ${isError ? 'text-red-600' : 'text-green-600'}`}>
          {statusMessage}
        </p>
      )}
    </form>
  );
}

// src/app/page.tsx
import { getServerSession } from "next-auth/next"
import { authOptions } from "./api/auth/[...nextauth]/route" // We will create this file later
import SchedulerForm from "@/components/SchedulerForm";
import Link from "next/link";

export default async function HomePage() {
  const session = await getServerSession(authOptions);

  return (
    <main className="flex min-h-screen flex-col items-center justify-center p-6 bg-gray-100">
       <div className="w-full max-w-md">
        {session ? (
           <>
            <p className="text-right mb-4 text-sm text-gray-600">
              Signed in as {session.user?.email} | <Link href="/api/auth/signout" className="text-indigo-600 hover:underline">Sign out</Link>
            </p>
            <SchedulerForm />
           </>
        ) : (
          <div className="text-center p-6 bg-white rounded-lg shadow-md">
             <h1 className="text-2xl font-semibold text-gray-800 mb-4">Welcome!</h1>
            <p className="text-gray-600 mb-6">Please sign in to schedule SMS reminders.</p>
            <Link href="/api/auth/signin" passHref legacyBehavior>
                 <a className="px-6 py-2 bg-indigo-600 text-white font-semibold rounded-md shadow hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                    Sign In
                 </a>
            </Link>
          </div>
        )}
       </div>
    </main>
  );
}

// src/lib/validations.ts
import { z } from 'zod';

// E.164 regex (simplified, adjust for stricter validation if needed)
const phoneRegex = /^\+[1-9]\d{1,14}$/;

export const scheduleSchema = z.object({
  // Validate E.164 format
  phoneNumber: z.string().regex(phoneRegex, { message: ""Invalid phone number format. Use E.164 (e.g., +12065550100)."" }),
  message: z.string().min(1, { message: ""Message cannot be empty."" }).max(1600, { message: ""Message too long."" }), // SNS limit is higher, but often constrained by carrier/client
  scheduledAt: z.string().datetime({ message: ""Invalid date format. Use ISO 8601."" })
    .refine((date) => new Date(date) > new Date(), {
      message: ""Scheduled time must be in the future."",
    }),
});

export type ScheduleInput = z.infer<typeof scheduleSchema>;

// src/app/api/schedule/route.ts
import { NextResponse } from 'next/server';
import { getServerSession } from 'next-auth/next';
import { authOptions } from '@/app/api/auth/[...nextauth]/route'; // Adjust path if needed
import { ZodError } from 'zod';
import { scheduleSchema, ScheduleInput } from '@/lib/validations';
import { createEventBridgeSchedule } from '@/lib/aws/scheduler'; // We'll create this next
import { saveScheduleMetadata } from '@/lib/aws/dynamodb'; // We'll create this next
import { v4 as uuidv4 } from 'uuid'; // Import UUID generator

export async function POST(request: Request) {
  const session = await getServerSession(authOptions);

  // 1. Authentication Check
  if (!session || !session.user?.email) {
    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
  }
  const userEmail = session.user.email; // Get user identifier

  try {
    const body = await request.json();

    // 2. Input Validation
    const validatedData = scheduleSchema.parse(body);

    // Ensure scheduledAt is valid Date object before further processing
    const scheduledAtDate = new Date(validatedData.scheduledAt);
    if (isNaN(scheduledAtDate.getTime())) {
         throw new Error(""Invalid scheduled date provided."");
    }

    // 3. Create EventBridge Schedule
    // Generate a unique name. Using UUID ensures uniqueness and avoids length issues.
    // Prefixing helps identify schedules in the AWS console.
    // Note: EventBridge schedule names have a 64-character limit.
    const uniqueSuffix = uuidv4();
    const prefix = `sms-${userEmail.replace(/[^a-zA-Z0-9-]/g, '-').substring(0, 20)}`; // Sanitize and truncate email part
    let scheduleName = `${prefix}-${uniqueSuffix}`;
    scheduleName = scheduleName.substring(0, 64); // Enforce 64 char limit

    const scheduleResult = await createEventBridgeSchedule({
      name: scheduleName,
      scheduleAt: scheduledAtDate,
      phoneNumber: validatedData.phoneNumber,
      message: validatedData.message,
    });

    // 4. Store Metadata (Optional but Recommended)
    try {
       await saveScheduleMetadata({
          scheduleArn: scheduleResult.scheduleArn,
          userEmail: userEmail,
          phoneNumber: validatedData.phoneNumber,
          message: validatedData.message,
          scheduledAt: scheduledAtDate,
       });
    } catch (dbError: any) {
        console.warn(`DynamoDB write failed for schedule ${scheduleResult.scheduleArn}: ${dbError.message}. Continuing as schedule was created.`);
        // Decide if you want to attempt deleting the schedule here if DB write fails critically
        // await deleteEventBridgeSchedule(scheduleName); // Need to implement delete function
        // return NextResponse.json({ error: 'Failed to save schedule metadata' }, { status: 500 });
    }


    // 5. Return Success Response
    return NextResponse.json({
        message: 'SMS scheduled successfully!',
        scheduleId: scheduleName, // Or return scheduleArn
        scheduleArn: scheduleResult.scheduleArn
    }, { status: 201 }); // 201 Created

  } catch (error: any) {
    console.error(""API Error:"", error);

    // Handle Zod validation errors
    if (error instanceof ZodError) {
      return NextResponse.json(
        { error: 'Invalid input data.', details: error.errors },
        { status: 400 }
      );
    }

    // Handle AWS or other errors
    // Log error details for debugging
     console.error(""Detailed Error:"", error.message, error.stack);

     // Provide a generic error message to the client
    return NextResponse.json(
      { error: error.message || 'Failed to schedule SMS.' },
      { status: 500 } // Internal Server Error
    );
  }
}

// src/lib/aws/clients.ts
import { DynamoDBClient } from "@aws-sdk/client-dynamodb";
import { DynamoDBDocumentClient } from "@aws-sdk/lib-dynamodb";
import { SchedulerClient } from "@aws-sdk/client-scheduler";
// SNS Client isn't directly needed here as EventBridge invokes it,
// but you might need it for other operations (e.g., topic creation, direct publish)
// import { SNSClient } from "@aws-sdk/client-sns";

const region = process.env.AWS_REGION;
const accessKeyId = process.env.AWS_ACCESS_KEY_ID;
const secretAccessKey = process.env.AWS_SECRET_ACCESS_KEY;

if (!region) {
    // Region is generally required
    console.error("AWS_REGION environment variable is not set. SDK calls may fail.");
    // Optionally throw an error depending on your setup strategy
    // throw new Error("AWS_REGION environment variable is not set.");
}

if (!accessKeyId || !secretAccessKey) {
    // In production, rely on IAM roles or other secure credential methods (e.g., Vercel env vars, EC2 instance profile)
    // The SDK will attempt the default credential chain if keys are not explicitly provided.
    if (process.env.NODE_ENV !== 'production') {
       console.warn("AWS Access Key ID or Secret Access Key not explicitly configured via environment variables. SDK will attempt default credential chain (e.g., ~/.aws/credentials, IAM role). Ensure credentials are available.");
    } else {
        // In production, it's expected that credentials come from the environment (IAM role, etc.)
        console.log("AWS credentials not found in environment variables. Assuming IAM role or other secure mechanism provides credentials.");
    }
}

const credentials = (accessKeyId && secretAccessKey)
    ? { accessKeyId: accessKeyId, secretAccessKey: secretAccessKey }
    : undefined; // Let SDK use default chain if keys aren't provided

// DynamoDB Client
const ddbClient = new DynamoDBClient({
    region,
    credentials,
});
const ddbDocClient = DynamoDBDocumentClient.from(ddbClient);

// EventBridge Scheduler Client
const schedulerClient = new SchedulerClient({
    region,
    credentials,
});

// Export initialized clients
export { ddbDocClient, schedulerClient };

// Helper function to get required environment variables, throwing if missing
export function getEnvVariable(key: string): string {
  const value = process.env[key];
  if (!value) {
    throw new Error(`Required environment variable ${key} is not set.`);
  }
  return value;
}

// Policy: NextJsBackendPermissions
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "AllowCreateEventBridgeSchedules",
            "Effect": "Allow",
            "Action": [
                "scheduler:CreateSchedule",
                "scheduler:GetSchedule" // Optional: useful for checking existence/status
                // "scheduler:DeleteSchedule" // Add if you implement cancellation
            ],
            "Resource": [
                "arn:aws:scheduler:YOUR_REGION:YOUR_AWS_ACCOUNT_ID:schedule/default/*", // Scope down if possible (e.g., using your prefix 'sms-*')
                "arn:aws:scheduler:YOUR_REGION:YOUR_AWS_ACCOUNT_ID:schedule/YOUR_SCHEDULE_GROUP_NAME/*" // If using schedule groups
            ]
        },
        {
            "Sid": "AllowPassRoleToEventBridgeScheduler",
            "Effect": "Allow",
            "Action": "iam:PassRole",
            "Resource": "arn:aws:iam::YOUR_AWS_ACCOUNT_ID:role/YourSchedulerExecutionRoleName", // MUST match the ARN used for EVENTBRIDGE_SCHEDULER_ROLE_ARN env var
            "Condition": {
                "StringEquals": {
                    "iam:PassedToService": "scheduler.amazonaws.com"
                }
            }
        },
        {
            "Sid": "AllowWriteToDynamoDB",
            "Effect": "Allow",
            "Action": [
                "dynamodb:PutItem",
                "dynamodb:UpdateItem" // If you implement updates
                // "dynamodb:Query", // Add if you implement listing schedules
                // "dynamodb:DeleteItem" // Add if needed
            ],
            "Resource": "arn:aws:dynamodb:YOUR_REGION:YOUR_AWS_ACCOUNT_ID:table/SmsSchedulesTableName" // MUST match the DYNAMODB_SCHEDULES_TABLE_NAME env var
        }
    ]
}