Auth cleaned up and finished

client/fly.toml

@@ -9,8 +9,8 @@ primary_region = "arn"
 [http_service]
   internal_port = 3000
   force_https = true
-  auto_stop_machines = true
-  auto_start_machines = true
+  auto_stop_machines = false
+  auto_start_machines = false
 
 [checks]
   [checks.alive]

client/src/lib/components/LoadingComponent.svelte

@@ -5,7 +5,7 @@
 <div role="status">
     <svg
         aria-hidden="true"
-        class="animate-spin fill-primary-500"
+        class="animate-spin fill-secondary-500 text-primary-100 opacity-100 z-20"
         width={size}
         height={size}
         viewBox="0 0 100 101"

client/src/lib/form/Button.svelte

@@ -22,7 +22,7 @@
             <LoadingComponent />
         </div>
     {:else if $$slots.icon}
-        <div class="w-4 h-4 flex justify-center items-center">
+        <div class="w-6 h-6 flex justify-center items-center">
             <slot name="icon" />
         </div>
     {/if}

client/src/lib/icons/GithubIcon.svelte

@@ -6,5 +6,6 @@
 >
     <path
         d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"
+        fill="currentColor"
     />
 </svg>

client/src/lib/icons/MailIcon.svelte

@@ -0,0 +1,18 @@
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    class="feather feather-mail"
+>
+    <path
+        d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"
+    />
+    <polyline points="22,6 12,13 2,6" />
+</svg>
+

client/src/routes/auth/+page.svelte

@@ -1,22 +1,29 @@
 <script lang="ts">
-    import { browser } from "$app/environment";
-    import { goto } from "$app/navigation";
+    import LoadingComponent from "$lib/components/LoadingComponent.svelte";
     import { getFirebaseClient } from "$lib/firebase/firebase_client";
     import Button from "$lib/form/Button.svelte";
     import Input from "$lib/form/Input.svelte";
+    import GithubIcon from "$lib/icons/GithubIcon.svelte";
     import GmailIcon from "$lib/icons/GmailIcon.svelte";
+    import MailIcon from "$lib/icons/MailIcon.svelte";
+    import { toast } from "$lib/toast/toast";
     import {
+        GithubAuthProvider,
         GoogleAuthProvider,
+        getRedirectResult,
         isSignInWithEmailLink,
         sendSignInLinkToEmail,
         signInWithEmailLink,
-        signInWithPopup,
+        signInWithRedirect,
     } from "firebase/auth";
+    import { onMount } from "svelte";
 
     let errors: string[] = [];
+    let loading = false;
 
-    const googleProvider = new GoogleAuthProvider();
     const auth = getFirebaseClient();
+    const googleProvider = new GoogleAuthProvider();
+    const githubProvider = new GithubAuthProvider();
 
     async function sendIdToken(idToken: string): Promise<void> {
         try {
@@ -34,21 +41,19 @@
         }
     }
 
-    async function onSignInUsingGoogle() {
+    async function onSignInWithOAuth(
+        provider: GoogleAuthProvider | GithubAuthProvider,
+    ): Promise<void> {
         try {
-            const user = await signInWithPopup(auth, googleProvider);
-            const idToken = await user.user.getIdToken();
-            await sendIdToken(idToken);
-            await auth.signOut();
-            window.location.reload();
+            window.localStorage.setItem("checkRedirect", "true");
+            await signInWithRedirect(auth, provider);
         } catch (err) {
             console.error(err);
-            await auth.signOut();
         }
     }
 
     let email = "";
-    async function onSignInWithMagicLink() {
+    async function onSignInWithMagicLink(): Promise<void> {
         try {
             const url = import.meta.env.DEV
                 ? "http://localhost:3000/auth"
@@ -58,50 +63,113 @@
                 handleCodeInApp: true,
             });
             window.localStorage.setItem("emailForSignIn", email);
+            toast({
+                message: "Check your email for a magic link",
+                type: "success",
+            });
+        } catch (err) {
+            console.error(err);
+        }
+    }
+
+    async function checkRedirect(): Promise<void> {
+        try {
+            if (!window.localStorage.getItem("checkRedirect")) {
+                return;
+            }
+            loading = true;
+            const result = await getRedirectResult(auth);
+            if (!result) {
+                return;
+            }
+            const idToken = await result.user.getIdToken();
+            await sendIdToken(idToken);
+            await auth.signOut();
+            window.location.reload();
         } catch (err) {
             console.error(err);
+            toast({
+                message: "Something went wrong",
+                type: "error",
+            });
+            await auth.signOut();
+        } finally {
+            loading = false;
+            window.localStorage.removeItem("checkRedirect");
         }
     }
 
