feat: create user on initial signup

src/components/UserMenu.tsx

@@ -1,3 +1,4 @@
+import { useRouter } from "next/navigation";
 import { Fragment } from "react";
 import Image from "next/image";
 import { Menu, Transition } from "@headlessui/react";
@@ -13,12 +14,15 @@ function classNames(...classes: string[]): string {
 }
 
 export default function UserMenu({ imageUrl, email }: UserMenuProps) {
+  const router = useRouter();
   const { theme, switchTheme } = useTheme();
 
   const handleLogout = async () => {
     const db = createClient();
 
     await db.auth.signOut();
+
+    router.push("/login");
   };
 
   return (
@@ -44,7 +48,7 @@ export default function UserMenu({ imageUrl, email }: UserMenuProps) {
               </svg>
             </span>
           )}
-          <span className="ml-2 truncate text-sm">{email}</span>
+          <span className="mx-2 truncate text-sm">{email}</span>
         </Menu.Button>
       </div>
 

src/components/dashboard.tsx

@@ -1,7 +1,10 @@
+import { api } from "~/utils/api";
 import SideNavigation from "./SideNavigation";
 import FeedbackButton from "./FeedbackButton";
 
 export default function Dashboard(props: { children: React.ReactNode }) {
+  const { data } = api.auth.getUser.useQuery();
+
   return (
     <div className="flex h-screen flex-col items-center bg-light-100 dark:bg-dark-50">
       <div className="m-auto flex h-16 w-full justify-between border-b border-light-600 px-5 py-2 align-middle dark:border-dark-600">
@@ -14,7 +17,7 @@ export default function Dashboard(props: { children: React.ReactNode }) {
       </div>
 
       <div className="flex h-full w-full">
-        <SideNavigation user={{ email: "henry_ball@hotmail.co.uk" }} />
+        <SideNavigation user={{ email: data?.email }} />
         <div className="w-full overflow-hidden">{props.children}</div>
       </div>
     </div>

src/pages/api/auth/confirm.ts

@@ -23,11 +23,29 @@ export default async function handler(
   let next = "/error";
 
   if (token_hash && type) {
-    const supabase = createNextClient(req, res);
+    const db = createNextClient(req, res);
-    const { error } = await supabase.auth.verifyOtp({
+    const { error, data } = await db.auth.verifyOtp({
       type: type as EmailOtpType,
       token_hash,
     });
+
+    console.log({ error });
+
+    if (data.user?.id) {
+      const user = await db
+        .from("user")
+        .select()
+        .eq("id", data.user.id)
+        .limit(1)
+        .maybeSingle();
+
+      if (!user.data) {
+        await db
+          .from("user")
+          .insert({ id: data.user.id, email: data.user.email ?? "" });
+      }
+    }
+
     if (error) {
       console.error(error);
     } else {

src/server/api/routers/auth.ts

@@ -1,10 +1,26 @@
 import { z } from "zod";
 
-import { createTRPCRouter, publicProcedure } from "~/server/api/trpc";
+import {
+  createTRPCRouter,
+  publicProcedure,
+  protectedProcedure,
+} from "~/server/api/trpc";
 
 import { env } from "~/env.mjs";
 
 export const authRouter = createTRPCRouter({
+  getUser: protectedProcedure.query(async ({ ctx }) => {
+    if (!ctx.user?.id) return;
+
+    const { data } = await ctx.db
+      .from("user")
+      .select(`id, name, email`)
+      .eq("id", ctx.user.id)
+      .limit(1)
+      .single();
+
+    return data;
+  }),
   login: publicProcedure
     .input(z.object({ email: z.string() }))
     .mutation(async ({ ctx, input }) => {