Auto merge of #640 - lucas/finish-auth-flows, r=lennartkloock

finish totp auth flows
finish 2fa totp flows and cleanup login flow. Redirect seems to be only for server components so changed redirects to use `goto` and works well and fixes issues with the preview link

Uusers need to be able to escape the 2fa state and still return to the login screen. Currently they will always be stuck on the `/mfa` page regardless of navigation. This PR updates this so that the base "unauthenticated" pages can still be accessed. A user who is "half-authenticated" should not have to click on a logout button to initiate a login with a different account

For example -
- a successful magic link navigates you to the 2fa page
- deciding not to enter 2fa, user visits login page again and attempts to login with magic link again
- User should be able to successfully use a different login or instantiate a new login successfully to enter the app (old userSession can be revoked if desired)

So now routing to "/" will only default route to "/mfa" on internal route access. All external routes will now still be accessible

<!--
Thank you for your Pull Request. Please provide a short description of your changes above.

Bug fixes and new features should include tests.

Contributors guide: https://github.com/ScuffleCloud/.github/blob/main/CONTRIBUTING.md
-->

Requested-by: lucassshanks <[email protected]>
Reviewed-by: lennartkloock <[email protected]>

Author: scuffle-brawl[bot]

cloud/core/src/operations/organization_invitations.rs

@@ -125,7 +125,7 @@ impl<G: core_traits::Global> Operation<G>
 }
 
 impl<G: core_traits::Global> Operation<G>
-    for tonic::Request<pb::scufflecloud::core::v1::ListOrgnizationInvitesByUserRequest>
+    for tonic::Request<pb::scufflecloud::core::v1::ListOrganizationInvitesByUserRequest>
 {
     type Principal = User;
     type Resource = User;

cloud/core/src/services/organization_invitations.rs

@@ -19,9 +19,9 @@ impl<G: core_traits::Global>
         Operation::<G>::run(req).await.map(tonic::Response::new)
     }
 
-    async fn list_orgnization_invites_by_user(
+    async fn list_organization_invites_by_user(
         &self,
-        req: tonic::Request<pb::scufflecloud::core::v1::ListOrgnizationInvitesByUserRequest>,
+        req: tonic::Request<pb::scufflecloud::core::v1::ListOrganizationInvitesByUserRequest>,
     ) -> Result<tonic::Response<pb::scufflecloud::core::v1::OrganizationInvitationList>, tonic::Status> {
         Operation::<G>::run(req).await.map(tonic::Response::new)
     }

cloud/dashboard/src/features/login-two-factor/createMfaWebauthnChallenge.ts

@@ -1,6 +1,6 @@
 import { sessionsServiceClient, usersServiceClient } from "$lib/grpcClient";
 import { isWebauthnSupported, parseCredentialRequestOptions, serializeCredentialAssertionResponse } from "$lib/utils";
-import { getWebAuthnErrorMessage } from "../settings/utils";
+import { getWebAuthnErrorMessage } from "../settings/manage-two-factor/utils";
 
 export async function createMfaWebauthnChallenge(userId: string): Promise<void> {
     if (!isWebauthnSupported()) {
@@ -32,8 +32,6 @@ export async function createMfaWebauthnChallenge(userId: string): Promise<void>
 
     const responseJson = serializeCredentialAssertionResponse(credential);
 
-    // Returns a usersession that we should just consume locally but we can do that later
-
     console.log("collected credential now validating for session");
     await sessionsServiceClient.validateMfaForUserSession({
         response: {
@@ -43,6 +41,5 @@ export async function createMfaWebauthnChallenge(userId: string): Promise<void>
             },
         },
     }).response;
-
     console.log("completely validation for session");
 }

cloud/dashboard/src/features/login-two-factor/mfaChallengeMutations.ts

@@ -1,4 +1,6 @@
+import { goto } from "$app/navigation";
 import { authState } from "$lib/auth.svelte";
+import { sessionsServiceClient } from "$lib/grpcClient";
 import { withRpcErrorHandling } from "$lib/utils";
 import { createMutation } from "@tanstack/svelte-query";
 import { createMfaWebauthnChallenge } from "./createMfaWebauthnChallenge";
@@ -10,8 +12,57 @@ export function useCreateWebauthnChallenge(userId: string | undefined) {
                 if (!userId) throw new Error("User not authenticated");
                 return await createMfaWebauthnChallenge(userId);
             }),
+        onSuccess: async () => {
+            await authState().reloadUserForMfa();
+            goto("/");
+        },
+    }));
+}
+
+export function useValidateMfaTotp() {
+    return createMutation(() => ({
+        mutationFn: (totpCode: string) =>
+            withRpcErrorHandling(async () => {
+                if (!totpCode || totpCode.trim().length === 0) {
+                    throw new Error("TOTP code is required");
+                }
+
+                // Validate format
+                if (!/^\d{6}$/.test(totpCode.trim())) {
+                    throw new Error("Invalid TOTP code format");
+                }
+
+                await sessionsServiceClient.validateMfaForUserSession({
+                    response: {
+                        oneofKind: "totp",
+                        totp: {
+                            code: totpCode.trim(),
+                        },
+                    },
+                }).response;
+            }),
         onSuccess: () => {
             authState().reloadUserForMfa();
+            goto("/");
         },
     }));
 }
