Build the oauth2 callback url from the server (and use env.APP_ORIGIN)

apps/webapp/app/components/integrations/ConnectToIntegrationSheet.tsx

@@ -26,10 +26,12 @@ export function ConnectToIntegrationSheet({
   organizationId,
   button,
   className,
+  callbackUrl
 }: {
   integration: Integration;
   organizationId: string;
   button: React.ReactNode;
+  callbackUrl: string;
   className?: string;
 }) {
   const [integrationMethod, setIntegrationMethod] = useState<
@@ -100,6 +102,7 @@ export function ConnectToIntegrationSheet({
               integration={integration}
               organizationId={organizationId}
               method={integrationMethod}
+              callbackUrl={callbackUrl}
             />
           )}
         </SheetBody>
@@ -112,10 +115,12 @@ function SelectedIntegrationMethod({
   integration,
   organizationId,
   method,
+  callbackUrl
 }: {
   integration: Integration;
   organizationId: string;
   method: IntegrationMethod;
+  callbackUrl: string;
 }) {
   const authMethods = Object.values(integration.authenticationMethods);
 
@@ -134,6 +139,7 @@ function SelectedIntegrationMethod({
         <SelectOAuthMethod
           integration={integration}
           organizationId={organizationId}
+          callbackUrl={callbackUrl}
         />
       );
     case "custom":

apps/webapp/app/components/integrations/ConnectToOAuthForm.tsx

@@ -33,12 +33,14 @@ export function ConnectToOAuthForm({
   authMethodKey,
   organizationId,
   clientType,
+  callbackUrl,
 }: {
   integration: Integration;
   authMethod: ApiAuthenticationMethodOAuth2;
   authMethodKey: string;
   organizationId: string;
   clientType: ConnectionType;
+  callbackUrl: string;
 }) {
   const [id] = useState<string>(cuid());
   const transition = useNavigation();
@@ -133,10 +135,7 @@ export function ConnectToOAuthForm({
             <div className="ml-6 mt-2">
               <Paragraph variant="small" className="mb-2">
                 Set the callback url to{" "}
-                <CodeBlock
-                  code={`${origin}/oauth2/callback`}
-                  showLineNumbers={false}
-                />
+                <CodeBlock code={callbackUrl} showLineNumbers={false} />
               </Paragraph>
               <div className="flex flex-col gap-2">
                 <div className="flex gap-2">

apps/webapp/app/components/integrations/SelectOAuthMethod.tsx

@@ -12,9 +12,11 @@ import { Paragraph } from "../primitives/Paragraph";
 export function SelectOAuthMethod({
   integration,
   organizationId,
+  callbackUrl
 }: {
   integration: Integration;
   organizationId: string;
+  callbackUrl: string;
 }) {
   const oAuthMethods = Object.entries(integration.authenticationMethods).filter(
     (a): a is [string, ApiAuthenticationMethodOAuth2] => a[1].type === "oauth2"
@@ -95,6 +97,7 @@ export function SelectOAuthMethod({
             authMethodKey={oAuthKey}
             organizationId={organizationId}
             clientType={connectionType}
+            callbackUrl={callbackUrl}
           />
         ) : (
           <>

apps/webapp/app/presenters/IntegrationsPresenter.server.ts

@@ -162,6 +162,7 @@ export class IntegrationsPresenter {
     return {
       clients: clientsWithConnections,
       options,
+      callbackUrl: `${env.APP_ORIGIN}/oauth2/callback`
     };
   }
 }

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.integrations/route.tsx

@@ -74,7 +74,7 @@ export const handle: Handle = {
 };
 
 export default function Integrations() {
-  const { clients, options } = useTypedLoaderData<typeof loader>();
+  const { clients, options, callbackUrl } = useTypedLoaderData<typeof loader>();
   const organization = useOrganization();
   const project = useProject();
 
@@ -104,6 +104,7 @@ export default function Integrations() {
           <PossibleIntegrationsList
             options={options}
             organizationId={organization.id}
+            callbackUrl={callbackUrl}
           />
           <ConnectedIntegrationsList
             clients={clients}
@@ -119,9 +120,11 @@ export default function Integrations() {
 function PossibleIntegrationsList({
   options,
   organizationId,
+  callbackUrl,
 }: {
   options: IntegrationOrApi[];
   organizationId: string;
+  callbackUrl: string;
 }) {
   const [onlyShowIntegrations, setOnlyShowIntegrations] = useState(false);
   const optionsToShow = onlyShowIntegrations
@@ -167,6 +170,7 @@ function PossibleIntegrationsList({
                   key={option.identifier}
                   integration={option}
                   organizationId={organizationId}
+                  callbackUrl={callbackUrl}
                   button={
                     <AddIntegrationConnection
                       identifier={option.identifier}
@@ -370,5 +374,5 @@ function AddIntegrationConnection({
 }
 
 function IntegrationIcon() {
-  return <LogoIcon className="h-3.5 w-3.5 pb-0.5 flex-none text-amber-500" />;
+  return <LogoIcon className="h-3.5 w-3.5 flex-none pb-0.5 text-amber-500" />;
 }