Feat: Integrate Auth (supabase) + UI user pages

.gitignore

@@ -42,5 +42,4 @@ yarn-debug.log*
 yarn-error.log*
 .pnpm-debug.log*
 
-.cursor/mcp.json
-
+.cursor

README.md

@@ -32,6 +32,12 @@ The main goal is to provide a better way to explore tech companies in Portugal.
 - [Turbo](https://turbo.build/) - Monorepo build system
 - [Vercel](https://vercel.com/) - Hosting and CI/CD
 - [PostHog](https://posthog.com/) - Analytics (replaces [OpenPanel](https://openpanel.dev/) due to removal of free tier)
+- [Supabase](https://supabase.com/) - Auth, DB, MCP
+
+## Roadmap 🛣️
+
+- [ ] Notification jobs
+- [ ] Move some logic to dedicated packages (e.g. emails, parsing, etc)
 
 ## How to contribute 🤝
 

apps/web/.env.example

@@ -1,3 +1,6 @@
 # For turbo builds, prefixes with NEXT_PUBLIC_ are automatically considered to force a rebuild
 NEXT_PUBLIC_POSTHOG_KEY=
-NEXT_PUBLIC_POSTHOG_HOST=
+NEXT_PUBLIC_POSTHOG_HOST=
+NEXT_PUBLIC_SUPABASE_URL=
+# Make sure to enable RLS and policies to use this key in client
+NEXT_PUBLIC_SUPABASE_ANON_KEY=

apps/web/package.json

@@ -6,19 +6,29 @@
     "dev": "next dev --turbopack",
     "build": "next build",
     "start": "next start",
-    "lint": "biome check . --write",
+    "lint": "biome check . --write --unsafe",
     "format": "biome format --write .",
     "check-types": "tsc --noEmit",
     "clean": "git clean -xdf .next .turbo node_modules playwright-report test-results",
     "test": "echo 'No tests to run'",
     "test:e2e": "start-server-and-test start http://localhost:3000 'playwright test'",
-    "test:e2e:ui": "start-server-and-test start http://localhost:3000 'playwright test --ui'"
+    "test:e2e:ui": "start-server-and-test start http://localhost:3000 'playwright test --ui'",
+    "db:types": "dotenv -e .env.local npx supabase gen types typescript --project-id '$PROJECT_REF' --schema public > ./src/lib/supabase/database.types.ts"
   },
   "dependencies": {
+    "@hookform/resolvers": "5.2.1",
+    "@radix-ui/react-alert-dialog": "1.1.15",
+    "@radix-ui/react-avatar": "1.1.10",
     "@radix-ui/react-collapsible": "1.1.11",
+    "@radix-ui/react-dialog": "1.1.15",
+    "@radix-ui/react-dropdown-menu": "2.1.15",
     "@radix-ui/react-label": "2.1.7",
     "@radix-ui/react-select": "2.2.5",
     "@radix-ui/react-slot": "1.2.3",
+    "@radix-ui/react-tabs": "1.1.12",
+    "@supabase/ssr": "0.6.1",
+    "@supabase/supabase-js": "2.52.0",
+    "@tanstack/react-query": "5.84.1",
     "@tech-companies-portugal/analytics": "*",
     "cheerio": "1.0.0-rc.12",
     "class-variance-authority": "0.7.1",
@@ -32,12 +42,14 @@
     "react": "19.1.1",
     "react-countup": "6.5.3",
     "react-dom": "19.1.1",
+    "react-hook-form": "7.62.0",
     "recharts": "2.15.0",
     "sharp": "0.33.2",
     "slugify": "1.6.6",
+    "sonner": "2.0.7",
     "tailwind-merge": "2.2.1",
     "tailwindcss-animate": "1.0.7",
-    "use-debounce": "10.0.4"
+    "zod": "4.0.14"
   },
   "devDependencies": {
     "@playwright/test": "1.50.0",
@@ -47,6 +59,7 @@
     "@types/react": "19.1.1",
     "@types/react-dom": "19.1.1",
     "autoprefixer": "^10.0.1",
+    "dotenv-cli": "10.0.0",
     "postcss": "^8",
     "start-server-and-test": "2.0.10",
     "tailwindcss": "^3.3.0",

apps/web/src/app/api/auth/callback/route.ts

@@ -0,0 +1,20 @@
+import { createClient } from "@/lib/supabase/server";
+import { NextResponse } from "next/server";
+
+export async function GET(request: Request) {
+  const { searchParams, origin } = new URL(request.url);
+  const code = searchParams.get("code");
+  const next = searchParams.get("next") ?? "/";
+
+  if (code) {
+    const supabase = await createClient();
+    const { error } = await supabase.auth.exchangeCodeForSession(code);
+
+    if (error) {
+      console.error("Error exchanging code for session:", error);
+      return NextResponse.redirect(`${origin}/auth/auth-code-error`);
+    }
+  }
+
+  return NextResponse.redirect(`${origin}${next}`);
+}

apps/web/src/app/api/delete-user/route.ts

@@ -0,0 +1,41 @@
+import { createAdminClient, createClient } from "@/lib/supabase/server";
+import { NextResponse } from "next/server";
+
+export async function POST() {
+  try {
+    const supabase = await createClient();
+    const { data } = await supabase.auth.getClaims();
+
+    const user = data?.claims;
+
+    if (!user) {
+      return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+    }
+
+    const supabaseAdmin = await createAdminClient();
+
+    try {
+      const { data: files, error: listError } = await supabaseAdmin.storage
+        .from("avatars")
+        .list(user.sub);
+
+      if (!listError && files && files.length > 0) {
+        const pathsToRemove = files.map((f) => `${user.sub}/${f.name}`);
+        await supabaseAdmin.storage.from("avatars").remove(pathsToRemove);
+      }
+    } catch {}
+
+    const { error } = await supabaseAdmin.auth.admin.deleteUser(user.sub);
+
+    if (error) {
+      return NextResponse.json({ error: error.message }, { status: 400 });
+    }
+
+    return new Response(null, { status: 204 });
+  } catch (err: unknown) {
+    return NextResponse.json(
+      { error: err instanceof Error ? err.message : "Internal server error" },
+      { status: 500 },
+    );
+  }
+}

apps/web/src/app/api/og/_utils.ts

@@ -12,7 +12,7 @@ export async function loadGoogleFont(font: string, text: string) {
 
   if (resource?.[1]) {
     const response = await fetch(resource[1]);
-    if (response.status == 200) {
+    if (response.status === 200) {
       return await response.arrayBuffer();
     }
   }

apps/web/src/app/api/og/route.tsx

@@ -119,7 +119,7 @@ export async function GET(request: Request) {
       },
     );
   } catch (e) {
-    return new Response(`Failed to generate the og image`, {
+    return new Response("Failed to generate the og image", {
       status: 500,
     });
   }

apps/web/src/app/category/[category]/layout.tsx

@@ -1,6 +1,5 @@
 import Footer from "@/components/Footer";
 import type { LayoutProps } from "@/lib/types";
-import { Suspense } from "react";
 
 export default function CategoryPageLayout({ children }: LayoutProps) {
   return (

apps/web/src/app/category/sitemap.ts

@@ -6,7 +6,7 @@ export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
   const { availableCategories, updatedAtISODate } =
     await getParsedCompaniesData();
 
-  let categoriesRoutes = availableCategories.map((category) => ({
+  const categoriesRoutes = availableCategories.map((category) => ({
     url: `${APP_URL}/category/${category}`,
     lastModified: updatedAtISODate,
   }));

apps/web/src/app/company/[slug]/page.tsx

@@ -30,7 +30,7 @@ export async function generateMetadata({
   params,
 }: {
   params: NextParams<{ slug: string }>;
-}): Promise<Metadata | void> {
+}): Promise<Metadata | undefined> {
   const { slug } = await params;
 
   const company = await getParsedCompanyBySlug(slug);
@@ -124,7 +124,6 @@ export default async function CompanyPage({
     </div>
   );
 }
-
 const LinkUrlButton = ({
   url,
   icon,
@@ -144,7 +143,7 @@ const LinkUrlButton = ({
       className="h-8 px-2 text-xs text-foreground"
       asChild
     >
-      <a href={url} target="_blank" rel="noopener">
+      <a href={url} target="_blank" rel="noreferrer noopener">
         <div className="flex items-center gap-1">
           {icon}
           {label}

apps/web/src/app/company/sitemap.ts

@@ -5,7 +5,7 @@ import type { MetadataRoute } from "next";
 export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
   const { companies, updatedAtISODate } = await getParsedCompaniesData();
 
-  let companiesRoutes = companies.map((company) => ({
+  const companiesRoutes = companies.map((company) => ({
     url: `${APP_URL}/company/${company.slug}`,
     lastModified: updatedAtISODate,
   }));

apps/web/src/app/error.tsx

@@ -2,7 +2,7 @@
 
 import { EmptyState } from "@/components/EmptyState";
 
-export default function Error() {
+export default function ErrorPage() {
   return (
     <EmptyState
       title="Something went wrong"

apps/web/src/app/layout.tsx

@@ -12,6 +12,9 @@ import { cn } from "@/lib/utils";
 import type { Metadata, Viewport } from "next/types";
 import { NuqsAdapter } from "nuqs/adapters/next/app";
 import "./globals.css";
+
+import CustomQueryClientProvider from "@/components/CustomQueryClientProvider";
+import { Toaster } from "@/components/ui/sonner";
 import { AnalyticsProvider } from "@tech-companies-portugal/analytics/client";
 
 export const metadata: Metadata = {
@@ -44,17 +47,20 @@ export default function RootLayout({ children }: LayoutProps) {
           GeistMono.variable,
         )}
       >
-        <AnalyticsProvider>
-          <NuqsAdapter>
-            <Navbar />
-            {children}
-            <DotPattern
-              className={cn(
-                "[mask-image:radial-gradient(620px_circle_at_center,white,transparent)] fixed inset-0 -z-10",
-              )}
-            />
-          </NuqsAdapter>
-        </AnalyticsProvider>
+        <CustomQueryClientProvider>
+          <AnalyticsProvider>
+            <NuqsAdapter>
+              <Navbar />
+              {children}
+              <DotPattern
+                className={cn(
+                  "[mask-image:radial-gradient(620px_circle_at_center,white,transparent)] fixed inset-0 -z-10",
+                )}
+              />
+            </NuqsAdapter>
+          </AnalyticsProvider>
+        </CustomQueryClientProvider>
+        <Toaster />
       </body>
     </html>
   );

apps/web/src/app/location/[location]/layout.tsx

@@ -1,7 +1,5 @@
 import Footer from "@/components/Footer";
-import { Skeleton } from "@/components/ui/skeleton";
 import type { LayoutProps } from "@/lib/types";
-import { Suspense } from "react";
 
 export default function LocationPageLayout({ children }: LayoutProps) {
   return (

apps/web/src/app/location/sitemap.ts

@@ -6,7 +6,7 @@ export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
   const { availableLocations, updatedAtISODate } =
     await getParsedCompaniesData();
 
-  let locationsRoutes = availableLocations.map((location) => ({
+  const locationsRoutes = availableLocations.map((location) => ({
     url: `${APP_URL}/location/${location}`,
     lastModified: updatedAtISODate,
   }));

apps/web/src/app/login/page.tsx

@@ -0,0 +1,77 @@
+import { GithubLogin } from "@/components/GithubLogin";
+import { GoHomeLoginButton } from "@/components/GoHomeLoginButton";
+import { RetroContainer } from "@/components/ui/retro-container";
+import {
+  APP_URL,
+  defaultMetadata,
+  defaultOpenGraphMetadata,
+  defaultTwitterMetadata,
+} from "@/lib/metadata";
+import Image from "next/image";
+import type { Metadata } from "next/types";
+import { Suspense } from "react";
+import logo from "../../../public/assets/images/logo.png";
+
+const title = "Login | Tech Companies Portugal";
+const description =
+  "Sign in to your account and join the Portuguese tech community. Access company profiles, discover career opportunities, and stay updated with the latest tech companies in Portugal.";
+const keywords =
+  "login, sign in, Portuguese tech community, tech companies Portugal, careers, account access";
+
+export const metadata: Metadata = {
+  ...defaultMetadata,
+  title,
+  description,
+  keywords,
+  alternates: {
+    canonical: `${APP_URL}/login`,
+  },
+  openGraph: {
+    ...defaultOpenGraphMetadata,
+    title,
+    description,
+    url: `${APP_URL}/login`,
+    images: [`api/og?title=${title}&description=${description}`],
+  },
+  twitter: {
+    ...defaultTwitterMetadata,
+    title,
+    description,
+    images: [`api/og?title=${title}&description=${description}`],
+  },
+};
+
+export default function LoginPage() {
+  return (
+    <div className="bg-transparent flex-1 flex items-center justify-center p-4">
+      <div className="w-full max-w-md space-y-6">
+        <Suspense fallback={null}>
+          <GoHomeLoginButton />
+        </Suspense>
+        <RetroContainer className="p-6">
+          <div className="space-y-4">
+            <div className="flex items-center justify-center">
+              <Image
+                src={logo}
+                alt="Tech Companies Portugal Logo"
+                width={50}
+                height={50}
+              />
+            </div>
+            <div className="text-center">
+              <p className="text-muted-foreground">
+                Join the community and be up to date with the latest tech
+                companies in Portugal.
+              </p>
+            </div>
+
+            <div className="space-y-3">
+              <GithubLogin />
+              {/* <GoogleLogin /> */}
+            </div>
+          </div>
+        </RetroContainer>
+      </div>
+    </div>
+  );
+}

apps/web/src/app/settings/page.tsx

@@ -0,0 +1,11 @@
+import { Settings } from "@/components/settings";
+
+export default function SettingsPage() {
+  // let's keep this page here for SSR, possibly to prefech some data on the server side, suspense queries etc.
+
+  return (
+    <>
+      <Settings />
+    </>
+  );
+}

apps/web/src/app/sitemap.ts

@@ -2,7 +2,7 @@ import { APP_URL } from "@/lib/metadata";
 import type { MetadataRoute } from "next/types";
 
 export default function sitemap(): MetadataRoute.Sitemap {
-  let routes = [""].map((route) => ({
+  const routes = [""].map((route) => ({
     url: `${APP_URL}${route}`,
     lastModified: new Date().toISOString(),
   }));