Implemented all logged:admin privy, client connect privy, expert tool privy and lib auth privy (#682)

Author: Sadeequ

dashboard/app/dashboard/layout.tsx

@@ -1,19 +1,37 @@
 "use client";
 import { useEffect } from "react";
 import { useRouter } from "next/navigation";
-import { useAuth } from "@/lib/auth-context";
+import { usePrivy } from "@privy-io/react-auth";
 import Sidebar from "@/components/Sidebar";
 import SearchBar from "@/components/SearchBar";
 
 export default function DashboardLayout({ children }: { children: React.ReactNode }) {
-  const { token } = useAuth();
+  const { authenticated, login } = usePrivy();
   const router = useRouter();
 
   useEffect(() => {
-    if (token === null && typeof window !== "undefined" && !localStorage.getItem("token")) {
-      router.replace("/login");
+    if (!authenticated) {
+      router.replace("/");
     }
-  }, [token, router]);
+  }, [authenticated, router]);
+
+  if (!authenticated) {
+    return (
+      <div className="flex min-h-screen items-center justify-center bg-slate-50">
+        <div className="bg-white border border-slate-200 rounded-2xl shadow-sm p-8 w-full max-w-sm text-center">
+          <span className="text-3xl">⚡</span>
+          <h1 className="text-xl font-bold text-slate-900 mt-2">Zaps Merchant</h1>
+          <p className="text-sm text-slate-500 mt-2">Sign in with Privy to access the dashboard</p>
+          <button
+            onClick={() => login()}
+            className="mt-4 w-full bg-indigo-600 text-white py-2.5 rounded-lg text-sm font-medium hover:bg-indigo-700 disabled:opacity-50 transition-colors"
+          >
+            Sign in with Privy
+          </button>
+        </div>
+      </div>
+    );
+  }
 
   return (
     <div className="flex min-h-screen">

dashboard/app/dashboard/page.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useCallback } from "react";
 import StatCard from "@/components/StatCard";
 import { api } from "@/lib/api";
 import { usePolling } from "@/lib/use-polling";
@@ -13,6 +14,30 @@ function fmtUsdc(value: number): string {
   );
 }
 