+
+export function useValidateMfaRecoveryCode() {
+    return createMutation(() => ({
+        mutationFn: (recoveryCode: string) =>
+            withRpcErrorHandling(async () => {
+                if (!recoveryCode || recoveryCode.trim().length === 0) {
+                    throw new Error("Recovery code is required");
+                }
+                await sessionsServiceClient.validateMfaForUserSession({
+                    response: {
+                        oneofKind: "recoveryCode",
+                        recoveryCode: {
+                            code: recoveryCode.trim(),
+                        },
+                    },
+                }).response;
+            }),
+    }));
+}

cloud/dashboard/src/features/login-two-factor/recovery-code-collapsible.svelte

@@ -43,6 +43,7 @@
 
 <style>
     .troubleshoot-section {
+      margin-top: 1rem;
       width: 100%;
     }
 

cloud/dashboard/src/features/login-two-factor/recovery-code-form.svelte

@@ -1,69 +1,33 @@
 <script lang="ts">
-    import {
-        rpcErrorToString,
-        sessionsServiceClient,
-    } from "$lib/grpcClient";
-    import IconArrowLeft from "$lib/images/icon-arrow-left.svelte";
-    import { type RpcError } from "@protobuf-ts/runtime-rpc";
+    import LoginFormTitle from "$features/login/login-form-title.svelte";
+    import InlineNotification from "$lib/components/inline-notification.svelte";
+    import { useValidateMfaRecoveryCode } from "./mfaChallengeMutations";
 
     interface Props {
         onBack: () => void;
     }
 
     let { onBack }: Props = $props();
 
-    let loading = $state(false);
-    let error = $state<string | null>(null);
+    const validateMfaRecoveryCodeMutation =
+        useValidateMfaRecoveryCode();
 
     async function handleSubmit(event: SubmitEvent): Promise<void> {
         event.preventDefault();
         const formData = new FormData(event.target as HTMLFormElement);
         const recoveryCode = (formData.get("recovery-code") as string)
-            .trim();
+            ?.trim();
+        if (!recoveryCode) return;
 
-        if (!recoveryCode) {
-            return;
-        }
-
-        loading = true;
-        error = null;
-
-        try {
-            const validateCall = sessionsServiceClient
-                .validateMfaForUserSession({
-                    response: {
-                        oneofKind: "recoveryCode",
-                        recoveryCode: {
-                            code: recoveryCode.trim(),
-                        },
-                    },
-                });
-            await validateCall.status;
-        } catch (err) {
-            const errorText = rpcErrorToString(err as RpcError);
-            // TODO: Remove later after UI on how we want to show errors
-            console.log(errorText);
-            error = "Failed to validate recovery code";
-        } finally {
-            loading = false;
-        }
+        validateMfaRecoveryCodeMutation.mutate(recoveryCode);
     }
 </script>
 
-<div class="header">
-    <button type="button" onclick={onBack} class="back-button">
-        <IconArrowLeft />
-    </button>
-    <h1 class="title">2FA Recovery</h1>
-</div>
+<LoginFormTitle title="2FA Recovery" {onBack} />
 <p class="subtitle">
     No 2FA device available? <br>Paste your backup code below.
 </p>
 
-{#if error}
-    <div class="error-message">{error}</div>
-{/if}
-
 <form onsubmit={handleSubmit} class="recovery-form">
     <div class="form-group">
         <input
@@ -72,51 +36,33 @@
             id="recovery-code"
             class="form-input"
             placeholder="Enter your recovery code"
-            disabled={loading}
+            disabled={validateMfaRecoveryCodeMutation.isPending}
             required
         />
     </div>
-    <button type="submit" class="btn-primary" disabled={loading}>
-        {loading ? "Verifying..." : "Continue"}
+    {#if validateMfaRecoveryCodeMutation.isError}
+        <div class="error-notification">
+            <InlineNotification
+                type="error"
+                message={validateMfaRecoveryCodeMutation.error?.message
+                || "Failed to validate recovery code"}
+            />
+        </div>
+    {/if}
+    <button
+        type="submit"
+        class="btn-primary"
+        disabled={validateMfaRecoveryCodeMutation.isPending}
+    >
+        {
+            validateMfaRecoveryCodeMutation.isPending
+            ? "Verifying..."
+            : "Continue"
+        }
     </button>
 </form>
 
 <style>
-    .header {
-      display: flex;
-      align-items: center;
-      position: relative;
-      margin-bottom: 2rem;
-    }
-
-    .back-button {
-      background: none;
-      border: none;
-      color: #6b7280;
-      cursor: pointer;
-      font-size: 0.875rem;
-      padding: 0;
-      position: absolute;
-      left: 0;
-      top: 50%;
-      transform: translateY(-50%);
-      display: flex;
-      align-items: center;
-      gap: 0.25rem;
-    }
-
-    .back-button:hover {
-      color: #374151;
-    }
-
-    .title {
-      font-size: 1.5rem;
-      font-weight: 600;
-      margin: 0 auto;
-      text-align: center;
-      flex: 1;
-    }
-
     .subtitle {
       font-size: 1rem;
       color: #272626;
@@ -177,4 +123,8 @@
     .btn-primary:hover:not(:disabled) {
       background: #d97706;
     }
+
+    .error-notification {
+      margin-bottom: 1.25rem;
+    }
 </style>