feat: add google oauth

frontend/src/lib/api/entities.ts

@@ -24,6 +24,8 @@ export interface MeUser extends User {
   discord_username: string | null;
   tumblr: string | null;
   tumblr_username: string | null;
+  google: string | null;
+  google_username: string | null;
   fediverse: string | null;
   fediverse_username: string | null;
   fediverse_instance: string | null;

frontend/src/lib/api/responses.ts

@@ -16,6 +16,7 @@ export interface MetaResponse {
 export interface UrlsResponse {
   discord: string;
   tumblr: string;
+  google: string;
 }
 
 export interface ExportResponse {

frontend/src/routes/auth/login/+page.svelte

@@ -17,7 +17,6 @@
     ModalFooter,
   } from "sveltestrap";
   import type { PageData } from "./$types";
-  import fediverse from "./fediverse.svg";
 
   export let data: PageData;
 
@@ -63,6 +62,7 @@
         <ListGroupItem tag="button" on:click={toggleModal}>Log in with the Fediverse</ListGroupItem>
         <ListGroupItem tag="a" href={data.discord}>Log in with Discord</ListGroupItem>
         <ListGroupItem tag="a" href={data.tumblr}>Log in with Tumblr</ListGroupItem>
+        <ListGroupItem tag="a" href={data.google}>Log in with Google</ListGroupItem>
       </ListGroup>
       <Modal header="Pick an instance" isOpen={modalOpen} toggle={toggleModal}>
         <ModalBody>

frontend/src/routes/auth/login/google/+page.server.ts

@@ -0,0 +1,38 @@
+import type { APIError, MeUser } from "$lib/api/entities";
+import { apiFetch } from "$lib/api/fetch";
+import type { PageServerLoad } from "./$types";
+import { PUBLIC_BASE_URL } from "$env/static/public";
+
+export const load = (async ({ url }) => {
+  try {
+    const resp = await apiFetch<CallbackResponse>("/auth/google/callback", {
+      method: "POST",
+      body: {
+        callback_domain: PUBLIC_BASE_URL,
+        code: url.searchParams.get("code"),
+        state: url.searchParams.get("state"),
+      },
+    });
+
+    return {
+      ...resp,
+    };
+  } catch (e) {
+    return { error: e as APIError };
+  }
+}) satisfies PageServerLoad;
+
+interface CallbackResponse {
+  has_account: boolean;
+  token?: string;
+  user?: MeUser;
+
+  google?: string;
+  ticket?: string;
+  require_invite: boolean;
+
+  is_deleted: boolean;
+  deleted_at?: string;
+  self_delete?: boolean;
+  delete_reason?: string;
+}

frontend/src/routes/auth/login/google/+page.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+  import { goto } from "$app/navigation";
+  import type { APIError, MeUser } from "$lib/api/entities";
+  import { apiFetch, apiFetchClient } from "$lib/api/fetch";
+  import { userStore } from "$lib/store";
+  import type { PageData } from "./$types";
+  import { addToast } from "$lib/toast";
+  import CallbackPage from "../CallbackPage.svelte";
+  import type { SignupResponse } from "$lib/api/responses";
+
+  export let data: PageData;
+
+  const signupForm = async (username: string, invite: string) => {
+    try {
+      const resp = await apiFetch<SignupResponse>("/auth/google/signup", {
+        method: "POST",
+        body: {
+          ticket: data.ticket,
+          username: username,
+          invite_code: invite,
+        },
+      });
+
+      localStorage.setItem("pronouns-token", resp.token);
+      localStorage.setItem("pronouns-user", JSON.stringify(resp.user));
+      userStore.set(resp.user);
+      addToast({ header: "Welcome!", body: "Signed up successfully!" });
+      goto(`/@${resp.user.name}`);
+    } catch (e) {
+      data.error = e as APIError;
+    }
+  };
+
+  const linkAccount = async () => {
+    try {
+      const resp = await apiFetchClient<MeUser>("/auth/google/add-provider", "POST", {
+        ticket: data.ticket,
+      });
+
+      localStorage.setItem("pronouns-user", JSON.stringify(resp));
+      userStore.set(resp);
+      addToast({ header: "Linked account", body: "Successfully linked account!" });
+      await goto("/settings/auth");
+    } catch (e) {
+      data.error = e as APIError;
+    }
+  };
+</script>
+
+<CallbackPage
+  authType="Google"
+  remoteName={data.google}
+  error={data.error}
+  requireInvite={data.require_invite}
+  isDeleted={data.is_deleted}
+  ticket={data.ticket}
+  token={data.token}
+  user={data.user}
+  deletedAt={data.deleted_at}
+  selfDelete={data.self_delete}
+  deleteReason={data.delete_reason}
+  {linkAccount}
+  {signupForm}
+/>

frontend/src/routes/settings/auth/+page.svelte

@@ -21,7 +21,7 @@
   let canUnlink = false;
 
   $: canUnlink =
-    [data.user.discord, data.user.fediverse, data.user.tumblr]
+    [data.user.discord, data.user.fediverse, data.user.tumblr, data.user.google]
       .map<number>((entry) => (entry === null ? 0 : 1))
       .reduce((prev, current) => prev + current) >= 2;
 
@@ -41,6 +41,9 @@
   let tumblrUnlinkModalOpen = false;
   let toggleTumblrUnlinkModal = () => (tumblrUnlinkModalOpen = !tumblrUnlinkModalOpen);
 
+  let googleUnlinkModalOpen = false;
+  let toggleGoogleUnlinkModal = () => (googleUnlinkModalOpen = !googleUnlinkModalOpen);
+
   const fediLogin = async () => {
     fediDisabled = true;
     try {
@@ -88,6 +91,17 @@
       error = e as APIError;
     }
   };
+
+  const googleUnlink = async () => {
+    try {
+      const resp = await apiFetchClient<MeUser>("/auth/google/remove-provider", "POST");
+      data.user = resp;
+      addToast({ header: "Unlinked account", body: "Successfully unlinked Google account!" });
+      toggleGoogleUnlinkModal();
+    } catch (e) {
+      error = e as APIError;
+    }
+  };
 </script>
 
 <div>
@@ -162,6 +176,28 @@
         </CardBody>
       </Card>
     </div>
+    <div class="my-2">
+      <Card>
+        <CardBody>
+          <CardTitle>Google</CardTitle>
+          <CardText>
+            {#if data.user.google}
+              Your currently linked Google account is <b>{data.user.google_username}</b>
+              (<code>{data.user.google}</code>).
+            {:else}
+              You do not have a linked Google account.
+            {/if}
+          </CardText>
+          {#if data.user.google}
+            <Button color="danger" disabled={!canUnlink} on:click={toggleGoogleUnlinkModal}
+              >Unlink account</Button
+            >
+          {:else}
+            <Button color="secondary" href={data.urls.google}>Link account</Button>
+          {/if}
+        </CardBody>
+      </Card>
+    </div>
     <Modal header="Pick an instance" isOpen={fediLinkModalOpen} toggle={toggleFediLinkModal}>
       <ModalBody>
         <Input placeholder="Instance (e.g. mastodon.social)" bind:value={instance} />
@@ -243,5 +279,27 @@
         <Button color="secondary" on:click={toggleTumblrUnlinkModal}>Cancel</Button>
       </ModalFooter>
     </Modal>
+
+    <Modal
+      header="Unlink Google account"
+      isOpen={googleUnlinkModalOpen}
+      toggle={toggleGoogleUnlinkModal}
+    >
+      <ModalBody>
+        <p>
+          Are you sure you want to unlink your Google account? You will no longer be able to use it
+          to log in.
+        </p>
+        {#if error}
+          <div class="mt-2">
+            <ErrorAlert {error} />
+          </div>
+        {/if}
+      </ModalBody>
+      <ModalFooter>
+        <Button color="danger" on:click={googleUnlink}>Unlink account</Button>
+        <Button color="secondary" on:click={toggleGoogleUnlinkModal}>Cancel</Button>
+      </ModalFooter>
+    </Modal>
   </div>
 </div>