fix: app sign in with button to open app (#7259)

* fix: app sign in with button to open app

* pnpm prepr

apps/frontend/src/components/ui/auth/SignIn.vue

@@ -1,9 +1,20 @@
 <template>
 	<div v-if="subtleLauncherRedirectUri">
-		<iframe
+		<iframe :src="subtleLauncherRedirectUri" class="hidden"></iframe>
-			:src="subtleLauncherRedirectUri"
+		<div
-			class="fixed left-0 top-0 z-[9999] m-0 h-full w-full border-0 p-0"
+			class="universal-card mx-auto flex w-full max-w-[27rem] flex-col gap-6 border border-solid border-surface-5 !p-6 text-center"
-		></iframe>
+		>
+			<div class="flex flex-col gap-2">
+				<h1 class="m-0 text-2xl font-semibold text-contrast">Opening Modrinth App...</h1>
+				<p class="m-0 text-left text-primary">
+					If the app doesn’t open, use the button below to finish signing in.
+				</p>
+			</div>
+			<Button type="colored" color="brand" class="" @click="sendLauncherCallback">
+				{{ formatMessage(messages.returnToLauncherButton) }}
+				<RightArrowIcon />
+			</Button>
+		</div>
 	</div>
 	<div
 		v-else
@@ -239,6 +250,10 @@ const onOAuthProviderClick = (provider: AuthProvider) => {
 	pendingSignInOAuthProvider.value = provider
 }
 
+async function sendLauncherCallback() {
+	await fetch(subtleLauncherRedirectUri, { mode: 'no-cors' }).catch(() => undefined)
+}
+
 const { formatMessage } = useVIntl()
 
 const messages = defineMessages({
@@ -287,6 +302,19 @@ const messages = defineMessages({
 		id: 'auth.sign-in.continue-with-passkey',
 		defaultMessage: 'Continue with passkey',
 	},
+	launcherSignInCompleteTitle: {
+		id: 'auth.sign-in.launcher.complete.title',
+		defaultMessage: 'You’re signed in',
+	},
+	launcherSignInCompleteDescription: {
+		id: 'auth.sign-in.launcher.complete.description',
+		defaultMessage:
+			'We’re returning you to the Modrinth App. If nothing happens, use the button below.',
+	},
+	returnToLauncherButton: {
+		id: 'auth.sign-in.launcher.complete.return-button',
+		defaultMessage: 'Open Modrinth App',
+	},
 })
 </script>
 

apps/frontend/src/locales/en-US/index.json

@@ -878,6 +878,15 @@
   "auth.sign-in.last-sign-in": {
     "message": "Last used"
   },
+  "auth.sign-in.launcher.complete.description": {
+    "message": "We’re returning you to the Modrinth App. If nothing happens, use the button below."
+  },
+  "auth.sign-in.launcher.complete.return-button": {
+    "message": "Open Modrinth App"
+  },
+  "auth.sign-in.launcher.complete.title": {
+    "message": "You’re signed in"
+  },
   "auth.sign-in.no-account": {
     "message": "Don't have an account?"
   },