-    async function checkMagicLink(browser: boolean) {
-        if (browser && isSignInWithEmailLink(auth, window.location.href)) {
-            try {
-                const email = window.localStorage.getItem("emailForSignIn");
-                if (!email) {
-                    console.error("No email found");
-                    return;
-                }
-                const user = await signInWithEmailLink(
-                    auth,
-                    email,
-                    window.location.href,
-                );
-                const idToken = await user.user.getIdToken();
-                await sendIdToken(idToken);
-                goto("/");
-            } catch (err) {
-                console.error(err);
-            } finally {
-                auth.signOut();
+    async function checkMagicLink(): Promise<void> {
+        if (!isSignInWithEmailLink(auth, window.location.href)) {
+            return;
+        }
+        try {
+            loading = true;
+            const email = window.localStorage.getItem("emailForSignIn");
+            if (!email) {
+                throw new Error("No email found");
             }
+            const user = await signInWithEmailLink(
+                auth,
+                email,
+                window.location.href,
+            );
+            const idToken = await user.user.getIdToken();
+            await sendIdToken(idToken);
+            await auth.signOut();
+            window.location.reload();
+        } catch (err) {
+            await auth.signOut();
+            toast({
+                message: "Something went wrong",
+                type: "error",
+            });
+            console.error(err);
+        } finally {
+            loading = false;
         }
     }
-    $: checkMagicLink(browser);
+    onMount(() => {
+        checkMagicLink();
+        checkRedirect();
+    });
 </script>
 
+{#if loading}
+    <div
+        class="absolute top-0 left-0 w-screen h-screen bg-primary-500 z-10 opacity-40 flex justify-center items-center"
+    >
+        <LoadingComponent size={60} />
+    </div>
+{/if}
+
 <section
     class="max-w-md h-screen m-auto flex flex-col justify-center items-center p-4"
 >
     <h2 class="text-primary-200">Welcome back</h2>
     <p class="text-primary-300 mb-4 mt-2">
         Sign in so You can say "I use Rust"
     </p>
-    <Button variant="secondary" on:click={onSignInUsingGoogle}>
-        <div class="h-5">
-            <GmailIcon />
-        </div>
-        <div>Google</div>
-    </Button>
+    <div class="flex flex-col w-full gap-2">
+        <Button
+            variant="secondary"
+            on:click={() => onSignInWithOAuth(googleProvider)}
+        >
+            <svelte:fragment slot="icon">
+                <GmailIcon />
+            </svelte:fragment>
+            Google
+        </Button>
+        <Button
+            variant="secondary"
+            on:click={() => onSignInWithOAuth(githubProvider)}
+        >
+            <svelte:fragment slot="icon">
+                <GithubIcon />
+            </svelte:fragment>
+            Github
+        </Button>
+    </div>
     <div class="w-full flex flex-row gap-4 items-center my-6">
         <div class="border-b w-full border-primary-300" />
         <div class="text-primary-300 text-sm whitespace-nowrap">
@@ -117,6 +185,9 @@
         bind:value={email}
     />
     <Button variant="secondary" on:click={onSignInWithMagicLink}>
+        <svelte:fragment slot="icon">
+            <MailIcon />
+        </svelte:fragment>
         <div>Email</div>
     </Button>
 </section>

service-notes/src/notes_service.rs

@@ -188,16 +188,13 @@ impl NotesService for MyService {
         #[cfg(debug_assertions)]
         println!("CreateNote = {:?}", request);
         let start = std::time::Instant::now();
-
-        // start transaction
         let pool = self.pool.clone();
         let mut tx = pool.begin().await.map_err(sqlx::Error::into_status)?;
 
         let note = request.into_inner();
         let user_id =
             Uuid::parse_str(&note.user_id).map_err(|e| Status::internal(e.to_string()))?;
 
-        // do it 100 times
         query("INSERT INTO notes (title, content, \"userId\") VALUES ($1, $2, $3) RETURNING *")
             .bind(note.title.clone())
             .bind(note.content.clone())

service-posts/fly.toml

@@ -14,8 +14,8 @@ primary_region = "arn"
 [http_service]
   internal_port = 443
   force_https = true
-  auto_stop_machines = true
-  auto_start_machines = true
+  auto_stop_machines = false
+  auto_start_machines = false
 
 [[services]]
   protocol = "tcp"

service-users/fly.toml

@@ -14,8 +14,8 @@ primary_region = "arn"
 [http_service]
   internal_port = 443
   force_https = true
-  auto_stop_machines = true
-  auto_start_machines = true
+  auto_stop_machines = false
+  auto_start_machines = false
 
 [[services]]
   protocol = "tcp"

service-utils/fly.toml

@@ -18,8 +18,8 @@ primary_region = "arn"
 [http_service]
   internal_port = 443
   force_https = true
-  auto_stop_machines = true
-  auto_start_machines = true
+  auto_stop_machines = false
+  auto_start_machines = false
 
 [[services]]
   protocol = "tcp"