Change the application access authentication flow

packages/teleport/src/AppLauncher/AppLauncher.story.tsx

@@ -16,16 +16,16 @@
 
 import React from 'react';
 
-import { AppLauncher } from './AppLauncher';
+import { AppLauncherAccessDenied, AppLauncherProcessing } from './AppLauncher';
 
 export default {
   title: 'Teleport/AppLauncher',
 };
 
 export const Processing = () => {
-  return <AppLauncher status="processing" statusText="" />;
+  return <AppLauncherProcessing />;
 };
 
 export const Failed = () => {
-  return <AppLauncher status="failed" statusText="" />;
+  return <AppLauncherAccessDenied statusText="" />;
 };

packages/teleport/src/AppLauncher/AppLauncher.tsx

@@ -14,25 +14,93 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
+import React, { useCallback, useEffect } from 'react';
+
+import { useLocation, useParams } from 'react-router';
+
 import { Flex, Indicator } from 'design';
+
 import { AccessDenied } from 'design/CardError';
 
-import useAppLauncher from './useAppLauncher';
+import useAttempt from 'shared/hooks/useAttemptNext';
 
-export default function Container() {
-  const state = useAppLauncher();
-  return <AppLauncher {...state} />;
-}
+import { UrlLauncherParams } from 'teleport/config';
+import service from 'teleport/services/apps';
+
+export function AppLauncher() {
+  const { attempt, setAttempt } = useAttempt('processing');
+
+  const params = useParams<UrlLauncherParams>();
+  const { search } = useLocation();
+  const queryParams = new URLSearchParams(search);
+
+  const createAppSession = useCallback(async (params: UrlLauncherParams) => {
+    try {
+      let fqdn = params.fqdn;
+      if (!fqdn) {
+        const app = await service.getAppFqdn(params);
+
+        fqdn = app.fqdn;
+      }
+
+      const port = location.port ? `:${location.port}` : '';
+      const session = await service.createAppSession(params);
+
+      await fetch(`https://${fqdn}${port}/x-teleport-auth`, {
+        method: 'POST',
+        credentials: 'include',
+        headers: {
+          'X-Cookie-Value': session.cookieValue,
+          'X-Subject-Cookie-Value': session.subjectCookieValue,
+        },
+      });
+
+      let path = '';
+      if (queryParams.has('path')) {
+        path = decodeURIComponent(queryParams.get('path'));
 
-export function AppLauncher(props: ReturnType<typeof useAppLauncher>) {
-  if (props.status === 'failed') {
-    return <AccessDenied message={props.statusText} />;
+        if (!path.startsWith('/')) {
+          path = `/${path}`;
+        }
+      }
+
+      window.location.replace(`https://${fqdn}${port}${path}`);
+    } catch (err) {
+      let statusText = 'Something went wrong';
+      if (err instanceof Error) {
+        statusText = err.message;
+      }
+
+      setAttempt({
+        status: 'failed',
+        statusText,
+      });
+    }
+  }, []);
+
+  useEffect(() => {
+    createAppSession(params);
+  }, [params]);
+
+  if (attempt.status === 'failed') {
+    return <AppLauncherAccessDenied statusText={attempt.statusText} />;
   }
 
+  return <AppLauncherProcessing />;
+}
+
+export function AppLauncherProcessing() {
   return (
     <Flex height="180px" justifyContent="center" alignItems="center" flex="1">
       <Indicator />
     </Flex>
   );
 }
+
+interface AppLauncherAccessDeniedProps {
+  statusText: string;
+}
+
+export function AppLauncherAccessDenied(props: AppLauncherAccessDeniedProps) {
+  return <AccessDenied message={props.statusText} />;
+}

packages/teleport/src/AppLauncher/index.ts

@@ -14,5 +14,4 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import AppLauncher from './AppLauncher';
-export default AppLauncher;
+export { AppLauncher as default } from './AppLauncher';

packages/teleport/src/services/apps/apps.ts

@@ -50,6 +50,8 @@ const service = {
         fqdn: json.fqdn as string,
         value: json.value as string,
         subject: json.subject as string,
+        cookieValue: json.cookie_value as string,
+        subjectCookieValue: json.subject_cookie_value as string,
       }));
   },