replace twilio connect with account sid/auth token form

app/features/messages/actions/messages.$recipient.tsx

@@ -8,10 +8,15 @@ import getTwilioClient, { translateMessageDirection, translateMessageStatus } fr
 export type NewMessageActionData = {};
 
 const action: ActionFunction = async ({ params, request }) => {
-	const { phoneNumber, twilioAccount } = await requireLoggedIn(request);
+	const { phoneNumber, twilio } = await requireLoggedIn(request);
+	if (!twilio) {
+		throw new Error("unreachable");
+	}
+	const twilioAccount = await db.twilioAccount.findUnique({ where: { accountSid: twilio.accountSid } });
 	if (!twilioAccount) {
 		throw new Error("unreachable");
 	}
+
 	const recipient = decodeURIComponent(params.recipient ?? "");
 	const formData = Object.fromEntries(await request.formData());
 	const twilioClient = getTwilioClient(twilioAccount);

app/features/messages/components/conversation.tsx

@@ -6,7 +6,7 @@ import { Direction } from "@prisma/client";
 
 import NewMessageArea from "./new-message-area";
 import { formatDate, formatTime } from "~/features/core/helpers/date-formatter";
-import { type ConversationLoaderData } from "~/routes/__app/messages.$recipient";
+import { type ConversationLoaderData } from "~/features/messages/loaders/messages.$recipient";
 import useSession from "~/features/core/hooks/use-session";
 
 export default function Conversation() {
@@ -24,6 +24,7 @@ export default function Conversation() {
 			phoneNumberId: phoneNumber!.id,
 			from: phoneNumber!.number,
 			to: recipient,
+			recipient,
 			sentAt: new Date(),
 			direction: Direction.Outbound,
 

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

@@ -10,7 +10,12 @@ import getTwilioClient from "~/utils/twilio.server";
 export type TwilioTokenLoaderData = string;
 
 const loader: LoaderFunction = async ({ request }) => {
-	const { user, organization, twilioAccount } = await requireLoggedIn(request);
+	const { user, organization, twilio } = await requireLoggedIn(request);
+	if (!twilio) {
+		throw new Error("unreachable");
+	}
+
+	const twilioAccount = await db.twilioAccount.findUnique({ where: { accountSid: twilio.accountSid } });
 	if (!twilioAccount || !twilioAccount.twimlAppSid) {
 		throw new Error("unreachable");
 	}
@@ -36,12 +41,12 @@ const loader: LoaderFunction = async ({ request }) => {
 		apiKeySid = apiKey.sid;
 		apiKeySecret = apiKey.secret;
 		await db.twilioAccount.update({
-			where: { subAccountSid: twilioAccount.subAccountSid },
+			where: { accountSid: twilioAccount.accountSid },
 			data: { apiKeySid: apiKey.sid, apiKeySecret: encrypt(apiKey.secret) },
 		});
 	}
 
-	const accessToken = new Twilio.jwt.AccessToken(twilioAccount.subAccountSid, apiKeySid, apiKeySecret, {
+	const accessToken = new Twilio.jwt.AccessToken(twilioAccount.accountSid, apiKeySid, apiKeySecret, {
 		identity: `${organization.id}__${user.id}`,
 		ttl: 3600,
 	});

app/features/settings/actions/account.ts

@@ -13,7 +13,7 @@ import deleteUserQueue from "~/queues/delete-user-data.server";
 const action: ActionFunction = async ({ request }) => {
 	const formData = Object.fromEntries(await request.formData());
 	if (!formData._action) {
-		const errorMessage = "POST /settings without any _action";
+		const errorMessage = "POST /settings/phone without any _action";
 		logger.error(errorMessage);
 		return badRequest({ errorMessage });
 	}
@@ -26,7 +26,7 @@ const action: ActionFunction = async ({ request }) => {
 		case "updateUser":
 			return updateUser(request, formData);
 		default:
-			const errorMessage = `POST /settings with an invalid _action=${formData._action}`;
+			const errorMessage = `POST /settings/phone with an invalid _action=${formData._action}`;
 			logger.error(errorMessage);
 			return badRequest({ errorMessage });
 	}

app/features/settings/actions/phone.ts

@@ -1,23 +1,50 @@
-import { type ActionFunction, json } from "@remix-run/node";
+import { type ActionFunction, type Session, json } from "@remix-run/node";
 import { badRequest } from "remix-utils";
 import { z } from "zod";
+import type { Prisma } from "@prisma/client";
 
 import db from "~/utils/db.server";
-import { type FormError, validate } from "~/utils/validation.server";
+import { type FormActionData, validate } from "~/utils/validation.server";
 import { refreshSessionData, requireLoggedIn } from "~/utils/auth.server";
 import { commitSession } from "~/utils/session.server";
 import setTwilioWebhooksQueue from "~/queues/set-twilio-webhooks.server";
-
+import logger from "~/utils/logger.server";
-type SetPhoneNumberFailureActionData = { errors: FormError<typeof bodySchema>; submitted?: never };
+import { encrypt } from "~/utils/encryption";
-type SetPhoneNumberSuccessfulActionData = { errors?: never; submitted: true };
+import getTwilioClient from "~/utils/twilio.server";
-export type SetPhoneNumberActionData = SetPhoneNumberFailureActionData | SetPhoneNumberSuccessfulActionData;
+import fetchPhoneCallsQueue from "~/queues/fetch-phone-calls.server";
+import fetchMessagesQueue from "~/queues/fetch-messages.server";
+import setTwilioApiKeyQueue from "~/queues/set-twilio-api-key.server";
 
 const action: ActionFunction = async ({ request }) => {
-	const { organization } = await requireLoggedIn(request);
 	const formData = Object.fromEntries(await request.formData());
-	const validation = validate(bodySchema, formData);
+	if (!formData._action) {
+		const errorMessage = "POST /settings/phone without any _action";
+		logger.error(errorMessage);
+		return badRequest({ errorMessage });
+	}
+
+	console.log("formData._action", formData._action);
+	switch (formData._action as Action) {
+		case "setPhoneNumber":
+			return setPhoneNumber(request, formData);
+		case "setTwilioCredentials":
+			return setTwilioCredentials(request, formData);
+		case "refreshPhoneNumbers":
+			return refreshPhoneNumbers(request);
+		default:
+			const errorMessage = `POST /settings/phone with an invalid _action=${formData._action}`;
+			logger.error(errorMessage);
+			return badRequest({ errorMessage });
+	}
+};
+
+export type SetPhoneNumberActionData = FormActionData<typeof validations, "setPhoneNumber">;
+
+async function setPhoneNumber(request: Request, formData: unknown) {
+	const { organization } = await requireLoggedIn(request);
+	const validation = validate(validations.setPhoneNumber, formData);
 	if (validation.errors) {
-		return badRequest<SetPhoneNumberActionData>({ errors: validation.errors });
+		return badRequest<SetPhoneNumberActionData>({ setPhoneNumber: { errors: validation.errors } });
 	}
 
 	try {
@@ -43,19 +70,181 @@ const action: ActionFunction = async ({ request }) => {
 	const { session } = await refreshSessionData(request);
 
 	return json<SetPhoneNumberActionData>(
-		{ submitted: true },
+		{ setPhoneNumber: { submitted: true } },
 		{
 			headers: {
 				"Set-Cookie": await commitSession(session),
 			},
 		},
 	);
-};
+}
+
+export type SetTwilioCredentialsActionData = FormActionData<typeof validations, "setTwilioCredentials">;
+
+async function setTwilioCredentials(request: Request, formData: unknown) {
+	const { organization, twilio } = await requireLoggedIn(request);
+	const validation = validate(validations.setTwilioCredentials, formData);
+	if (validation.errors) {
+		return badRequest<SetTwilioCredentialsActionData>({ setTwilioCredentials: { errors: validation.errors } });
+	}
+
+	const { twilioAccountSid, twilioAuthToken } = validation.data;
+	const authToken = encrypt(twilioAuthToken);
+	const twilioClient = getTwilioClient({ accountSid: twilioAccountSid, authToken });
+	try {
+		await twilioClient.api.accounts(twilioAccountSid).fetch();
+	} catch (error: any) {
+		logger.error(error);
+
+		if (error.status !== 401) {
+			throw error;
+		}
+
+		let session: Session | undefined;
+		if (twilio) {
+			await db.twilioAccount.delete({ where: { accountSid: twilio?.accountSid } });
+			session = (await refreshSessionData(request)).session;
+		}
+
+		return json<SetTwilioCredentialsActionData>(
+			{
+				setTwilioCredentials: {
+					errors: { general: "Invalid Account SID or Auth Token" },
+				},
+			},
+			{
+				headers: session
+					? {
+							"Set-Cookie": await commitSession(session),
+					  }
+					: {},
+			},
+		);
+	}
+
+	const data: Pick<Prisma.TwilioAccountUpsertArgs["create"], "accountSid" | "authToken"> = {
+		accountSid: twilioAccountSid,
+		authToken,
+	};
+	const [phoneNumbers] = await Promise.all([
+		twilioClient.incomingPhoneNumbers.list(),
+		setTwilioApiKeyQueue.add(`set twilio api key for accountSid=${twilioAccountSid}`, {
+			accountSid: twilioAccountSid,
+		}),
+		db.twilioAccount.upsert({
+			where: { organizationId: organization.id },
+			create: {
+				organization: {
+					connect: { id: organization.id },
+				},
+				...data,
+			},
+			update: data,
+		}),
+	]);
+
+	await Promise.all(
+		phoneNumbers.map(async (phoneNumber) => {
+			const phoneNumberId = phoneNumber.sid;
+			try {
+				await db.phoneNumber.create({
+					data: {
+						id: phoneNumberId,
+						organizationId: organization.id,
+						number: phoneNumber.phoneNumber,
+						isCurrent: false,
+						isFetchingCalls: true,
+						isFetchingMessages: true,
+					},
+				});
+
+				await Promise.all([
+					fetchPhoneCallsQueue.add(`fetch calls of id=${phoneNumberId}`, {
+						phoneNumberId,
+					}),
+					fetchMessagesQueue.add(`fetch messages of id=${phoneNumberId}`, {
+						phoneNumberId,
+					}),
+				]);
+			} catch (error: any) {
+				if (error.code !== "P2002") {
+					// if it's not a duplicate, it's a real error we need to handle
+					throw error;
+				}
+			}
+		}),
+	);
+
+	const { session } = await refreshSessionData(request);
+	return json<SetTwilioCredentialsActionData>(
+		{ setTwilioCredentials: { submitted: true } },
+		{
+			headers: {
+				"Set-Cookie": await commitSession(session),
+			},
+		},
+	);
+}
+
+async function refreshPhoneNumbers(request: Request) {
+	const { organization, twilio } = await requireLoggedIn(request);
+	if (!twilio) {
+		throw new Error("unreachable");
+	}
+	const twilioAccount = await db.twilioAccount.findUnique({ where: { accountSid: twilio.accountSid } });
+	if (!twilioAccount) {
+		throw new Error("unreachable");
+	}
+
+	const twilioClient = getTwilioClient(twilioAccount);
+	const phoneNumbers = await twilioClient.incomingPhoneNumbers.list();
+	await Promise.all(
+		phoneNumbers.map(async (phoneNumber) => {
+			const phoneNumberId = phoneNumber.sid;
+			try {
+				await db.phoneNumber.create({
+					data: {
+						id: phoneNumberId,
+						organizationId: organization.id,
+						number: phoneNumber.phoneNumber,
+						isCurrent: false,
+						isFetchingCalls: true,
+						isFetchingMessages: true,
+					},
+				});
+
+				await Promise.all([
+					fetchPhoneCallsQueue.add(`fetch calls of id=${phoneNumberId}`, {
+						phoneNumberId,
+					}),
+					fetchMessagesQueue.add(`fetch messages of id=${phoneNumberId}`, {
+						phoneNumberId,
+					}),
+				]);
+			} catch (error: any) {
+				if (error.code !== "P2002") {
+					// if it's not a duplicate, it's a real error we need to handle
+					throw error;
+				}
+			}
+		}),
+	);
+
+	return null;
+}
 
 export default action;
 
-const bodySchema = z.object({
+type Action = "setPhoneNumber" | "setTwilioCredentials" | "refreshPhoneNumbers";
-	phoneNumberSid: z
+
-		.string()
+const validations = {
-		.refine((phoneNumberSid) => phoneNumberSid.startsWith("PN"), "Select a valid phone number"),
+	setPhoneNumber: z.object({
-});
+		phoneNumberSid: z
+			.string()
+			.refine((phoneNumberSid) => phoneNumberSid.startsWith("PN"), "Select a valid phone number"),
+	}),
+	setTwilioCredentials: z.object({
+		twilioAccountSid: z.string(),
+		twilioAuthToken: z.string(),
+	}),
+} as const;

app/features/settings/components/phone/phone-number-form.tsx

@@ -1,4 +1,5 @@
-import { Form, useActionData, useCatch, useLoaderData, useTransition } from "@remix-run/react";
+import { Form, useActionData, useCatch, useFetcher, useLoaderData, useTransition } from "@remix-run/react";
+import { IoReloadOutline } from "react-icons/io5";
 
 import Button from "../button";
 import SettingsSection from "../settings-section";
@@ -6,11 +7,13 @@ import Alert from "~/features/core/components/alert";
 import useSession from "~/features/core/hooks/use-session";
 import type { PhoneSettingsLoaderData } from "~/features/settings/loaders/phone";
 import type { SetPhoneNumberActionData } from "~/features/settings/actions/phone";
+import clsx from "clsx";
 
 export default function PhoneNumberForm() {
+	const { twilio } = useSession();
+	const fetcher = useFetcher();
 	const transition = useTransition();
-	const actionData = useActionData<SetPhoneNumberActionData>();
+	const actionData = useActionData<SetPhoneNumberActionData>()?.setPhoneNumber;
-	const { twilioAccount } = useSession();
 	const availablePhoneNumbers = useLoaderData<PhoneSettingsLoaderData>().phoneNumbers;
 
 	const isSubmitting = transition.state === "submitting";
@@ -19,54 +22,72 @@ export default function PhoneNumberForm() {
 	const topErrorMessage = errors?.general ?? errors?.phoneNumberSid;
 	const isError = typeof topErrorMessage !== "undefined";
 	const currentPhoneNumber = availablePhoneNumbers.find((phoneNumber) => phoneNumber.isCurrent === true);
-	const hasFilledTwilioCredentials = twilioAccount !== null;
+	const hasFilledTwilioCredentials = twilio !== null;
 
 	if (!hasFilledTwilioCredentials) {
 		return null;
 	}
 
 	return (
-		<Form method="post" className="flex flex-col gap-6">
+		<section className="relative">
-			<SettingsSection
+			<button
-				className="relative"
+				className={clsx("absolute top-2 right-2 z-10", { "animate-spin": fetcher.submission })}
-				footer={
+				onClick={() => fetcher.submit({ _action: "refreshPhoneNumbers" }, { method: "post" })}
-					<div className="px-4 py-3 bg-gray-50 text-right text-sm font-medium sm:px-6">
+				disabled={!!fetcher.submission}
-						<Button variant="default" type="submit" isDisabled={isSubmitting}>
+				title="Refresh the list of phone numbers from Twilio"
-							Save
+				aria-label="Refresh the list of phone numbers from Twilio"
-						</Button>
-					</div>
-				}
 			>
-				{isError ? (
+				<IoReloadOutline className="w-5 h-5 text-primary-700" aria-hidden="true" />
-					<div className="mb-8">
+			</button>
-						<Alert title="Oops, there was an issue" message={topErrorMessage} variant="error" />
-					</div>
-				) : null}
 
-				{isSuccess ? (
+			<Form method="post" className="flex flex-col gap-6">
-					<div className="mb-8">
+				<SettingsSection
-						<Alert title="Saved successfully" message="Your changes have been saved." variant="success" />
+					className="relative"
-					</div>
+					footer={
-				) : null}
+						<div className="px-4 py-3 bg-gray-50 text-right text-sm font-medium sm:px-6">
-
+							<Button variant="default" type="submit" isDisabled={isSubmitting}>
-				<label htmlFor="phoneNumberSid" className="block text-sm font-medium text-gray-700">
+								Save
-					Phone number
+							</Button>
-				</label>
+						</div>
-				<select
+					}
-					id="phoneNumberSid"
-					name="phoneNumberSid"
-					className="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm rounded-md"
-					defaultValue={currentPhoneNumber?.id}
 				>
-					<option value="none" />
+					{isError ? (
-					{availablePhoneNumbers.map(({ id, number }) => (
+						<div className="mb-8">
-						<option value={id} key={id}>
+							<Alert title="Oops, there was an issue" message={topErrorMessage} variant="error" />
-							{number}
+						</div>
-						</option>
+					) : null}
-					))}
+
-				</select>
+					{isSuccess ? (
-			</SettingsSection>
+						<div className="mb-8">
-		</Form>
+							<Alert
+								title="Saved successfully"
+								message="Your changes have been saved."
+								variant="success"
+							/>
+						</div>
+					) : null}
+
+					<label htmlFor="phoneNumberSid" className="block text-sm font-medium text-gray-700">
+						Phone number
+					</label>
+					<select
+						id="phoneNumberSid"
+						name="phoneNumberSid"
+						className="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm rounded-md"
+						defaultValue={currentPhoneNumber?.id}
+					>
+						<option value="none" />
+						{availablePhoneNumbers.map(({ id, number }) => (
+							<option value={id} key={id}>
+								{number}
+							</option>
+						))}
+					</select>
+
+					<input type="hidden" name="_action" value="setPhoneNumber" />
+				</SettingsSection>
+			</Form>
+		</section>
 	);
 }
 

app/features/settings/components/phone/twilio-connect.tsx

@@ -1,38 +1,82 @@
 import { useState } from "react";
+import { Form, useActionData, useLoaderData, useTransition } from "@remix-run/react";
 import { IoHelpCircle } from "react-icons/io5";
 
+import type { PhoneSettingsLoaderData } from "~/features/settings/loaders/phone";
+import type { SetTwilioCredentialsActionData } from "~/features/settings/actions/phone";
 import HelpModal from "./help-modal";
 import SettingsSection from "../settings-section";
 import useSession from "~/features/core/hooks/use-session";
+import Alert from "~/features/core/components/alert";
+import LabeledTextField from "~/features/core/components/labeled-text-field";
+import Button from "~/features/settings/components/button";
 
 export default function TwilioConnect() {
-	const { twilioAccount } = useSession();
+	const { twilio } = useSession();
 	const [isHelpModalOpen, setIsHelpModalOpen] = useState(false);
+	const transition = useTransition();
+	const actionData = useActionData<SetTwilioCredentialsActionData>()?.setTwilioCredentials;
+	const { accountSid, authToken } = useLoaderData<PhoneSettingsLoaderData>();
+
+	const topErrorMessage = actionData?.errors?.general;
+	const isError = typeof topErrorMessage !== "undefined";
+	const isCurrentFormTransition = transition.submission?.formData.get("_action") === "changePassword";
+	const isSubmitting = isCurrentFormTransition && transition.state === "submitting";
 
 	return (
 		<>
-			<SettingsSection className="flex flex-col relative">
+			<Form method="post">
-				<section>
+				<SettingsSection
+					className="flex flex-col relative"
+					footer={
+						<div className="px-4 py-3 bg-gray-50 text-right text-sm font-medium sm:px-6">
+							<Button tabIndex={3} variant="default" type="submit" isDisabled={isSubmitting}>
+								Save
+							</Button>
+						</div>
+					}
+				>
 					<button onClick={() => setIsHelpModalOpen(true)} className="absolute top-2 right-2">
 						<IoHelpCircle className="w-6 h-6 text-primary-700" />
 					</button>
 					<article className="mb-6">
-						Shellphone needs to connect to your Twilio account to securely use your phone numbers.
+						Shellphone needs some informations about your Twilio account to securely use your phone numbers.
 					</article>
 
-					{twilioAccount === null ? (
+					{twilio !== null ? (
-						<a
-							href="https://www.twilio.com/authorize/CN01675d385a9ee79e6aa58adf54abe3b3"
-							rel="noopener noreferrer"
-							className="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-white focus:outline-none focus:ring-2 focus:ring-offset-2 bg-primary-600 hover:bg-primary-700 focus:ring-primary-500"
-						>
-							Connect Twilio account
-						</a>
-					) : (
 						<p className="text-green-700">✓ Your Twilio account is connected to Shellphone.</p>
-					)}
+					) : null}
-				</section>
+
-			</SettingsSection>
+					{isError ? (
+						<div className="mb-8">
+							<Alert title="Oops, there was an issue" message={topErrorMessage} variant="error" />
+						</div>
+					) : null}
+
+					<LabeledTextField
+						name="twilioAccountSid"
+						label="Account SID"
+						type="text"
+						tabIndex={1}
+						error={actionData?.errors?.twilioAccountSid}
+						disabled={isSubmitting}
+						defaultValue={accountSid}
+					/>
+
+					<LabeledTextField
+						name="twilioAuthToken"
+						label="Auth Token"
+						type="password"
+						tabIndex={2}
+						error={actionData?.errors?.twilioAuthToken}
+						disabled={isSubmitting}
+						autoComplete="off"
+						defaultValue={authToken}
+					/>
+
+					<input type="hidden" name="_action" value="setTwilioCredentials" />
+				</SettingsSection>
+			</Form>
 
 			<HelpModal closeModal={() => setIsHelpModalOpen(false)} isHelpModalOpen={isHelpModalOpen} />
 		</>

app/features/settings/loaders/phone.ts

@@ -4,14 +4,17 @@ import { type PhoneNumber, Prisma } from "@prisma/client";
 import db from "~/utils/db.server";
 import { requireLoggedIn } from "~/utils/auth.server";
 import logger from "~/utils/logger.server";
+import { decrypt } from "~/utils/encryption";
 
 export type PhoneSettingsLoaderData = {
+	accountSid?: string;
+	authToken?: string;
 	phoneNumbers: Pick<PhoneNumber, "id" | "number" | "isCurrent">[];
 };
 
 const loader: LoaderFunction = async ({ request }) => {
-	const { organization, twilioAccount } = await requireLoggedIn(request);
+	const { organization, twilio } = await requireLoggedIn(request);
-	if (!twilioAccount) {
+	if (!twilio) {
 		logger.warn("Twilio account is not connected");
 		return json<PhoneSettingsLoaderData>({ phoneNumbers: [] });
 	}
@@ -22,6 +25,10 @@ const loader: LoaderFunction = async ({ request }) => {
 		orderBy: { id: Prisma.SortOrder.desc },
 	});
 
-	return json<PhoneSettingsLoaderData>({ phoneNumbers });
+	return json<PhoneSettingsLoaderData>({
+		accountSid: twilio.accountSid,
+		authToken: decrypt(twilio.authToken),
+		phoneNumbers,
+	});
 };
 export default loader;

app/queues/index.ts

@@ -4,6 +4,7 @@ import insertPhoneCallsQueue from "./insert-phone-calls.server";
 import fetchMessagesQueue from "./fetch-messages.server";
 import insertMessagesQueue from "./insert-messages.server";
 import setTwilioWebhooksQueue from "./set-twilio-webhooks.server";
+import setTwilioApiKeyQueue from "./set-twilio-api-key.server";
 
 export default [
 	deleteUserDataQueue,
@@ -12,4 +13,5 @@ export default [
 	fetchMessagesQueue,
 	insertMessagesQueue,
 	setTwilioWebhooksQueue,
+	setTwilioApiKeyQueue,
 ];

app/queues/set-twilio-api-key.server.ts

@@ -0,0 +1,36 @@
+import { Queue } from "~/utils/queue.server";
+import db from "~/utils/db.server";
+import getTwilioClient from "~/utils/twilio.server";
+import { encrypt } from "~/utils/encryption";
+
+type Payload = {
+	accountSid: string;
+};
+
+export default Queue<Payload>("set twilio api key", async ({ data }) => {
+	const accountSid = data.accountSid;
+	const twilioAccount = await db.twilioAccount.findUnique({ where: { accountSid } });
+	if (!twilioAccount) {
+		return;
+	}
+
+	const twilioClient = getTwilioClient(twilioAccount);
+	const friendlyName = "Shellphone API key";
+
+	await new Promise((resolve) => {
+		twilioClient.api.keys.each({ done: resolve }, (apiKey) => {
+			if (apiKey.friendlyName === friendlyName) {
+				apiKey.remove();
+			}
+		});
+	});
+
+	const apiKey = await twilioClient.newKeys.create({ friendlyName });
+	await db.twilioAccount.update({
+		where: { accountSid },
+		data: {
+			apiKeySid: apiKey.sid,
+			apiKeySecret: encrypt(apiKey.secret),
+		},
+	});
+});

app/queues/set-twilio-webhooks.server.ts

@@ -1,9 +1,10 @@
-import type twilio from "twilio";
+import twilio from "twilio";
 import type { ApplicationInstance } from "twilio/lib/rest/api/v2010/account/application";
 
 import { Queue } from "~/utils/queue.server";
 import db from "~/utils/db.server";
-import getTwilioClient, { getTwiMLName, smsUrl, voiceUrl } from "~/utils/twilio.server";
+import { getTwiMLName, smsUrl, voiceUrl } from "~/utils/twilio.server";
+import { decrypt } from "~/utils/encryption";
 
 type Payload = {
 	phoneNumberId: string;
@@ -18,7 +19,7 @@ export default Queue<Payload>("set twilio webhooks", async ({ data }) => {
 			organization: {
 				select: {
 					twilioAccount: {
-						select: { accountSid: true, subAccountSid: true, twimlAppSid: true },
+						select: { accountSid: true, twimlAppSid: true, authToken: true },
 					},
 				},
 			},
@@ -29,7 +30,8 @@ export default Queue<Payload>("set twilio webhooks", async ({ data }) => {
 	}
 
 	const twilioAccount = phoneNumber.organization.twilioAccount;
-	const twilioClient = getTwilioClient(twilioAccount);
+	const authToken = decrypt(twilioAccount.authToken);
+	const twilioClient = twilio(twilioAccount.accountSid, authToken);
 	const twimlApp = await getTwimlApplication(twilioClient, twilioAccount.twimlAppSid);
 	const twimlAppSid = twimlApp.sid;
 

app/routes/twilio.authorize.ts

@@ -1,82 +0,0 @@
-import { type LoaderFunction, redirect } from "@remix-run/node";
-
-import { refreshSessionData, requireLoggedIn } from "~/utils/auth.server";
-import { commitSession } from "~/utils/session.server";
-import db from "~/utils/db.server";
-import getTwilioClient from "~/utils/twilio.server";
-import fetchPhoneCallsQueue from "~/queues/fetch-phone-calls.server";
-import fetchMessagesQueue from "~/queues/fetch-messages.server";
-import { encrypt } from "~/utils/encryption";
-
-export const loader: LoaderFunction = async ({ request }) => {
-	const { organization } = await requireLoggedIn(request);
-	const url = new URL(request.url);
-	const twilioSubAccountSid = url.searchParams.get("AccountSid");
-	if (!twilioSubAccountSid) {
-		throw new Error("unreachable");
-	}
-
-	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 },
-			},
-			...data,
-		},
-		update: data,
-	});
-
-	twilioClient = getTwilioClient(twilioAccount);
-	const phoneNumbers = await twilioClient.incomingPhoneNumbers.list();
-	await Promise.all(
-		phoneNumbers.map(async (phoneNumber) => {
-			const phoneNumberId = phoneNumber.sid;
-			try {
-				await db.phoneNumber.create({
-					data: {
-						id: phoneNumberId,
-						organizationId: organization.id,
-						number: phoneNumber.phoneNumber,
-						isCurrent: false,
-						isFetchingCalls: true,
-						isFetchingMessages: true,
-					},
-				});
-
-				await Promise.all([
-					fetchPhoneCallsQueue.add(`fetch calls of id=${phoneNumberId}`, {
-						phoneNumberId,
-					}),
-					fetchMessagesQueue.add(`fetch messages of id=${phoneNumberId}`, {
-						phoneNumberId,
-					}),
-				]);
-			} catch (error: any) {
-				if (error.code !== "P2002") {
-					// if it's not a duplicate, it's a real error we need to handle
-					throw error;
-				}
-			}
-		}),
-	);
-
-	const { session } = await refreshSessionData(request);
-	return redirect("/settings/phone", {
-		headers: {
-			"Set-Cookie": await commitSession(session),
-		},
-	});
-};

app/routes/webhooks/call.ts

@@ -51,7 +51,7 @@ export const action: ActionFunction = async ({ request }) => {
 				return new Response(null, { status: 402 });
 			}
 
-			const encryptedAuthToken = phoneNumber?.organization.twilioAccount?.subAccountAuthToken;
+			const encryptedAuthToken = phoneNumber?.organization.twilioAccount?.authToken;
 			const authToken = encryptedAuthToken ? decrypt(encryptedAuthToken) : "";
 			if (
 				!phoneNumber ||

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?.subAccountAuthToken;
+			const encryptedAuthToken = phoneNumber.organization.twilioAccount?.authToken;
 			const authToken = encryptedAuthToken ? decrypt(encryptedAuthToken) : "";
 			return twilio.validateRequest(authToken, twilioSignature, smsUrl, body);
 		});

app/utils/auth.server.ts

@@ -9,10 +9,7 @@ import authenticator from "./authenticator.server";
 import { AuthenticationError, NotFoundError } from "./errors";
 import { commitSession, destroySession, getSession } from "./session.server";
 
-type SessionTwilioAccount = Pick<
+type SessionTwilioAccount = Pick<TwilioAccount, "accountSid" | "authToken">;
-	TwilioAccount,
-	"accountSid" | "subAccountSid" | "subAccountAuthToken" | "apiKeySid" | "apiKeySecret" | "twimlAppSid"
->;
 type SessionOrganization = Pick<Organization, "id"> & { role: MembershipRole; membershipId: string };
 type SessionPhoneNumber = Pick<PhoneNumber, "id" | "number">;
 export type SessionUser = Pick<User, "id" | "role" | "email" | "fullName">;
@@ -20,7 +17,7 @@ export type SessionData = {
 	user: SessionUser;
 	organization: SessionOrganization;
 	phoneNumber: SessionPhoneNumber | null;
-	twilioAccount: SessionTwilioAccount | null;
+	twilio: SessionTwilioAccount | null;
 };
 
 const SP = new SecurePassword();
@@ -62,6 +59,7 @@ export async function login({ form }: FormStrategyVerifyParams): Promise<Session
 	try {
 		return await buildSessionData(user.id);
 	} catch (error: any) {
+		logger.error(error);
 		if (error instanceof AuthenticationError) {
 			throw error;
 		}
@@ -178,14 +176,7 @@ async function buildSessionData(id: string): Promise<SessionData> {
 						select: {
 							id: true,
 							twilioAccount: {
-								select: {
+								select: { accountSid: true, authToken: true },
-									accountSid: true,
-									subAccountSid: true,
-									subAccountAuthToken: true,
-									apiKeySid: true,
-									apiKeySecret: true,
-									twimlAppSid: true,
-								},
 							},
 						},
 					},
@@ -214,6 +205,6 @@ async function buildSessionData(id: string): Promise<SessionData> {
 		user: rest,
 		organization,
 		phoneNumber,
-		twilioAccount,
+		twilio: twilioAccount,
 	};
 }

app/utils/twilio.server.ts

@@ -4,20 +4,17 @@ import type { CallInstance } from "twilio/lib/rest/api/v2010/account/call";
 import { type TwilioAccount, CallStatus, Direction, MessageStatus } from "@prisma/client";
 
 import serverConfig from "~/config/config.server";
+import { decrypt } from "~/utils/encryption";
 
 export default function getTwilioClient({
 	accountSid,
-	subAccountSid,
+	authToken,
-	subAccountAuthToken,
+}: Pick<TwilioAccount, "accountSid" | "authToken">): twilio.Twilio {
-}: Pick<TwilioAccount, "accountSid" | "subAccountSid"> &
+	if (!accountSid || !authToken) {
-	Partial<Pick<TwilioAccount, "subAccountAuthToken">>): twilio.Twilio {
-	if (!subAccountSid || !accountSid) {
 		throw new Error("unreachable");
 	}
 
-	return twilio(subAccountSid, serverConfig.twilio.authToken, {
+	return twilio(accountSid, decrypt(authToken));
-		accountSid,
-	});
 }
 
 export const smsUrl = `https://${serverConfig.app.baseUrl}/webhook/message`;

app/utils/validation.server.ts

@@ -32,3 +32,16 @@ export function validate<Data, Schema = z.Schema<Data>["_type"]>(
 		errors,
 	};
 }
+
+type FormFailureData<Validations extends Record<string, z.Schema>, Action extends keyof Validations> = {
+	errors: FormError<Validations[Action]>;
+	submitted?: never;
+};
+type FormSuccessData = {
+	errors?: never;
+	submitted: true;
+};
+export type FormActionData<Validations extends Record<string, z.Schema>, Action extends keyof Validations> = Record<
+	Action,
+	FormSuccessData | FormFailureData<Validations, Action>
+>;

prisma/migrations/20220517184134_init/migration.sql

@@ -21,17 +21,16 @@ CREATE TYPE "CallStatus" AS ENUM ('Queued', 'Ringing', 'InProgress', 'Completed'
 
 -- CreateTable
 CREATE TABLE "TwilioAccount" (
-    "subAccountSid" TEXT NOT NULL,
+    "accountSid" TEXT NOT NULL,
     "createdAt" TIMESTAMPTZ(6) NOT NULL DEFAULT CURRENT_TIMESTAMP,
     "updatedAt" TIMESTAMPTZ(6) NOT NULL,
-    "subAccountAuthToken" TEXT NOT NULL,
+    "authToken" TEXT NOT NULL,
-    "accountSid" TEXT NOT NULL,
     "twimlAppSid" TEXT,
     "apiKeySid" TEXT,
     "apiKeySecret" TEXT,
     "organizationId" TEXT NOT NULL,
 
-    CONSTRAINT "TwilioAccount_pkey" PRIMARY KEY ("subAccountSid")
+    CONSTRAINT "TwilioAccount_pkey" PRIMARY KEY ("accountSid")
 );
 
 -- CreateTable

prisma/schema.prisma

@@ -8,14 +8,13 @@ datasource db {
 }
 
 model TwilioAccount {
-  subAccountSid       String   @id
+  accountSid   String   @id
-  createdAt           DateTime @default(now()) @db.Timestamptz(6)
+  createdAt    DateTime @default(now()) @db.Timestamptz(6)
-  updatedAt           DateTime @updatedAt @db.Timestamptz(6)
+  updatedAt    DateTime @updatedAt @db.Timestamptz(6)
-  subAccountAuthToken String
+  authToken    String
-  accountSid          String
+  twimlAppSid  String?
-  twimlAppSid         String?
+  apiKeySid    String?
-  apiKeySid           String?
+  apiKeySecret String?
-  apiKeySecret        String?
 
   organizationId String       @unique
   organization   Organization @relation(fields: [organizationId], references: [id], onDelete: Cascade)
@@ -157,8 +156,8 @@ model NotificationSubscription {
   keys_p256dh    String
   keys_auth      String
 
-  membership   Membership? @relation(fields: [membershipId], references: [id], onDelete: Cascade)
+  membership   Membership @relation(fields: [membershipId], references: [id], onDelete: Cascade)
-  membershipId String?
+  membershipId String
 }
 
 enum SubscriptionStatus {