make t3 beautifiul again

apps/nextjs/next.config.mjs

@@ -6,7 +6,7 @@ import "@acme/auth/env"
 const config = {
   reactStrictMode: true,
   experimental: {
-    serverComponentsExternalPackages: ["oslo"],
+    serverComponentsExternalPackages: ["oslo", "@icons-pack/react-simple-icons"],
   },
   /** Enables hot reloading for local packages without a build step */
   transpilePackages: [

apps/nextjs/package.json

@@ -19,6 +19,7 @@
     "@acme/db": "workspace:*",
     "@acme/ui": "workspace:*",
     "@acme/validators": "workspace:*",
+    "@icons-pack/react-simple-icons": "9.3.0",
     "@t3-oss/env-nextjs": "0.7.3",
     "@tanstack/react-query": "5.17.15",
     "@tanstack/react-query-devtools": "5.17.15",
@@ -27,7 +28,7 @@
     "@trpc/next": "next",
     "@trpc/react-query": "next",
     "@trpc/server": "next",
-    "geist": "1.2.1",
+    "lucide-react": "^0.312.0",
     "next": "14.0.4",
     "react": "18.2.0",
     "react-dom": "18.2.0",

apps/nextjs/src/app/(authorized)/layout.tsx

@@ -0,0 +1,14 @@
+import { SiteHeader } from "@/components/site-header"
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <>
+      <SiteHeader />
+      {children}
+    </>
+  )
+}

apps/nextjs/src/app/page.tsx → apps/nextjs/src/app/(authorized)/page.tsx

@@ -1,10 +1,20 @@
 import { Suspense } from "react"
+import { redirect } from "next/navigation"
+
+import { auth } from "@acme/auth"
 
