make a phone call ~ not really working

app/features/keypad/components/keypad.tsx

@@ -1,45 +1,51 @@
 import { type FunctionComponent, type PropsWithChildren, useRef } from "react";
-import { usePress } from "@react-aria/interactions";
+import { type PressHookProps, usePress } from "@react-aria/interactions";
+
 import { useLongPressDigit, usePressDigit } from "~/features/keypad/hooks/atoms";
 
-const Keypad: FunctionComponent<PropsWithChildren<{}>> = ({ children }) => {
+type Props = {
+	onDigitPressProps?: (digit: string) => PressHookProps;
+	onZeroPressProps?: PressHookProps;
+};
+
+const Keypad: FunctionComponent<PropsWithChildren<Props>> = ({ children, onDigitPressProps, onZeroPressProps }) => {
 	return (
 		<section>
 			<Row>
-				<Digit digit="1" />
-				<Digit digit="2">
+				<Digit onPressProps={onDigitPressProps} digit="1" />
+				<Digit onPressProps={onDigitPressProps} digit="2">
 					<DigitLetters>ABC</DigitLetters>
 				</Digit>
-				<Digit digit="3">
+				<Digit onPressProps={onDigitPressProps} digit="3">
 					<DigitLetters>DEF</DigitLetters>
 				</Digit>
 			</Row>
 			<Row>
-				<Digit digit="4">
+				<Digit onPressProps={onDigitPressProps} digit="4">
 					<DigitLetters>GHI</DigitLetters>
 				</Digit>
-				<Digit digit="5">
+				<Digit onPressProps={onDigitPressProps} digit="5">
 					<DigitLetters>JKL</DigitLetters>
 				</Digit>
-				<Digit digit="6">
+				<Digit onPressProps={onDigitPressProps} digit="6">
 					<DigitLetters>MNO</DigitLetters>
 				</Digit>
 			</Row>
 			<Row>
-				<Digit digit="7">
+				<Digit onPressProps={onDigitPressProps} digit="7">
 					<DigitLetters>PQRS</DigitLetters>
 				</Digit>
-				<Digit digit="8">
+				<Digit onPressProps={onDigitPressProps} digit="8">
 					<DigitLetters>TUV</DigitLetters>
 				</Digit>
-				<Digit digit="9">
+				<Digit onPressProps={onDigitPressProps} digit="9">
 					<DigitLetters>WXYZ</DigitLetters>
 				</Digit>
 			</Row>
 			<Row>
-				<Digit digit="*" />
-				<ZeroDigit />
-				<Digit digit="#" />
+				<Digit onPressProps={onDigitPressProps} digit="*" />
+				<ZeroDigit onPressProps={onZeroPressProps} />
+				<Digit onPressProps={onDigitPressProps} digit="#" />
 			</Row>
 			{typeof children !== "undefined" ? <Row>{children}</Row> : null}
 		</section>
@@ -58,27 +64,32 @@ const DigitLetters: FunctionComponent<PropsWithChildren<{}>> = ({ children }) =>
 
 type DigitProps = {
 	digit: string;
+	onPressProps: Props["onDigitPressProps"];
 };
 
-const Digit: FunctionComponent<PropsWithChildren<DigitProps>> = ({ children, digit }) => {
+const Digit: FunctionComponent<PropsWithChildren<DigitProps>> = (props) => {
 	const pressDigit = usePressDigit();
 	const onPressProps = {
 		onPress() {
 			// navigator.vibrate(1); // removed in webkit
-			pressDigit(digit);
+			pressDigit(props.digit);
 		},
 	};
-	const { pressProps } = usePress(onPressProps);
+	const { pressProps } = usePress(props.onPressProps?.(props.digit) ?? onPressProps);
 
 	return (
 		<div {...pressProps} className="text-3xl cursor-pointer select-none">
-			{digit}
-			{children}
+			{props.digit}
+			{props.children}
 		</div>
 	);
 };
 
-const ZeroDigit: FunctionComponent = () => {
+type ZeroDigitProps = {
+	onPressProps: Props["onZeroPressProps"];
+};
+
+const ZeroDigit: FunctionComponent<ZeroDigitProps> = (props) => {
 	const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 	const pressDigit = usePressDigit();
 	const longPressDigit = useLongPressDigit();
@@ -96,7 +107,7 @@ const ZeroDigit: FunctionComponent = () => {
 			}
 		},
 	};
-	const { pressProps } = usePress(onPressProps);
+	const { pressProps } = usePress(props.onPressProps ?? onPressProps);
 
 	return (
 		<div {...pressProps} className="text-3xl cursor-pointer select-none">

app/features/phone-calls/hooks/use-device.ts

@@ -0,0 +1,110 @@
+import { useEffect, useState } from "react";
+import { type TwilioError, Call, Device } from "@twilio/voice-sdk";
+import { useFetcher } from "@remix-run/react";
+
+import type { TwilioTokenLoaderData } from "~/features/phone-calls/loaders/twilio-token";
+
+export default function useDevice() {
+	const jwt = useDeviceToken();
+	const [device, setDevice] = useState<Device | null>(null);
+	const [isDeviceReady, setIsDeviceReady] = useState(() => device?.state === Device.State.Registered);
+
+	useEffect(() => {
+		jwt.refresh();
+	}, []);
+
+	useEffect(() => {
+		if (jwt.token && device?.state === Device.State.Registered && device?.token !== jwt.token) {
+			device.updateToken(jwt.token);
+		}
+	}, [jwt.token, device]);
+
+	useEffect(() => {
+		if (!jwt.token || device?.state === Device.State.Registered) {
+			return;
+		}
+
+		const newDevice = new Device(jwt.token, {
+			codecPreferences: [Call.Codec.Opus, Call.Codec.PCMU],
+			sounds: {
+				[Device.SoundName.Disconnect]: undefined, // TODO
+			},
+		});
+		newDevice.register(); // TODO throwing an error
+		setDevice(newDevice);
+	}, [device?.state, jwt.token, setDevice]);
+
+	useEffect(() => {
+		if (!device) {
+			return;
+		}
+
+		device.on("registered", onDeviceRegistered);
+		device.on("unregistered", onDeviceUnregistered);
+		device.on("error", onDeviceError);
+		device.on("incoming", onDeviceIncoming);
+		device.on("tokenWillExpire", onTokenWillExpire);
+
+		return () => {
+			if (typeof device.off !== "function") {
+				return;
+			}
+
+			device.off("registered", onDeviceRegistered);
+			device.off("unregistered", onDeviceUnregistered);
+			device.off("error", onDeviceError);
+			device.off("incoming", onDeviceIncoming);
+			device.off("tokenWillExpire", onTokenWillExpire);
+		};
+	}, [device]);
+
+	return {
+		device,
+		isDeviceReady,
+	};
+
+	function onTokenWillExpire() {
+		jwt.refresh();
+	}
+
+	function onDeviceRegistered() {
+		setIsDeviceReady(true);
+	}
+
+	function onDeviceUnregistered() {
+		setIsDeviceReady(false);
+	}
+
+	function onDeviceError(error: TwilioError.TwilioError, call?: Call) {
+		console.log("error", error);
+		// we might have to change this if we instantiate the device on every page to receive calls
+		setDevice(() => {
+			// hack to trigger the error boundary
+			throw error;
+		});
+	}
+
+	function onDeviceIncoming(call: Call) {
+		// TODO show alert to accept/reject the incoming call /!\ it should persist between screens /!\ prevent making a new call when there is a pending incoming call
+		console.log("call", call);
+		console.log("Incoming connection from " + call.parameters.From);
+		let archEnemyPhoneNumber = "+12093373517";
+
+		if (call.parameters.From === archEnemyPhoneNumber) {
+			call.reject();
+			console.log("It's your nemesis. Rejected call.");
+		} else {
+			// accept the incoming connection and start two-way audio
+			call.accept();
+		}
+	}
+}
+
+function useDeviceToken() {
+	const fetcher = useFetcher<TwilioTokenLoaderData>();
+
+	return {
+		token: fetcher.data,
+		refresh: () => fetcher.load("/outgoing-call/twilio-token"),
+	};
+}

app/features/phone-calls/hooks/use-make-call.ts

@@ -0,0 +1,100 @@
+import { useCallback, useState } from "react";
+import { useNavigate } from "@remix-run/react";
+import type { Call } from "@twilio/voice-sdk";
+
+import useDevice from "./use-device";
+
+type Params = {
+	recipient: string;
+	onHangUp?: () => void;
+};
+
+export default function useMakeCall({ recipient, onHangUp }: Params) {
+	const navigate = useNavigate();
+	const [outgoingConnection, setOutgoingConnection] = useState<Call | null>(null);
+	const [state, setState] = useState<State>("initial");
+	const { device, isDeviceReady } = useDevice();
+
+	const endCall = useCallback(
+		function endCall() {
+			outgoingConnection?.off("cancel", endCall);
+			outgoingConnection?.off("disconnect", endCall);
+			outgoingConnection?.disconnect();
+
+			setState("call_ending");
+			setTimeout(() => {
+				setState("call_ended");
+				setTimeout(() => navigate("/keypad"), 100);
+			}, 150);
+		},
+		[outgoingConnection, navigate],
+	);
+
+	const makeCall = useCallback(
+		async function makeCall() {
+			if (!device || !isDeviceReady) {
+				console.warn("device is not ready yet, can't make the call");
+				return;
+			}
+
+			if (state !== "initial") {
+				return;
+			}
+
+			if (device.isBusy) {
+				console.error("device is busy, this shouldn't happen");
+				return;
+			}
+
+			setState("calling");
+
+			const params = { To: recipient };
+			const outgoingConnection = await device.connect({ params });
+			setOutgoingConnection(outgoingConnection);
+
+			outgoingConnection.on("error", (error) => {
+				outgoingConnection.off("cancel", endCall);
+				outgoingConnection.off("disconnect", endCall);
+				setState(() => {
+					// hack to trigger the error boundary
+					throw error;
+				});
+			});
+			outgoingConnection.once("accept", (call: Call) => setState("call_in_progress"));
+			outgoingConnection.on("cancel", endCall);
+			outgoingConnection.on("disconnect", endCall);
+		},
+		[device, isDeviceReady, recipient, state],
+	);
+
+	const sendDigits = useCallback(
+		function sendDigits(digits: string) {
+			return outgoingConnection?.sendDigits(digits);
+		},
+		[outgoingConnection],
+	);
+
+	const hangUp = useCallback(
+		function hangUp() {
+			setState("call_ending");
+			outgoingConnection?.disconnect();
+			device?.disconnectAll();
+			device?.destroy();
+			onHangUp?.();
+			navigate("/keypad");
+			// TODO: outgoingConnection.off is not a function
+			outgoingConnection?.off("cancel", endCall);
+			outgoingConnection?.off("disconnect", endCall);
+		},
+		[device, endCall, onHangUp, outgoingConnection, navigate],
+	);
+
+	return {
+		makeCall,
+		sendDigits,
+		hangUp,
+		state,
+	};
+}
+
+type State = "initial" | "ready" | "calling" | "call_in_progress" | "call_ending" | "call_ended";

app/features/phone-calls/loaders/twilio-token.ts

@@ -0,0 +1,63 @@
+import { type LoaderFunction } from "@remix-run/node";
+import Twilio from "twilio";
+
+import { refreshSessionData, requireLoggedIn } from "~/utils/auth.server";
+import { encrypt } from "~/utils/encryption";
+import db from "~/utils/db.server";
+import { commitSession } from "~/utils/session.server";
+import getTwilioClient from "~/utils/twilio.server";
+
+export type TwilioTokenLoaderData = string;
+
+const loader: LoaderFunction = async ({ request }) => {
+	const { user, organization, twilioAccount } = await requireLoggedIn(request);
+	if (!twilioAccount || !twilioAccount.twimlAppSid) {
+		throw new Error("unreachable");
+	}
+
+	const twilioClient = getTwilioClient(twilioAccount);
+	let shouldRefreshSession = false;
+	let { apiKeySid, apiKeySecret } = twilioAccount;
+	if (apiKeySid && apiKeySecret) {
+		try {
+			await twilioClient.keys.get(apiKeySid).fetch();
+		} catch (error: any) {
+			if (error.code !== 20404) {
+				throw error;
+			}
+
+			apiKeySid = null;
+			apiKeySecret = null;
+		}
+	}
+	if (!apiKeySid || !apiKeySecret) {
+		shouldRefreshSession = true;
+		const apiKey = await twilioClient.newKeys.create({ friendlyName: "Shellphone" });
+		apiKeySid = apiKey.sid;
+		apiKeySecret = apiKey.secret;
+		await db.twilioAccount.update({
+			where: { subAccountSid: twilioAccount.subAccountSid },
+			data: { apiKeySid: apiKey.sid, apiKeySecret: encrypt(apiKey.secret) },
+		});
+	}
+
+	const accessToken = new Twilio.jwt.AccessToken(twilioAccount.subAccountSid, apiKeySid, apiKeySecret, {
+		identity: `${organization.id}__${user.id}`,
+		ttl: 3600,
+	});
+	const grant = new Twilio.jwt.AccessToken.VoiceGrant({
+		outgoingApplicationSid: twilioAccount.twimlAppSid,
+		incomingAllow: true,
+	});
+	accessToken.addGrant(grant);
+
+	const headers = new Headers({ "Content-Type": "text/plain" });
+	if (shouldRefreshSession) {
+		const { session } = await refreshSessionData(request);
+		headers.set("Set-Cookie", await commitSession(session));
+	}
+
+	return new Response(accessToken.toJwt(), { headers });
+};
+
+export default loader;

app/routes/__app/outgoing-call.$recipient.tsx

@@ -0,0 +1,80 @@
+import { useCallback } from "react";
+import type { MetaFunction } from "@remix-run/node";
+import { useParams } from "@remix-run/react";
+import { IoCall } from "react-icons/io5";
+
+import { getSeoMeta } from "~/utils/seo";
+import { usePhoneNumber, usePressDigit } from "~/features/keypad/hooks/atoms";
+import useDevice from "~/features/phone-calls/hooks/use-device";
+import useMakeCall from "~/features/phone-calls/hooks/use-make-call";
+import Keypad from "~/features/keypad/components/keypad";
+
+export const meta: MetaFunction = ({ params }) => {
+	const recipient = decodeURIComponent(params.recipient ?? "");
+
+	return {
+		...getSeoMeta({
+			title: `Calling ${recipient}`,
+		}),
+	};
+};
+
+export default function OutgoingCallPage() {
+	const params = useParams<{ recipient: string }>();
+	const recipient = decodeURIComponent(params.recipient ?? "");
+	const [phoneNumber, setPhoneNumber] = usePhoneNumber();
+	const onHangUp = useCallback(() => setPhoneNumber(""), [setPhoneNumber]);
+	const call = useMakeCall({ recipient, onHangUp });
+	const { isDeviceReady } = useDevice();
+	const pressDigit = usePressDigit();
+	const onDigitPressProps = useCallback(
+		(digit: string) => ({
+			onPress() {
+				pressDigit(digit);
+
+				call.sendDigits(digit);
+			},
+		}),
+		[call, pressDigit],
+	);
+
+	return (
+		<div className="w-96 h-full flex flex-col justify-around py-5 mx-auto text-center text-black bg-white">
+			<div className="h-16 text-3xl text-gray-700">
+				<span>{recipient}</span>
+			</div>
+
+			<div className="mb-4 text-gray-600">
+				<div className="h-8 text-2xl">{phoneNumber}</div>
+				<div className="h-8 text-lg">{translateState(call.state)}</div>
+			</div>
+
+			<Keypad onDigitPressProps={onDigitPressProps} onZeroPressProps={onDigitPressProps("0")}>
+				<button
+					onClick={call.hangUp}
+					className="cursor-pointer select-none col-start-2 h-12 w-12 flex justify-center items-center mx-auto bg-red-800 rounded-full"
+				>
+					<IoCall className="w-6 h-6 text-white" />
+				</button>
+			</Keypad>
+		</div>
+	);
+
+	function translateState(state: typeof call.state) {
+		switch (state) {
+			case "initial":
+			case "ready":
+				return "Connecting...";
+			case "calling":
+				return "Calling...";
+			case "call_in_progress":
+				return "In call"; // TODO display time elapsed
+			case "call_ending":
+				return "Call ending...";
+			case "call_ended":
+				return "Call ended";
+		}
+	}
+}
+
+export const handle = { hideFooter: true };

app/routes/__app/outgoing-call.twilio-token.ts

@@ -0,0 +1,3 @@
+import twilioTokenLoader from "~/features/phone-calls/loaders/twilio-token";
+
+export const loader = twilioTokenLoader;

app/routes/twilio.authorize.ts

@@ -1,10 +1,8 @@
 import { type LoaderFunction, redirect } from "@remix-run/node";
-import twilio from "twilio";
 
 import { refreshSessionData, requireLoggedIn } from "~/utils/auth.server";
 import { commitSession } from "~/utils/session.server";
 import db from "~/utils/db.server";
-import serverConfig from "~/config/config.server";
 import getTwilioClient from "~/utils/twilio.server";
 import fetchPhoneCallsQueue from "~/queues/fetch-phone-calls.server";
 import fetchMessagesQueue from "~/queues/fetch-messages.server";
@@ -18,29 +16,27 @@ export const loader: LoaderFunction = async ({ request }) => {
 		throw new Error("unreachable");
 	}
 
-	let twilioClient = twilio(twilioSubAccountSid, serverConfig.twilio.authToken);
+	let twilioClient = getTwilioClient({ accountSid: twilioSubAccountSid, subAccountSid: twilioSubAccountSid });
 	const twilioSubAccount = await twilioClient.api.accounts(twilioSubAccountSid).fetch();
 	const twilioMainAccountSid = twilioSubAccount.ownerAccountSid;
 	const twilioMainAccount = await twilioClient.api.accounts(twilioMainAccountSid).fetch();
 	console.log("twilioSubAccount", twilioSubAccount);
 	console.log("twilioAccount", twilioMainAccount);
+	const data = {
+		subAccountSid: twilioSubAccount.sid,
+		subAccountAuthToken: encrypt(twilioSubAccount.authToken),
+		accountSid: twilioMainAccount.sid,
+	};
+
 	const twilioAccount = await db.twilioAccount.upsert({
 		where: { organizationId: organization.id },
 		create: {
 			organization: {
 				connect: { id: organization.id },
 			},
-			subAccountSid: twilioSubAccount.sid,
-			subAccountAuthToken: encrypt(twilioSubAccount.authToken),
-			accountSid: twilioMainAccount.sid,
-			accountAuthToken: encrypt(twilioMainAccount.authToken),
-		},
-		update: {
-			subAccountSid: twilioSubAccount.sid,
-			subAccountAuthToken: encrypt(twilioSubAccount.authToken),
-			accountSid: twilioMainAccount.sid,
-			accountAuthToken: encrypt(twilioMainAccount.authToken),
+			...data,
 		},
+		update: data,
 	});
 
 	twilioClient = getTwilioClient(twilioAccount);

app/routes/webhooks/call.ts

@@ -0,0 +1,136 @@
+import { type ActionFunction } from "@remix-run/node";
+import { type CallInstance } from "twilio/lib/rest/api/v2010/account/call";
+import { badRequest, serverError } from "remix-utils";
+import { Direction, Prisma, SubscriptionStatus } from "@prisma/client";
+
+import logger from "~/utils/logger.server";
+import db from "~/utils/db.server";
+import twilio from "twilio";
+import { voiceUrl, translateCallStatus } from "~/utils/twilio.server";
+import { decrypt } from "~/utils/encryption";
+
+export const action: ActionFunction = async ({ request }) => {
+	const twilioSignature = request.headers.get("X-Twilio-Signature") || request.headers.get("x-twilio-signature");
+	if (!twilioSignature || Array.isArray(twilioSignature)) {
+		return badRequest("Invalid header X-Twilio-Signature");
+	}
+
+	const body: Body = await request.json();
+	const isOutgoingCall = body.From.startsWith("client:");
+	if (isOutgoingCall) {
+		const recipient = body.To;
+		const organizationId = body.From.slice("client:".length).split("__")[0];
+
+		try {
+			const phoneNumber = await db.phoneNumber.findUnique({
+				where: { organizationId_isCurrent: { organizationId, isCurrent: true } },
+				include: {
+					organization: {
+						include: {
+							subscriptions: {
+								where: {
+									OR: [
+										{ status: { not: SubscriptionStatus.deleted } },
+										{
+											status: SubscriptionStatus.deleted,
+											cancellationEffectiveDate: { gt: new Date() },
+										},
+									],
+								},
+								orderBy: { lastEventTime: Prisma.SortOrder.desc },
+							},
+							twilioAccount: true,
+						},
+					},
+				},
+			});
+
+			if (phoneNumber?.organization.subscriptions.length === 0) {
+				// decline the outgoing call because
+				// the organization is on the free plan
+				return new Response(null, { status: 402 });
+			}
+
+			const encryptedAuthToken = phoneNumber?.organization.twilioAccount?.subAccountAuthToken;
+			const authToken = encryptedAuthToken ? decrypt(encryptedAuthToken) : "";
+			if (
+				!phoneNumber ||
+				!encryptedAuthToken ||
+				!twilio.validateRequest(authToken, twilioSignature, voiceUrl, body)
+			) {
+				return badRequest("Invalid webhook");
+			}
+
+			await db.phoneCall.create({
+				data: {
+					id: body.CallSid,
+					recipient: body.To,
+					from: phoneNumber.number,
+					to: body.To,
+					status: translateCallStatus(body.CallStatus),
+					direction: Direction.Outbound,
+					duration: "0",
+					phoneNumberId: phoneNumber.id,
+				},
+			});
+
+			const voiceResponse = new twilio.twiml.VoiceResponse();
+			const dial = voiceResponse.dial({
+				answerOnBridge: true,
+				callerId: phoneNumber!.number,
+			});
+			dial.number(recipient);
+			console.log("twiml voiceResponse", voiceResponse.toString());
+
+			return new Response(voiceResponse.toString(), { headers: { "Content-Type": "text/xml" } });
+		} catch (error: any) {
+			logger.error(error);
+
+			return serverError(error.message);
+		}
+	}
+};
+
+type OutgoingCallBody = {
+	AccountSid: string;
+	ApiVersion: string;
+	ApplicationSid: string;
+	CallSid: string;
+	CallStatus: CallInstance["status"];
+	Called: string;
+	Caller: string;
+	Direction: `outbound${string}`;
+	From: string;
+	To: string;
+};
+
+type IncomingCallBody = {
+	AccountSid: string;
+	ApiVersion: string;
+	ApplicationSid: string;
+	CallSid: string;
+	CallStatus: CallInstance["status"];
+	Called: string;
+	CalledCity: string;
+	CalledCountry: string;
+	CalledState: string;
+	CalledZip: string;
+	Caller: string;
+	CallerCity: string;
+	CallerCountry: string;
+	CallerState: string;
+	CallerZip: string;
+	Direction: "inbound";
+	From: string;
+	FromCity: string;
+	FromCountry: string;
+	FromState: string;
+	FromZip: string;
+	To: string;
+	ToCity: string;
+	ToCountry: string;
+	ToState: string;
+	ToZip: string;
+};
+
+type Body = OutgoingCallBody | IncomingCallBody;

app/routes/webhooks/message.ts

@@ -57,7 +57,7 @@ export const action: ActionFunction = async ({ request }) => {
 			// if multiple organizations have the same number
 			// find the organization currently using that phone number
 			// maybe we shouldn't let that happen by restricting a phone number to one org?
-			const encryptedAuthToken = phoneNumber.organization.twilioAccount?.accountAuthToken;
+			const encryptedAuthToken = phoneNumber.organization.twilioAccount?.subAccountAuthToken;
 			const authToken = encryptedAuthToken ? decrypt(encryptedAuthToken) : "";
 			return twilio.validateRequest(authToken, twilioSignature, smsUrl, body);
 		});

app/utils/auth.server.ts

@@ -11,7 +11,7 @@ import { commitSession, destroySession, getSession } from "./session.server";
 
 type SessionTwilioAccount = Pick<
 	TwilioAccount,
-	"accountSid" | "accountAuthToken" | "subAccountSid" | "subAccountAuthToken" | "twimlAppSid"
+	"accountSid" | "subAccountSid" | "subAccountAuthToken" | "apiKeySid" | "apiKeySecret" | "twimlAppSid"
 >;
 type SessionOrganization = Pick<Organization, "id"> & { role: MembershipRole };
 type SessionPhoneNumber = Pick<PhoneNumber, "id" | "number">;
@@ -106,7 +106,6 @@ export async function authenticate({
 		headers: request.headers,
 	});
 	const sessionData = await authenticator.authenticate("email-password", signInRequest, { failureRedirect });
-	console.log("sessionKey", authenticator.sessionKey);
 	const session = await getSession(request);
 	session.set(authenticator.sessionKey, sessionData);
 	const redirectTo = successRedirect ?? "/messages";
@@ -181,9 +180,10 @@ async function buildSessionData(id: string): Promise<SessionData> {
 							twilioAccount: {
 								select: {
 									accountSid: true,
-									accountAuthToken: true,
 									subAccountSid: true,
 									subAccountAuthToken: true,
+									apiKeySid: true,
+									apiKeySecret: true,
 									twimlAppSid: true,
 								},
 							},

app/utils/twilio.server.ts

@@ -15,7 +15,7 @@ export default function getTwilioClient({
 		throw new Error("unreachable");
 	}
 
-	return twilio(subAccountSid, serverConfig.twilio.authToken, {
+	return twilio(subAccountSid, subAccountAuthToken ?? serverConfig.twilio.authToken, {
 		accountSid,
 	});
 }