ta_data_mas 0.0.2

package/apps/web/src/features/project-auth/project-auth-providers.tsx

@@ -0,0 +1,222 @@
+"use client";
+
+import { useState, useTransition } from "react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import type { ProjectOAuthSettings } from "@apiDatabase/types";
+import { ChevronRight, Mail } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+function GithubIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      aria-hidden
+    >
+      <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+    </svg>
+  );
+}
+
+type ProviderId = "email" | "google" | "github";
+
+const providers: Array<{
+  id: ProviderId;
+  name: string;
+  icon: React.ReactNode;
+}> = [
+  { id: "email", name: "Email", icon: <Mail className="size-5" /> },
+  {
+    id: "google",
+    name: "Google",
+    icon: <span className="text-base font-semibold text-blue-600">G</span>,
+  },
+  { id: "github", name: "GitHub", icon: <GithubIcon className="size-5" /> },
+];
+
+function isProviderEnabled(
+  id: ProviderId,
+  settings: ProjectOAuthSettings,
+): boolean {
+  if (id === "email") return true;
+  if (id === "google") return Boolean(settings.googleClientId);
+  return Boolean(settings.githubClientId);
+}
+
+export function ProjectAuthProviders({
+  orgSlug,
+  projectSlug,
+  initialSettings,
+}: {
+  orgSlug: string;
+  projectSlug: string;
+  initialSettings: ProjectOAuthSettings;
+}) {
+  const [isPending, startTransition] = useTransition();
+  const [settings, setSettings] =
+    useState<ProjectOAuthSettings>(initialSettings);
+  const [selected, setSelected] = useState<ProviderId | null>(null);
+  const [message, setMessage] = useState<string | null>(null);
+
+  function save() {
+    setMessage(null);
+    startTransition(async () => {
+      const res = await fetch(
+        `${process.env.NEXT_PUBLIC_API_URL}/orgs/${orgSlug}/projects/${projectSlug}/auth/settings`,
+        {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          credentials: "include",
+          body: JSON.stringify(settings),
+        },
+      );
+
+      if (!res.ok) {
+        setMessage("Save failed");
+        return;
+      }
+
+      setMessage("Saved");
+    });
+  }
+
+  return (
+    <div className="space-y-6 p-6">
+      <div>
+        <h1 className="text-2xl font-medium">Sign In / Providers</h1>
+        <p className="mt-1 text-sm text-muted-foreground">
+          Configure authentication providers for this project.
+        </p>
+      </div>
+
+      <div className="rounded-lg border divide-y">
+        {providers.map((provider) => {
+          const enabled = isProviderEnabled(provider.id, settings);
+          const isOpen = selected === provider.id;
+
+          return (
+            <div key={provider.id}>
+              <button
+                type="button"
+                onClick={() => setSelected(isOpen ? null : provider.id)}
+                className="flex w-full items-center gap-4 px-4 py-4 text-left hover:bg-muted/40"
+              >
+                <div className="flex size-9 items-center justify-center rounded-md border bg-background">
+                  {provider.icon}
+                </div>
+                <div className="min-w-0 flex-1">
+                  <p className="font-medium">{provider.name}</p>
+                </div>
+                <Badge
+                  variant={enabled ? "default" : "secondary"}
+                  className={cn(
+                    enabled && "bg-emerald-600 text-white hover:bg-emerald-600",
+                  )}
+                >
+                  {enabled ? "Enabled" : "Disabled"}
+                </Badge>
+                <ChevronRight
+                  className={cn(
+                    "size-4 text-muted-foreground transition-transform",
+                    isOpen && "rotate-90",
+                  )}
+                />
+              </button>
+
+              {isOpen && provider.id === "email" && (
+                <div className="border-t bg-muted/20 px-4 py-4 text-sm text-muted-foreground">
+                  Email + password and magic link are always enabled for this
+                  project. No extra configuration needed.
+                </div>
+              )}
+
+              {isOpen && provider.id === "google" && (
+                <div className="space-y-4 border-t bg-muted/20 px-4 py-4">
+                  <div className="grid gap-4 md:grid-cols-2">
+                    <div className="space-y-2">
+                      <Label htmlFor="googleClientId">Client ID</Label>
+                      <Input
+                        id="googleClientId"
+                        value={settings.googleClientId ?? ""}
+                        onChange={(e) =>
+                          setSettings((s) => ({
+                            ...s,
+                            googleClientId: e.target.value,
+                          }))
+                        }
+                        placeholder="Google OAuth client ID"
+                      />
+                    </div>
+                    <div className="space-y-2">
+                      <Label htmlFor="googleClientSecret">Client Secret</Label>
+                      <Input
+                        id="googleClientSecret"
+                        type="password"
+                        value={settings.googleClientSecret ?? ""}
+                        onChange={(e) =>
+                          setSettings((s) => ({
+                            ...s,
+                            googleClientSecret: e.target.value,
+                          }))
+                        }
+                        placeholder="Google OAuth client secret"
+                      />
+                    </div>
+                  </div>
+                  <Button type="button" onClick={save} disabled={isPending}>
+                    {isPending ? "Saving…" : "Save Google settings"}
+                  </Button>
+                </div>
+              )}
+
+              {isOpen && provider.id === "github" && (
+                <div className="space-y-4 border-t bg-muted/20 px-4 py-4">
+                  <div className="grid gap-4 md:grid-cols-2">
+                    <div className="space-y-2">
+                      <Label htmlFor="githubClientId">Client ID</Label>
+                      <Input
+                        id="githubClientId"
+                        value={settings.githubClientId ?? ""}
+                        onChange={(e) =>
+                          setSettings((s) => ({
+                            ...s,
+                            githubClientId: e.target.value,
+                          }))
+                        }
+                        placeholder="GitHub OAuth client ID"
+                      />
+                    </div>
+                    <div className="space-y-2">
+                      <Label htmlFor="githubClientSecret">Client Secret</Label>
+                      <Input
+                        id="githubClientSecret"
+                        type="password"
+                        value={settings.githubClientSecret ?? ""}
+                        onChange={(e) =>
+                          setSettings((s) => ({
+                            ...s,
+                            githubClientSecret: e.target.value,
+                          }))
+                        }
+                        placeholder="GitHub OAuth client secret"
+                      />
+                    </div>
+                  </div>
+                  <Button type="button" onClick={save} disabled={isPending}>
+                    {isPending ? "Saving…" : "Save GitHub settings"}
+                  </Button>
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+
+      {message && <p className="text-sm">{message}</p>}
+    </div>
+  );
+}

package/apps/web/src/features/project-auth/project-auth-server.schema.ts

@@ -0,0 +1,22 @@
+import { z } from "zod";
+import { PROJECT_AUTH_INTENT } from "./project-auth-constants";
+import {
+  githubOAuthSchema,
+  googleOAuthSchema,
+  siteUrlSchema,
+} from "./project-auth-client.schema";
+
+export const projectAuthServerSchema = z.discriminatedUnion("intent", [
+  z.object({
+    intent: z.literal(PROJECT_AUTH_INTENT.SAVE_GOOGLE),
+    ...googleOAuthSchema.shape,
+  }),
+  z.object({
+    intent: z.literal(PROJECT_AUTH_INTENT.SAVE_GITHUB),
+    ...githubOAuthSchema.shape,
+  }),
+  z.object({
+    intent: z.literal(PROJECT_AUTH_INTENT.SAVE_SITE_URL),
+    ...siteUrlSchema.shape,
+  }),
+]);

package/apps/web/src/features/project-auth/project-auth-shell.tsx

@@ -0,0 +1,106 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { cn } from "@/lib/utils";
+
+const manageItems = [{ label: "Users", segment: "users" }] as const;
+
+const configItems = [
+  { label: "Sign In / Providers", segment: "providers" },
+  { label: "URL Configuration", segment: "url-configuration" },
+] as const;
+
+function NavLink({
+  href,
+  active,
+  children,
+}: {
+  href: string;
+  active: boolean;
+  children: React.ReactNode;
+}) {
+  return (
+    <Link
+      href={href}
+      className={cn(
+        "block shrink-0 whitespace-nowrap rounded-md px-3 py-2 text-sm transition-colors",
+        active
+          ? "bg-muted font-medium text-foreground"
+          : "text-muted-foreground hover:bg-muted/60 hover:text-foreground",
+      )}
+    >
+      {children}
+    </Link>
+  );
+}
+
+export function ProjectAuthShell({
+  orgSlug,
+  projectSlug,
+  children,
+}: {
+  orgSlug: string;
+  projectSlug: string;
+  children: React.ReactNode;
+}) {
+  const pathname = usePathname();
+  const base = `/organizations/${orgSlug}/${projectSlug}/auth`;
+
+  function isActive(segment: string) {
+    return (
+      pathname === `${base}/${segment}` ||
+      pathname.startsWith(`${base}/${segment}/`)
+    );
+  }
+
+  return (
+    <div className="flex h-full min-h-0 w-full flex-col md:flex-row">
+      <aside className="flex w-full shrink-0 flex-col border-b bg-background md:w-56 md:border-b-0 md:border-r">
+        <div className="border-b px-4 py-3 md:py-4">
+          <p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
+            Authentication
+          </p>
+        </div>
+
+        <nav className="flex gap-1 overflow-x-auto p-2 md:flex-col md:gap-0 md:space-y-6 md:overflow-visible md:p-3">
+          <div className="flex shrink-0 gap-1 md:block md:space-y-1">
+            <p className="hidden px-3 py-2 text-xs font-medium uppercase tracking-wide text-muted-foreground md:block">
+              Manage
+            </p>
+            <div className="flex gap-1 md:block md:space-y-1">
+              {manageItems.map(({ label, segment }) => (
+                <NavLink
+                  key={segment}
+                  href={`${base}/${segment}`}
+                  active={isActive(segment)}
+                >
+                  {label}
+                </NavLink>
+              ))}
+            </div>
+          </div>
+
+          <div className="flex shrink-0 gap-1 md:block md:space-y-1">
+            <p className="hidden px-3 py-2 text-xs font-medium uppercase tracking-wide text-muted-foreground md:block">
+              Configuration
+            </p>
+            <div className="flex gap-1 md:block md:space-y-1">
+              {configItems.map(({ label, segment }) => (
+                <NavLink
+                  key={segment}
+                  href={`${base}/${segment}`}
+                  active={isActive(segment)}
+                >
+                  {label}
+                </NavLink>
+              ))}
+            </div>
+          </div>
+        </nav>
+      </aside>
+
+      <div className="min-w-0 flex-1 overflow-y-auto">{children}</div>
+    </div>
+  );
+}

package/apps/web/src/features/project-auth/project-auth-url-config.tsx

@@ -0,0 +1,151 @@
+"use client";
+
+import { useActionState } from "react";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Controller, useForm } from "react-hook-form";
+import type { z } from "zod";
+import { Button } from "@/components/ui/button";
+import {
+  Field,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+} from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import { Check, Copy } from "lucide-react";
+import { useState } from "react";
+import { projectAuthAction } from "./project-auth-action";
+import { siteUrlSchema } from "./project-auth-client.schema";
+import { PROJECT_AUTH_INTENT } from "./project-auth-constants";
+
+type SiteUrlValues = z.infer<typeof siteUrlSchema>;
+
+function CopyRow({ value }: { value: string }) {
+  const [copied, setCopied] = useState(false);
+
+  async function copy() {
+    await navigator.clipboard.writeText(value);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1500);
+  }
+
+  return (
+    <div className="flex flex-col gap-2 px-4 py-3 sm:flex-row sm:items-center">
+      <code className="min-w-0 flex-1 truncate rounded-md border bg-muted/30 px-3 py-2 text-sm">
+        {value}
+      </code>
+      <Button type="button" variant="ghost" size="sm" onClick={copy}>
+        {copied ? <Check className="size-4" /> : <Copy className="size-4" />}
+      </Button>
+    </div>
+  );
+}
+
+export function ProjectAuthUrlConfig({
+  orgSlug,
+  projectSlug,
+  initialSiteUrl,
+  apiBaseUrl,
+}: {
+  orgSlug: string;
+  projectSlug: string;
+  initialSiteUrl: string;
+  apiBaseUrl: string;
+}) {
+  const boundAction = projectAuthAction.bind(null, { orgSlug, projectSlug });
+  const [state, formAction, isPending] = useActionState(boundAction, {});
+
+  const form = useForm<SiteUrlValues>({
+    resolver: zodResolver(siteUrlSchema),
+    defaultValues: { siteUrl: initialSiteUrl },
+  });
+
+  const redirectUrls = [
+    `${apiBaseUrl}/projects/${projectSlug}/auth/google/callback`,
+    `${apiBaseUrl}/projects/${projectSlug}/auth/github/callback`,
+    `${apiBaseUrl}/projects/${projectSlug}/auth/magic-link/verify`,
+  ];
+
+  return (
+    <div className="mx-auto w-full max-w-4xl space-y-8 p-4 sm:p-6">
+      <div>
+        <h1 className="text-2xl font-medium">URL Configuration</h1>
+        <p className="mt-1 text-sm text-muted-foreground">
+          Configure site URL and redirect URLs used by auth providers.
+        </p>
+      </div>
+
+      <section className="space-y-4">
+        <div>
+          <h2 className="text-base font-medium">Site URL</h2>
+          <p className="text-sm text-muted-foreground">
+            Where users land after OAuth sign-in (your app URL).
+          </p>
+        </div>
+
+        <form
+          action={formAction}
+          noValidate
+          onSubmitCapture={async (e) => {
+            const ok = await form.trigger(undefined, { shouldFocus: true });
+            if (!ok) e.preventDefault();
+          }}
+          className="max-w-xl space-y-4"
+        >
+          {state.error && (
+            <p className="text-sm text-destructive">{state.error}</p>
+          )}
+          {state.success && (
+            <p className="text-sm text-emerald-600">{state.success}</p>
+          )}
+
+          <FieldGroup>
+            <Controller
+              name="siteUrl"
+              control={form.control}
+              render={({ field, fieldState }) => (
+                <Field data-invalid={fieldState.invalid}>
+                  <FieldLabel htmlFor="siteUrl">Site URL</FieldLabel>
+                  <Input
+                    {...field}
+                    id="siteUrl"
+                    placeholder="http://localhost:3001"
+                    aria-invalid={fieldState.invalid}
+                  />
+                  {fieldState.invalid && (
+                    <FieldError errors={[fieldState.error]} />
+                  )}
+                </Field>
+              )}
+            />
+          </FieldGroup>
+
+          <Button
+            type="submit"
+            name="intent"
+            value={PROJECT_AUTH_INTENT.SAVE_SITE_URL}
+            disabled={isPending}
+          >
+            {isPending ? "Saving…" : "Save changes"}
+          </Button>
+        </form>
+      </section>
+
+      <section className="space-y-3">
+        <div>
+          <h2 className="text-base font-medium">Redirect URLs</h2>
+          <p className="text-sm text-muted-foreground">
+            Add these callback URLs in your Google and GitHub OAuth app
+            settings.
+          </p>
+        </div>
+
+        <div className="rounded-lg border divide-y">
+          {redirectUrls.map((url) => (
+            <CopyRow key={url} value={url} />
+          ))}
+        </div>
+      </section>
+    </div>
+  );
+}

package/apps/web/src/features/project-auth/project-auth-users.tsx

@@ -0,0 +1,138 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Input } from "@/components/ui/input";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import type { ProjectAuthUser } from "@apiDatabase/types";
+import { Mail } from "lucide-react";
+
+function GithubIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      aria-hidden
+    >
+      <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+    </svg>
+  );
+}
+
+function ProviderIcon({ provider }: { provider: ProjectAuthUser["provider"] }) {
+  if (provider === "github") return <GithubIcon className="size-4" />;
+  if (provider === "google") {
+    return <span className="text-xs font-semibold text-blue-600">G</span>;
+  }
+  return <Mail className="size-4" />;
+}
+
+function providerType(provider: ProjectAuthUser["provider"]) {
+  return provider === "email" ? "Email" : "Social";
+}
+
+export function ProjectAuthUsers({ users }: { users: ProjectAuthUser[] }) {
+  const [query, setQuery] = useState("");
+
+  const filtered = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    if (!q) return users;
+    return users.filter(
+      (u) =>
+        u.email.toLowerCase().includes(q) || u.id.toLowerCase().includes(q),
+    );
+  }, [query, users]);
+
+  return (
+    <div className="space-y-6 p-6">
+      <div>
+        <h1 className="text-2xl font-medium">Users</h1>
+        <p className="mt-1 text-sm text-muted-foreground">
+          End-users who signed up to apps built on this project.
+        </p>
+      </div>
+
+      <div className="flex flex-wrap items-center gap-3">
+        <Input
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+          placeholder="Search email, user ID"
+          className="max-w-sm"
+        />
+      </div>
+
+      <div className="rounded-lg border">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead className="w-10" />
+              <TableHead>UID</TableHead>
+              <TableHead>Email</TableHead>
+              <TableHead>Providers</TableHead>
+              <TableHead>Provider type</TableHead>
+              <TableHead>Created at</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {filtered.length === 0 ? (
+              <TableRow>
+                <TableCell
+                  colSpan={6}
+                  className="py-10 text-center text-muted-foreground"
+                >
+                  {users.length === 0
+                    ? "No users yet. Sign up from the SDK demo to populate this table."
+                    : "No users match your search."}
+                </TableCell>
+              </TableRow>
+            ) : (
+              filtered.map((user) => (
+                <TableRow key={user.id}>
+                  <TableCell>
+                    <Avatar className="size-8">
+                      <AvatarFallback className="text-xs">
+                        {user.email.charAt(0).toUpperCase()}
+                      </AvatarFallback>
+                    </Avatar>
+                  </TableCell>
+                  <TableCell className="max-w-[140px] truncate font-mono text-xs text-muted-foreground">
+                    {user.id}
+                  </TableCell>
+                  <TableCell className="font-medium">{user.email}</TableCell>
+                  <TableCell>
+                    <div className="flex items-center gap-2">
+                      <ProviderIcon provider={user.provider} />
+                      <span className="capitalize">{user.provider}</span>
+                      {user.emailVerified && (
+                        <Badge variant="secondary" className="text-xs">
+                          verified
+                        </Badge>
+                      )}
+                    </div>
+                  </TableCell>
+                  <TableCell>{providerType(user.provider)}</TableCell>
+                  <TableCell className="text-muted-foreground">
+                    {new Date(user.createdAt).toLocaleString()}
+                  </TableCell>
+                </TableRow>
+              ))
+            )}
+          </TableBody>
+        </Table>
+      </div>
+
+      <p className="text-sm text-muted-foreground">
+        Total: {filtered.length} user{filtered.length === 1 ? "" : "s"}
+      </p>
+    </div>
+  );
+}