-import { AuthShowcase } from "@/components/auth-showcase"
 import { CreatePostForm, PostCardSkeleton, PostList } from "@/components/posts"
 import { api } from "@/trpc/server"
 
 export default async function HomePage() {
+  //await new Promise((resolve) => setTimeout(resolve, 5000))
+
+  const session = await auth()
+
+  if (!session.user) {
+    redirect("/auth")
+  }
+
   const posts = api.post.all()
 
   return (
@@ -13,7 +23,6 @@ export default async function HomePage() {
         <h1 className="text-5xl font-extrabold tracking-tight sm:text-[5rem]">
           Create <span className="text-primary">T3</span> Turbo
         </h1>
-        <AuthShowcase />
 
         <CreatePostForm />
         <div className="w-full max-w-2xl overflow-y-scroll">

apps/nextjs/src/app/(unauthorized)/auth/page.tsx

@@ -0,0 +1,75 @@
+import type { Metadata } from "next"
+import Link from "next/link"
+import { redirect } from "next/navigation"
+import { SiDiscord, SiGithub } from "@icons-pack/react-simple-icons"
+import { CommandIcon } from "lucide-react"
+
+import { auth, providers } from "@acme/auth"
+import { cn } from "@acme/ui"
+import { Button } from "@acme/ui/button"
+
+import { Logo } from "@/components/logo"
+
+export const metadata: Metadata = {
+  title: "Auth",
+}
+
+function SigninIcon({
+  iconName,
+  className,
+}: {
+  iconName: string
+  className?: string
+}) {
+  switch (iconName) {
+    case "github":
+      return <SiGithub className={cn("mr-1 h-4 w-4", className)} />
+    case "discord":
+      return <SiDiscord className={cn("mr-1 h-4 w-4", className)} />
+    default:
+      return <CommandIcon className={cn("mr-1 h-4 w-4", className)} />
+  }
+}
+
+export default async function AuthPage() {
+  const session = await auth()
+
+  if (session.user) {
+    redirect("/")
+  }
+
+  return (
+    <>
+      <div className="container relative  grid h-screen flex-col items-center justify-center lg:max-w-none lg:grid-cols-2 lg:px-0">
+        <div className="relative hidden h-full flex-col bg-muted p-10 dark:border-r dark:text-white lg:flex">
+          <div className="absolute inset-0 bg-zinc-200 dark:bg-zinc-900" />
+          <Logo />
+        </div>
+
+        <div className="lg:p-8">
+          <div className="mx-auto flex  w-[350px] flex-col justify-center space-y-6">
+            <div className="flex flex-col space-y-2 text-center">
+              <div className="mb-10 flex justify-center lg:hidden">
+                <Logo />
+              </div>
+              <h1 className="mb-4 text-2xl font-semibold tracking-tight">
+                Sign in with
+              </h1>
+
+              {Object.entries(providers).map(
+                ([providerKey, provider], index) => (
+                  <Button variant="outline" type="button" asChild key={index}>
+                    <Link href={`/api/auth/${providerKey}/login`}>
+                      <SigninIcon iconName={providerKey} />
+                      {provider.name}
+                    </Link>
+                  </Button>
+                ),
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}

apps/nextjs/src/app/_loading.tsx

@@ -0,0 +1,5 @@
+import { Spinner } from "../components/spinner"
+
+export default function Loading() {
+  return <Spinner />
+}

apps/nextjs/src/app/layout.tsx

@@ -1,8 +1,7 @@
 import type { Metadata, Viewport } from "next"
-import { GeistMono } from "geist/font/mono"
-import { GeistSans } from "geist/font/sans"
 
 import { cn } from "@acme/ui"
+import { TailwindIndicator } from "@acme/ui/tailwind-indicator"
 import { ThemeProvider, ThemeToggle } from "@acme/ui/theme"
 import { Toaster } from "@acme/ui/toast"
 
@@ -11,8 +10,8 @@ import { TRPCReactProvider } from "@/trpc/react"
 import "@/app/globals.css"
 
 export const metadata: Metadata = {
-  title: "Create T3 Turbo",
-  description: "Simple monorepo with shared backend for web & mobile apps",
+  title: "T3-Turbo-Lucia",
+  description: "Simple monorepo with drizzle and lucia auth",
 }
 
 export const viewport: Viewport = {
@@ -22,21 +21,22 @@ export const viewport: Viewport = {
   ],
 }
 
-export default function RootLayout(props: { children: React.ReactNode }) {
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
   return (
     <html lang="en" suppressHydrationWarning>
       <body
         className={cn(
           "min-h-screen bg-background font-sans text-foreground antialiased",
-          GeistSans.variable,
-          GeistMono.variable,
         )}
       >
         <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
-          <TRPCReactProvider>{props.children}</TRPCReactProvider>
-          <div className="absolute bottom-4 right-4">
-            <ThemeToggle />
-          </div>
+          <TRPCReactProvider>{children}</TRPCReactProvider>
+          <TailwindIndicator />
+
           <Toaster />
         </ThemeProvider>
       </body>

apps/nextjs/src/components/logo.tsx

@@ -0,0 +1,17 @@
+import { CommandIcon } from "lucide-react"
+
+import { cn } from "@acme/ui"
+
+export function Logo({ className }: { className?: string }) {
+  return (
+    <div
+      className={cn(
+        "relative flex items-center text-lg font-medium",
+        className,
+      )}
+    >
+      <CommandIcon className="mr-1" />
+      Acme Inc
+    </div>
+  )
+}

apps/nextjs/src/components/site-header.tsx

@@ -0,0 +1,28 @@
+import Link from "next/link"
+
+import { ThemeToggle } from "@acme/ui/theme"
+
+import { Logo } from "@/components/logo"
+import { UserMenu } from "@/components/user-menu"
+
+export function SiteHeader() {
+  return (
+    <header className=" sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+      <div className="container">
+        <nav
+          className="mx-auto flex items-center justify-between "
+          aria-label="Global"
+        >
+          <Link href="/" className="-m-1.5 p-1.5">
+            <Logo className="h-16" />
+          </Link>
+
+          <div className="hidden gap-1 lg:flex">
+            <UserMenu />
+            <ThemeToggle />
+          </div>
+        </nav>
+      </div>
+    </header>
+  )
+}

apps/nextjs/src/components/spinner.tsx

@@ -0,0 +1,14 @@
+import { Loader2Icon } from "lucide-react"
+
+export function Spinner() {
+  return (
+    <div className="container relative  grid h-screen flex-col items-center justify-center ">
+      <div className="mx-auto flex  w-[350px] flex-col justify-center space-y-6 ">
+        <div className="flex items-center space-x-4">
+          <Loader2Icon className="animate-spin" />
+          Loading...
+        </div>
+      </div>
+    </div>
+  )
+}

apps/nextjs/src/components/user-menu.tsx

@@ -0,0 +1,52 @@
+import Link from "next/link"
+import { UserIcon } from "lucide-react"
+
+import { auth } from "@acme/auth"
+import { Button } from "@acme/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@acme/ui/dropdown-menu"
+
+import { logoutAction } from "@/actions/logout"
+
+export async function UserMenu() {
+  const session = await auth()
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" size="icon">
+          <UserIcon />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-56" align="end" forceMount>
+        <DropdownMenuLabel className="font-normal">
+          <div className="flex flex-col space-y-1">
+            <p className="text-sm font-medium leading-none">
+              Hello {session.user?.name}
+            </p>
+          </div>
+        </DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuGroup>
+          <DropdownMenuItem>
+            <Link href="/users/settings">Settings</Link>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+
+        <form action={logoutAction}>
+          <DropdownMenuItem>
+            <button>Sign out</button>
+          </DropdownMenuItem>
+        </form>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}

apps/nextjs/src/trpc/react.tsx

@@ -40,7 +40,7 @@ export function TRPCReactProvider(props: { children: React.ReactNode }) {
       <api.Provider client={trpcClient} queryClient={queryClient}>
         {props.children}
       </api.Provider>
-      <ReactQueryDevtools />
+      <ReactQueryDevtools buttonPosition="bottom-left" />
     </QueryClientProvider>
   )
 }

apps/nextjs/tailwind.config.ts

@@ -1,5 +1,4 @@
 import type { Config } from "tailwindcss"
-import { fontFamily } from "tailwindcss/defaultTheme"
 
 import baseConfig from "@acme/tailwind-config"
 
@@ -8,12 +7,4 @@ export default {
   // those classes are included correctly.
   content: [...baseConfig.content, "../../packages/ui/**/*.{ts,tsx}"],
   presets: [baseConfig],
-  theme: {
-    extend: {
-      fontFamily: {
-        sans: ["var(--font-geist-sans)", ...fontFamily.sans],
-        mono: ["var(--font-geist-mono)", ...fontFamily.mono],
-      },
-    },
-  },
 } satisfies Config

packages/auth/src/providers/discord.ts

@@ -13,6 +13,8 @@ const discord = new Discord(
   "http://localhost:3000/api/auth/discord/callback",
 )
 
+export const name = "Discord"
+
 export const getAuthorizationUrl = async (state: string) => {
   return await discord.createAuthorizationURL(state, {
     scopes: [OAuth2Scopes.Identify, OAuth2Scopes.Email],

packages/auth/src/providers/github.ts

@@ -8,6 +8,7 @@ import { env } from "../../env.mjs"
 
 const github = new GitHub(env.AUTH_GITHUB_ID, env.AUTH_GITHUB_SECRET)
 
+export const name = "Github"
 export const getAuthorizationUrl = async (state: string) => {
   return await github.createAuthorizationURL(state, {
     scopes: ["read:user", "user:email"],