+function maskEmail(email: string): string {
+  const [local, domain] = email.split("@");
+  if (!domain) return "***";
+  const masked = local.length > 1 ? local[0] + "***" : "*";
+  return `${masked}@${domain}`;
+}
+
+function maskPhone(phone: string): string {
+  if (phone.length <= 4) return "***";
+  return phone.slice(0, 3) + "***" + phone.slice(-2);
+}
+
+function downloadCSV(rows: string[], filename: string): void {
+  const blob = new Blob([rows.join("\n")], { type: "text/csv;charset=utf-8;" });
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = filename;
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+  URL.revokeObjectURL(url);
+}
+
 export default function OverviewPage() {
   const { data: feedData, loading: feedLoading, error: feedError } = usePolling(
     () => api.socialFeed(),
@@ -37,16 +62,50 @@ export default function OverviewPage() {
   const yieldDistributed = yieldData?.total_yield_distributed ?? 0;
   const apy = yieldData?.apy ?? 0;
 
+  const handleExportUsers = useCallback(async () => {
+    try {
+      const links = await api.identityLinks();
+      const headers = ["User ID", "Privy DID", "Stellar Address", "Display Name", "Email", "Phone", "Status", "Linked At"];
+      const csvRows = [headers.join(",")];
+      for (const link of links.links) {
+        const email = link.email ? maskEmail(link.email) : "";
+        const phone = link.display_name ? maskPhone(link.display_name) : "";
+        csvRows.push([
+          link.user_id,
+          link.privy_did,
+          link.stellar_address,
+          link.display_name ?? "",
+          email,
+          phone,
+          link.status,
+          link.linked_at,
+        ].map((v) => `"${v}"`).join(","));
+      }
+      downloadCSV(csvRows, `privy-users-export-${new Date().toISOString().slice(0, 10)}.csv`);
+    } catch {
+      // silently fail
+    }
+  }, []);
+
   return (
     <div>
-      {/* Social Overview */}
-      <div className="mb-6">
-        <h1 className="text-2xl font-bold text-slate-900">Social Overview</h1>
-        <p className="mt-1 text-sm text-slate-500">
-          Live engagement across recent payment feeds.
-        </p>
+      <div className="flex items-center justify-between mb-6">
+        <div>
+          <h1 className="text-2xl font-bold text-slate-900">Social Overview</h1>
+          <p className="mt-1 text-sm text-slate-500">
+            Live engagement across recent payment feeds.
+          </p>
+        </div>
+        <button
+          onClick={handleExportUsers}
+          className="inline-flex items-center gap-2 rounded-lg border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50 transition-colors"
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/></svg>
+          Export Users (CSV)
+        </button>
       </div>
 
+      {/* Social Overview */}
       {feedError && (
         <div className="mb-4 rounded-lg border border-red-200 bg-red-50 p-3 text-sm text-red-700">
           {feedError} — showing the most recently loaded values

dashboard/app/layout.tsx

@@ -1,6 +1,6 @@
 import type { Metadata } from "next";
 import "./globals.css";
-import { AuthProvider } from "@/lib/auth-context";
+import { PrivyProvider } from "@privy-io/react-auth";
 
 export const metadata: Metadata = {
   title: "Zaps Merchant Dashboard",
@@ -11,7 +11,15 @@ export default function RootLayout({ children }: { children: React.ReactNode })
   return (
     <html lang="en">
       <body>
-        <AuthProvider>{children}</AuthProvider>
+        <PrivyProvider
+          appId={process.env.NEXT_PUBLIC_PRIVY_APP_ID || ""}
+          config={{
+            loginMethods: ["google", "apple", "email"],
+            appearance: { theme: "light" },
+          }}
+        >
+          {children}
+        </PrivyProvider>
       </body>
     </html>
   );

dashboard/app/page.tsx

@@ -1,5 +1,41 @@
-import { redirect } from "next/navigation";
+"use client";
+import { useRouter } from "next/navigation";
+import { usePrivy } from "@privy-io/react-auth";
+import { useEffect } from "react";
 
-export default function Home() {
-  redirect("/dashboard");
+export default function LoginPage() {
+  const { authenticated, login, logout } = usePrivy();
+  const router = useRouter();
+
+  useEffect(() => {
+    if (authenticated) {
+      router.replace("/dashboard");
+    }
+  }, [authenticated, router]);
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-slate-50">
+      <div className="bg-white border border-slate-200 rounded-2xl shadow-sm p-8 w-full max-w-sm">
+        <div className="text-center mb-6">
+          <span className="text-3xl">⚡</span>
+          <h1 className="text-xl font-bold text-slate-900 mt-2">Zaps Merchant</h1>
+          <p className="text-sm text-slate-500">Sign in with Privy to continue</p>
+        </div>
+        <button
+          onClick={() => login()}
+          className="w-full bg-indigo-600 text-white py-2.5 rounded-lg text-sm font-medium hover:bg-indigo-700 disabled:opacity-50 transition-colors"
+        >
+          Sign in with Privy
+        </button>
+        {authenticated && (
+          <button
+            onClick={() => { logout(); router.replace("/"); }}
+            className="mt-3 w-full border border-slate-300 text-slate-700 py-2.5 rounded-lg text-sm font-medium hover:bg-slate-50 transition-colors"
+          >
+            Sign out
+          </button>
+        )}
+      </div>
+    </div>
+  );
 }

dashboard/package.json

@@ -12,6 +12,7 @@
     "e2e:report": "playwright show-report"
   },
   "dependencies": {
+    "@privy-io/react-auth": "^1.14.0",
     "@stellar/freighter-api": "6.0.1",
     "@stellar/stellar-sdk": "^15.1.0",
     "@types/qrcode": "^1.5.6",

mobileapp/app/_layout.tsx

@@ -4,6 +4,7 @@ import React from "react";
 import { Stack, useRouter, usePathname } from "expo-router";
 import { StatusBar } from "expo-status-bar";
 import { View } from "react-native";
+import { PrivyProvider } from "@privy-io/expo-sdk";
 import { COLORS } from "../src/constants/colors";
 import { useFonts } from "expo-font";
 import { Anton_400Regular } from "@expo-google-fonts/anton";
@@ -177,8 +178,16 @@ export default function Layout() {
   }
 
   return (
-    <ErrorBoundary>
-      <LayoutContent />
-    </ErrorBoundary>
+    <PrivyProvider
+      appId={process.env.EXPO_PUBLIC_PRIVY_APP_ID || ""}
+      config={{
+        loginMethods: ["google", "apple", "email"],
+        appearance: { theme: "light" },
+      }}
+    >
+      <ErrorBoundary>
+        <LayoutContent />
+      </ErrorBoundary>
+    </PrivyProvider>
   );
 }

mobileapp/package.json

@@ -18,6 +18,7 @@
     "@expo-google-fonts/outfit": "^0.4.3",
     "@expo/metro-runtime": "~6.1.2",
     "@expo/vector-icons": "^15.0.3",
+    "@privy-io/expo-sdk": "^1.14.0",
     "@react-native-async-storage/async-storage": "^2.0.0",
     "@react-native-community/netinfo": "^11.3.1",
     "@react-navigation/native": "^7.2.5",