list twilio phone numbers

app/routes/__app/settings/phone.tsx

@@ -1,5 +1,30 @@
+import { type LoaderFunction, json } from "@remix-run/node";
+
 import TwilioConnect from "~/features/settings/components/phone/twilio-connect";
 import PhoneNumberForm from "~/features/settings/components/phone/phone-number-form";
+import { requireLoggedIn } from "~/utils/auth.server";
+import getTwilioClient from "~/utils/twilio.server";
+
+export type PhoneSettingsLoaderData = {
+	phoneNumbers: {
+		phoneNumber: string;
+		sid: string;
+	}[];
+}
+
+export const loader: LoaderFunction = async ({ request }) => {
+	const { organizations } = await requireLoggedIn(request);
+	const organization = organizations[0];
+	if (!organization.twilioAccountSid) {
+		throw new Error("Twilio account is not connected");
+	}
+
+	const twilioClient = getTwilioClient(organization);
+	const incomingPhoneNumbers = await twilioClient.incomingPhoneNumbers.list();
+	const phoneNumbers = incomingPhoneNumbers.map(({ phoneNumber, sid }) => ({ phoneNumber, sid }));
+
+	return json<PhoneSettingsLoaderData>({ phoneNumbers });
+};
 
 function PhoneSettings() {
 	return (

app/routes/twilio.authorize.ts

@@ -2,18 +2,23 @@ import { type LoaderFunction, redirect } from "@remix-run/node";
 import { refreshSessionData, requireLoggedIn } from "~/utils/auth.server";
 import db from "~/utils/db.server";
 import { commitSession } from "~/utils/session.server";
+import twilio from "twilio";
+import serverConfig from "~/config/config.server";
 
 export const loader: LoaderFunction = async ({ request }) => {
 	const user = await requireLoggedIn(request);
 	const url = new URL(request.url);
-	const twilioAccountSid = url.searchParams.get("AccountSid");
-	if (!twilioAccountSid) {
+	const twilioSubAccountSid = url.searchParams.get("AccountSid");
+	if (!twilioSubAccountSid) {
 		throw new Error("unreachable");
 	}
 
+	const twilioClient = twilio(twilioSubAccountSid, serverConfig.twilio.authToken);
+	const twilioSubAccount = await twilioClient.api.accounts(twilioSubAccountSid).fetch();
+	const twilioAccountSid = twilioSubAccount.ownerAccountSid;
 	await db.organization.update({
 		where: { id: user.organizations[0].id },
-		data: { twilioAccountSid },
+		data: { twilioSubAccountSid, twilioAccountSid },
 	});
 
 	const { session } = await refreshSessionData(request);