refactor project and sign in (#1552)

* refactor: restructure files

* chore: add env variable validation

* chore: remove ignored .env file

* fix: add dynamic url sign message

* chore: remove log

* chore: fix missing dialog description warning

* test: add me endpoint as test

* ci: reload husky

* chore: only include colon if port is present

.gitignore

@@ -22,6 +22,7 @@ yarn-debug.log*
 yarn-error.log*
 
 # local env files
+.env
 .env.local
 .env.development.local
 .env.test.local

package.json

@@ -19,6 +19,7 @@
     "@radix-ui/react-focus-scope": "^1.1.0",
     "@radix-ui/react-scroll-area": "^1.2.1",
     "@radix-ui/react-slot": "^1.1.0",
+    "@t3-oss/env-nextjs": "^0.11.1",
     "@tanstack/react-query": "^5.60.2",
     "autoprefixer": "^10.4.20",
     "class-variance-authority": "^0.7.0",

src/app/actions/auth.ts → src/actions/auth.ts

@@ -1,6 +1,7 @@
 "use server";
 
-import { GUILD_AUTH_COOKIE_NAME } from "app/config/constants";
+import { GUILD_AUTH_COOKIE_NAME } from "@/config/constants";
+import { env } from "@/lib/env";
 import { cookies } from "next/headers";
 import { redirect } from "next/navigation";
 import { z } from "zod";
@@ -33,13 +34,13 @@ export const signIn = async ({
   } satisfies RequestInit;
 
   const signInRes = await fetch(
-    `${process.env.NEXT_PUBLIC_API}/auth/siwe/login`,
+    `${env.NEXT_PUBLIC_API}/auth/siwe/login`,
     requestInit,
   );
 
   if (signInRes.status === 401) {
     const registerRes = await fetch(
-      `${process.env.NEXT_PUBLIC_API}/auth/siwe/register`,
+      `${env.NEXT_PUBLIC_API}/auth/siwe/register`,
       requestInit,
     );
     const json = await registerRes.json();

src/actions/me.ts

@@ -0,0 +1,14 @@
+"use server";
+
+import { GUILD_AUTH_COOKIE_NAME } from "@/config/constants";
+import { env } from "@/lib/env";
+import { cookies } from "next/headers";
+
+export async function me() {
+  const token = (await cookies()).get(GUILD_AUTH_COOKIE_NAME);
+  const response = await fetch(`${env.NEXT_PUBLIC_API}/auth/me`, {
+    headers: { "X-Auth-Token": token?.value || "" },
+  });
+
+  return response.json();
+}

src/app/explorer/components/GuildCard.tsx

@@ -1,6 +1,6 @@
+import { Badge } from "@/components/ui/Badge";
+import { Card } from "@/components/ui/Card";
 import { ImageSquare, Users } from "@phosphor-icons/react/dist/ssr";
-import { Badge } from "app/components/ui/Badge";
-import { Card } from "app/components/ui/Card";
 import Link from "next/link";
 
 export const GuildCard = () => {

src/app/layout.tsx

@@ -1,10 +1,10 @@
 import type { Metadata } from "next";
-import "./globals.css";
-import { Providers } from "components/Providers";
-import { dystopian, inter } from "fonts";
+import "@/styles/globals.css";
+import { Header } from "@/components/Header";
+import { Providers } from "@/components/Providers";
+import { SignInDialog } from "@/components/SignInDialog";
+import { dystopian, inter } from "@/lib/fonts";
 import { cn } from "lib/cssUtils";
-import { Header } from "./components/Header";
-import { SignInDialog } from "./components/SignInDialog";
 
 export const metadata: Metadata = {
   title: "Guildhall",

src/app/components/Header.tsx → src/components/Header.tsx

@@ -1,13 +1,19 @@
+import { me } from "@/actions/me";
 import { AuthBoundary } from "./AuthBoundary";
 import { SignInButton } from "./SignInButton";
 import { SignOutButton } from "./SignOutButton";
+import { Button } from "./ui/Button";
 import { Card } from "./ui/Card";
 
 export const Header = () => (
   <header className="flex h-14 items-center justify-between gap-4 p-2">
     {/* TODO: NavMenu component */}
     <Card className="h-10 w-24 rounded-xl" />
 
+    <form action={me}>
+      <Button type="submit">me (test auth)</Button>
+    </form>
+
     <AuthBoundary fallback={<SignInButton />}>
       <SignOutButton />
     </AuthBoundary>

src/components/Providers.tsx

@@ -1,7 +1,7 @@
 "use client";
 
+import { wagmiConfig } from "@/config/wagmi";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { wagmiConfig } from "app/config/wagmi";
 import { ThemeProvider } from "next-themes";
 import type { FunctionComponent, PropsWithChildren } from "react";
 import { WagmiProvider } from "wagmi";

src/app/components/SignInButton.tsx → src/components/SignInButton.tsx

@@ -1,7 +1,7 @@
 "use client";
 
+import { signInDialogOpenAtom } from "@/config/atoms";
 import { SignIn } from "@phosphor-icons/react/dist/ssr";
-import { signInDialogOpenAtom } from "app/config/atoms";
 import { useSetAtom } from "jotai";
 import { Button } from "./ui/Button";
 import { Card } from "./ui/Card";

src/app/components/SignInDialog.tsx → src/components/SignInDialog.tsx

@@ -1,9 +1,11 @@
 "use client";
 
+import { signIn } from "@/actions/auth";
+import { signInDialogOpenAtom } from "@/config/atoms";
+import { env } from "@/lib/env";
 import { SignIn, User, Wallet } from "@phosphor-icons/react/dist/ssr";
+import { DialogDescription } from "@radix-ui/react-dialog";
 import { useMutation } from "@tanstack/react-query";
-import { signIn } from "app/actions/auth";
-import { signInDialogOpenAtom } from "app/config/atoms";
 import { useAtom, useSetAtom } from "jotai";
 import { shortenHex } from "lib/shortenHex";
 import { createSiweMessage } from "viem/siwe";
@@ -28,6 +30,7 @@ export const SignInDialog = () => {
         <ResponsiveDialogHeader>
           <ResponsiveDialogTitle>Sign in</ResponsiveDialogTitle>
         </ResponsiveDialogHeader>
+        <DialogDescription />
 
         <ResponsiveDialogBody>
           {isConnected ? <SignInWithEthereum /> : <WalletList />}
@@ -83,18 +86,22 @@ const SignInWithEthereum = () => {
   const { mutate: signInWithEthereum, isPending } = useMutation({
     mutationKey: ["SIWE"],
     mutationFn: async () => {
-      const { nonce } = await fetch(
-        `${process.env.NEXT_PUBLIC_API}/auth/siwe/nonce`,
-      )
+      const { nonce } = await fetch(`${env.NEXT_PUBLIC_API}/auth/siwe/nonce`)
         .then((res) => res.json())
         .then((data) => z.object({ nonce: z.string() }).parse(data));
+      const urlHostname = [
+        new URL(env.NEXT_PUBLIC_URL).hostname,
+        window.location.port,
+      ]
+        .filter(Boolean)
+        .join(":");
 
       const message = createSiweMessage({
         address: address!,
         chainId: 1,
-        domain: "localhost:3000",
+        domain: urlHostname,
         nonce,
-        uri: "localhost:3000",
+        uri: urlHostname,
         version: "1",
       });
 

src/app/components/SignOutButton.tsx → src/components/SignOutButton.tsx

@@ -1,7 +1,7 @@
 "use client";
 
+import { signOut } from "@/actions/auth";
 import { SignOut } from "@phosphor-icons/react/dist/ssr";
-import { signOut } from "app/actions/auth";
 import { usePathname } from "next/navigation";
 import { Button } from "./ui/Button";
 

src/lib/env.ts

@@ -0,0 +1,17 @@
+import { createEnv } from "@t3-oss/env-nextjs";
+import { z } from "zod";
+
+export const env = createEnv({
+  server: {},
+  client: {
+    NEXT_PUBLIC_API: z.string(),
+    NEXT_PUBLIC_URL: z.string(),
+  },
+  runtimeEnv: {
+    NEXT_PUBLIC_API: process.env.NEXT_PUBLIC_API,
+    NEXT_PUBLIC_URL:
+      process.env.NODE_ENV === "production"
+        ? process.env.NEXT_PUBLIC_URL
+        : "http://localhost",
+  },
+});

src/fonts.ts → src/lib/fonts.ts

@@ -11,21 +11,21 @@ const inter = Inter({
 const dystopian = localFont({
   src: [
     {
-      path: "../public/fonts/Dystopian-Light.woff2",
+      path: "../../public/fonts/Dystopian-Light.woff2",
       weight: "300",
       style: "normal",
     },
     {
-      path: "../public/fonts/Dystopian-Regular.woff2",
+      path: "../../public/fonts/Dystopian-Regular.woff2",
       style: "normal",
     },
     {
-      path: "../public/fonts/Dystopian-Bold.woff2",
+      path: "../../public/fonts/Dystopian-Bold.woff2",
       weight: "600",
       style: "normal",
     },
     {
-      path: "../public/fonts/Dystopian-Black.woff2",
+      path: "../../public/fonts/Dystopian-Black.woff2",
       weight: "700",
       style: "normal",
     },

src/stories/Badge.stories.tsx

@@ -1,5 +1,5 @@
+import { Badge, type BadgeProps } from "@/components/ui/Badge";
 import type { Meta, StoryObj } from "@storybook/react";
-import { Badge, type BadgeProps } from "app/components/ui/Badge";
 
 const meta: Meta<typeof Badge> = {
   title: "Design system/Badge",

src/stories/Button.stories.tsx

@@ -1,6 +1,6 @@
+import { Button, type ButtonProps } from "@/components/ui/Button";
 import { CircleDashed } from "@phosphor-icons/react/dist/ssr";
 import type { Meta, StoryObj } from "@storybook/react";
-import { Button, type ButtonProps } from "app/components/ui/Button";
 
 type ButtonExampleProps = Omit<ButtonProps, "leftIcon" | "rightIcon"> & {
   leftIcon?: boolean;

src/stories/Dialog.stories.tsx

@@ -1,4 +1,3 @@
-import type { Meta, StoryObj } from "@storybook/react";
 import {
   Dialog,
   DialogBody,
@@ -9,7 +8,8 @@ import {
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-} from "app/components/ui/Dialog";
+} from "@/components/ui/Dialog";
+import type { Meta, StoryObj } from "@storybook/react";
 
 import type { ComponentProps } from "react";
 

src/stories/Drawer.stories.tsx

@@ -1,5 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { Button } from "app/components/ui/Button";
+import { Button } from "@/components/ui/Button";
 import {
   Drawer,
   DrawerClose,
@@ -8,7 +7,8 @@ import {
   DrawerHeader,
   DrawerTitle,
   DrawerTrigger,
-} from "app/components/ui/Drawer";
+} from "@/components/ui/Drawer";
+import type { Meta, StoryObj } from "@storybook/react";
 
 const DrawerExample = () => (
   <Drawer>

src/stories/ResponsiveDialog.stories.tsx

@@ -1,6 +1,5 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { Button } from "app/components/ui/Button";
-import type { DialogContentProps } from "app/components/ui/Dialog";
+import { Button } from "@/components/ui/Button";
+import type { DialogContentProps } from "@/components/ui/Dialog";
 import {
   ResponsiveDialog,
   ResponsiveDialogBody,
@@ -10,7 +9,8 @@ import {
   ResponsiveDialogHeader,
   ResponsiveDialogTitle,
   ResponsiveDialogTrigger,
-} from "app/components/ui/ResponsiveDialog";
+} from "@/components/ui/ResponsiveDialog";
+import type { Meta, StoryObj } from "@storybook/react";
 
 import type { ComponentProps } from "react";
 

tsconfig.json

@@ -28,7 +28,7 @@
     ],
     "strictNullChecks": true,
     "paths": {
-      "@/*": ["./src/*"]
+      "@/*": ["./*"]
     }
   },
   "include": [