Add query parameter to skip the embedded "sign in" view (#7352)

Add query parameter to skip sign-in view if not necessary

src/hooks/useAuthNavigation.tsx

@@ -1,8 +1,11 @@
 import { useEffect } from 'react'
-import { useLocation, useNavigate } from 'react-router-dom'
+import { useLocation, useNavigate, useSearchParams } from 'react-router-dom'
 
+import { isDesktop } from '@src/lib/isDesktop'
 import { PATHS } from '@src/lib/paths'
+import { IMMEDIATE_SIGN_IN_IF_NECESSARY_QUERY_PARAM } from '@src/lib/constants'
 import { useAuthState } from '@src/lib/singletons'
+import { generateSignInUrl } from '@src/routes/utils'
 
 /**
  * A simple hook that listens to the auth state of the app and navigates
@@ -12,6 +15,10 @@ export function useAuthNavigation() {
   const navigate = useNavigate()
   const location = useLocation()
   const authState = useAuthState()
+  const [searchParams] = useSearchParams()
+  const requestingImmediateSignInIfNecessary = searchParams.has(
+    IMMEDIATE_SIGN_IN_IF_NECESSARY_QUERY_PARAM
+  )
 
   // Subscribe to the auth state of the app and navigate accordingly.
   useEffect(() => {
@@ -24,6 +31,11 @@ export function useAuthNavigation() {
       authState.matches('loggedOut') &&
       !location.pathname.includes(PATHS.SIGN_IN)
     ) {
+      if (requestingImmediateSignInIfNecessary && !isDesktop()) {
+        window.location.href = generateSignInUrl()
+        return
+      }
+
       navigate(PATHS.SIGN_IN + (location.search || ''))
     }
   }, [authState, location.pathname])

src/lib/constants.ts

@@ -217,3 +217,6 @@ export const POOL_QUERY_PARAM = 'pool'
  * @deprecated: supporting old share links with this. For new command URLs, use "cmd"
  */
 export const CREATE_FILE_URL_PARAM = 'create-file'
+/** A query parameter to skip the sign-on view if unnecessary. */
+export const IMMEDIATE_SIGN_IN_IF_NECESSARY_QUERY_PARAM =
+  'immediate-sign-in-if-necessary'

src/routes/SignIn.tsx

@@ -10,12 +10,11 @@ import { VITE_KC_API_BASE_URL, VITE_KC_SITE_BASE_URL } from '@src/env'
 import { APP_NAME } from '@src/lib/constants'
 import { isDesktop } from '@src/lib/isDesktop'
 import { openExternalBrowserIfDesktop } from '@src/lib/openWindow'
-import { PATHS } from '@src/lib/paths'
 import { Themes, getSystemTheme } from '@src/lib/theme'
 import { reportRejection } from '@src/lib/trap'
 import { toSync } from '@src/lib/utils'
 import { authActor, useSettings } from '@src/lib/singletons'
-import { APP_VERSION } from '@src/routes/utils'
+import { APP_VERSION, generateSignInUrl } from '@src/routes/utils'
 
 const subtleBorder =
   'border border-solid border-chalkboard-30 dark:border-chalkboard-80'
@@ -36,11 +35,7 @@ const SignIn = () => {
   const {
     app: { theme },
   } = useSettings()
-  const signInUrl = `${VITE_KC_SITE_BASE_URL}${
-    PATHS.SIGN_IN
-  }?callbackUrl=${encodeURIComponent(
-    typeof window !== 'undefined' && window.location.href.replace('signin', '')
-  )}`
+  const signInUrl = generateSignInUrl()
   const kclSampleUrl = `${VITE_KC_SITE_BASE_URL}/docs/kcl-samples/car-wheel-assembly`
 
   const getThemeText = useCallback(

src/routes/utils.ts

@@ -1,6 +1,7 @@
-import { NODE_ENV } from '@src/env'
+import { NODE_ENV, VITE_KC_SITE_BASE_URL } from '@src/env'
 import { isDesktop } from '@src/lib/isDesktop'
 import { IS_PLAYWRIGHT_KEY } from '@src/lib/constants'
+import { PATHS } from '@src/lib/paths'
 
 const isTestEnv = window?.localStorage.getItem(IS_PLAYWRIGHT_KEY) === 'true'
 
@@ -27,3 +28,11 @@ export function getReleaseUrl(version: string = APP_VERSION) {
 
   return `https://github.com/KittyCAD/modeling-app/releases/tag/v${version}`
 }
+
+export function generateSignInUrl() {
+  return `${VITE_KC_SITE_BASE_URL}${
+    PATHS.SIGN_IN
+  }?callbackUrl=${encodeURIComponent(
+    typeof window !== 'undefined' && window.location.href.replace('signin', '')
+  )}`
+}