package/apps/web/src/features/projects/action.ts

@@ -0,0 +1,46 @@
+"use server";
+
+import { revalidatePath } from "next/cache";
+import { projectsServerSchema } from "./server.schema";
+import { PROJECTS_INTENT } from "./constants";
+import { COOKIE_KEYS } from "@apiDatabase/constants";
+import { retrieveTokenFromCookie } from "@/server-utils/utils";
+import apiClient from "@/lib/axios";
+
+export type ProjectsActionState = {
+  error?: string;
+  success?: string;
+};
+
+export async function projectsAction(
+  { slug }: { slug: string },
+  _prev: ProjectsActionState,
+  formData: FormData,
+): Promise<ProjectsActionState> {
+  const raw = Object.fromEntries(formData);
+  const parsed = projectsServerSchema.safeParse(raw);
+
+  if (!parsed.success) {
+    return { error: parsed.error.flatten().formErrors[0] ?? "Invalid input" };
+  }
+
+  const token = await retrieveTokenFromCookie();
+  const { intent, ...data } = parsed.data;
+
+  try {
+    switch (intent) {
+      case PROJECTS_INTENT.CREATE: {
+        await apiClient.post(
+          `/orgs/${slug}/projects`,
+          { name: (data as { name: string }).name },
+          { headers: { Cookie: `${COOKIE_KEYS.ACCESS_TOKEN}=${token}` } },
+        );
+        revalidatePath(`/organizations/${slug}/projects`);
+        return { success: "Project created!" };
+      }
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  } catch (err: any) {
+    return { error: err.response?.data?.message ?? "Something went wrong" };
+  }
+}