fix: use the selected version to check external auth (#20316)

Fixes https://github.com/coder/coder/issues/20315

site/src/modules/tasks/TaskPrompt/TaskPrompt.stories.tsx

@@ -243,7 +243,6 @@ export const SelectTemplateVersion: Story = {
 export const OnError: Story = {
 	decorators: [withGlobalSnackbar],
 	beforeEach: () => {
-		spyOn(API, "getTemplates").mockResolvedValue([MockTemplate]);
 		spyOn(API, "getTemplate").mockResolvedValue(MockTemplate);
 		spyOn(API.experimental, "getTasks").mockResolvedValue(MockTasks);
 		spyOn(API.experimental, "createTask").mockRejectedValue(
@@ -349,3 +348,62 @@ export const ExternalAuthError: Story = {
 		});
 	},
 };
+
+const tmplWithExternalAuth = {
+	...MockTemplateVersion,
+	id: "2",
+	name: "With external",
+};
+
+export const CheckExternalAuthOnChangingVersions: Story = {
+	args: {
+		templates: [
+			{
+				...MockTemplate,
+				active_version_id: tmplWithExternalAuth.id,
+			},
+		],
+	},
+	beforeEach: () => {
+		spyOn(API, "getTemplateVersions").mockResolvedValue([
+			{
+				...MockTemplateVersion,
+				id: "1",
+				name: "No external",
+			},
+			tmplWithExternalAuth,
+		]);
+		spyOn(API, "getTemplateVersionExternalAuth").mockImplementation(
+			(versionId: string) => {
+				return Promise.resolve(
+					versionId === tmplWithExternalAuth.id
+						? [MockTemplateVersionExternalAuthGithub]
+						: [],
+				);
+			},
+		);
+	},
+	play: async ({ canvasElement, step }) => {
+		const canvas = within(canvasElement);
+
+		await step("Renders external authentication", async () => {
+			await canvas.findByRole("button", { name: /connect to github/i });
+		});
+
+		await step("Change into version without external auth", async () => {
+			const body = within(canvasElement.ownerDocument.body);
+			const versionSelect = await canvas.findByLabelText(/template version/i);
+			await userEvent.click(versionSelect);
+			const versionOption = await body.findByRole("option", {
+				name: /no external/i,
+			});
+			await userEvent.click(versionOption);
+		});
+
+		await step("Don't render external authentication", async () => {
+			expect(
+				canvas.queryByRole("button", { name: /connect to github/i }),
+			).not.toBeInTheDocument();
+		});
+	},
+};

site/src/modules/tasks/TaskPrompt/TaskPrompt.tsx

@@ -150,13 +150,6 @@ const CreateTaskForm: FC<CreateTaskFormProps> = ({ templates, onSuccess }) => {
 		(t) => t.id === selectedTemplateId,
 	) as Template;
 
-	const {
-		externalAuth,
-		externalAuthError,
-		isPollingExternalAuth,
-		isLoadingExternalAuth,
-	} = useExternalAuth(selectedTemplate.active_version_id);
-
 	// Template versions
 	const [selectedVersionId, setSelectedVersionId] = useState(
 		selectedTemplate.active_version_id,
@@ -192,6 +185,12 @@ const CreateTaskForm: FC<CreateTaskFormProps> = ({ templates, onSuccess }) => {
 	}, [presetPrompt]);
 
 	// External Auth
+	const {
+		externalAuth,
+		externalAuthError,
+		isPollingExternalAuth,
+		isLoadingExternalAuth,
+	} = useExternalAuth(selectedVersionId);
 	const missedExternalAuth = externalAuth?.filter(
 		(auth) => !auth.optional && !auth.authenticated,
 	);
@@ -361,7 +360,7 @@ const CreateTaskForm: FC<CreateTaskFormProps> = ({ templates, onSuccess }) => {
 					<div className="flex items-center gap-2">
 						{missedExternalAuth && (
 							<ExternalAuthButtons
-								template={selectedTemplate}
+								versionId={selectedVersionId}
 								missedExternalAuth={missedExternalAuth}
 							/>
 						)}
@@ -408,19 +407,19 @@ const PromptSelectTrigger: FC<SelectTriggerProps> = ({
 };
 
 type ExternalAuthButtonProps = {
-	template: Template;
+	versionId: string;
 	missedExternalAuth: TemplateVersionExternalAuth[];
 };
 
 const ExternalAuthButtons: FC<ExternalAuthButtonProps> = ({
-	template,
+	versionId,
 	missedExternalAuth,
 }) => {
 	const {
 		startPollingExternalAuth,
 		isPollingExternalAuth,
 		externalAuthPollingState,
-	} = useExternalAuth(template.active_version_id);
+	} = useExternalAuth(versionId);
 	const shouldRetry = externalAuthPollingState === "abandoned";
 
 	return missedExternalAuth.map((auth) => {