feat(auth): implement instant passwordless flow using hidden passwords

Author: DongDuong2001

app/login/page.tsx

@@ -8,13 +8,10 @@ import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
 import Link from "next/link"
 import { motion, AnimatePresence } from "framer-motion"
-import { signIn, checkRememberMe } from "@/lib/features/auth"
+import { signInOrSignUpWithEmailOnly, checkRememberMe } from "@/lib/features/auth"
 import { getTranslations, getUserLanguage } from "@/lib/config"
 import { LanguageSwitcher } from "@/components/language-switcher"
 import {
-  EyeIcon,
-  EyeSlashIcon,
-  LockClosedIcon,
   EnvelopeIcon,
   ArrowRightIcon,
   SparklesIcon,
@@ -26,10 +23,8 @@ import {
 export default function LoginPage() {
   const router = useRouter()
   const [email, setEmail] = useState("")
-  const [password, setPassword] = useState("")
   const [rememberMe, setRememberMe] = useState(false)
   const [error, setError] = useState("")
-  const [showPassword, setShowPassword] = useState(false)
   const [t, setT] = useState(getTranslations("en"))
 
   useEffect(() => {
@@ -49,12 +44,12 @@ export default function LoginPage() {
     e.preventDefault()
     setError("")
 
-    if (!email || !password) {
-      setError("Email and password are required")
+    if (!email) {
+      setError(t.auth.email + " is required")
       return
     }
 
-    const result = await signIn(email, password, rememberMe)
+    const result = await signInOrSignUpWithEmailOnly(email, rememberMe)
 
     if (result.success) {
       router.push("/dashboard")
@@ -200,33 +195,6 @@ export default function LoginPage() {
                   />
                 </div>
               </div>
-
-              <div className="space-y-2">
-                <Label htmlFor="password" className="text-xs font-bold uppercase tracking-widest text-slate-500 ml-1">
-                  {t.auth.password}
-                </Label>
-                <div className="relative group">
-                  <div className="absolute left-4 top-1/2 -translate-y-1/2 flex items-center justify-center">
-                    <LockClosedIcon className="h-5 w-5 text-slate-500 group-focus-within:text-primary transition-colors" />
-                  </div>
-                  <Input
-                    id="password"
-                    type={showPassword ? "text" : "password"}
-                    placeholder="••••••••"
-                    value={password}
-                    onChange={(e) => setPassword(e.target.value)}
-                    className="pl-12 pr-12 h-14 bg-white/[0.03] border-white/5 hover:border-white/10 focus:border-primary/50 transition-all rounded-2xl text-lg placeholder:text-slate-600 focus:ring-0 focus:bg-white/[0.05]"
-                    required
-                  />
-                  <button
-                    type="button"
-                    onClick={() => setShowPassword(!showPassword)}
-                    className="absolute right-4 top-1/2 -translate-y-1/2 text-slate-500 hover:text-white transition-colors"
-                  >
-                    {showPassword ? <EyeSlashIcon className="h-5 w-5" /> : <EyeIcon className="h-5 w-5" />}
-                  </button>
-                </div>
-              </div>
             </div>
 
             <div className="flex items-center justify-between px-1">
@@ -244,16 +212,13 @@ export default function LoginPage() {
                   {t.auth.rememberMe}
                 </span>
               </label>
-              <Link href="#" className="text-sm text-primary hover:text-white font-bold transition-colors">
-                Forgot password?
-              </Link>
             </div>
 
             <Button
               type="submit"
               className="w-full h-14 text-lg font-black uppercase tracking-widest bg-primary hover:bg-primary/90 text-slate-950 shadow-[0_0_20px_rgba(var(--primary-rgb),0.3)] hover:shadow-[0_0_30px_rgba(var(--primary-rgb),0.5)] transition-all group rounded-2xl"
             >
-              Sign In
+              Log In
               <ArrowRightIcon className="ml-3 h-5 w-5 group-hover:translate-x-1.5 transition-transform" />
             </Button>
           </form>

app/signup/page.tsx

@@ -8,7 +8,7 @@ import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
 import Link from "next/link"
 import { motion, AnimatePresence } from "framer-motion"
-import { signUp } from "@/lib/features/auth"
+import { signInOrSignUpWithEmailOnly } from "@/lib/features/auth"
 import { getTranslations, getUserLanguage } from "@/lib/config"
 import { LanguageSwitcher } from "@/components/language-switcher"
 import {
@@ -17,20 +17,13 @@ import {
   ArrowRightIcon,
   BoltIcon,
   CheckCircleIcon,
-  ShieldCheckIcon,
-  LockClosedIcon,
-  EyeIcon,
-  EyeSlashIcon
+  ShieldCheckIcon
 } from "@heroicons/react/24/outline"
 
 export default function SignUpPage() {
   const router = useRouter()
   const [email, setEmail] = useState("")
-  const [password, setPassword] = useState("")
-  const [confirmPassword, setConfirmPassword] = useState("")
   const [error, setError] = useState("")
-  const [showPassword, setShowPassword] = useState(false)
-  const [showConfirmPassword, setShowConfirmPassword] = useState(false)
   const [t, setT] = useState(getTranslations("en"))
 
   useEffect(() => {
@@ -41,23 +34,12 @@ export default function SignUpPage() {
     e.preventDefault()
     setError("")
 
-    if (!email || !password) {
-      setError("Email and password are required")
+    if (!email) {
+      setError(t.auth.email + " is required")
       return
     }
 
-    if (password !== confirmPassword) {
-      setError("Passwords do not match")
-      return
-    }
-
-    if (password.length < 6) {
-      setError("Password must be at least 6 characters")
-      return
-    }
-
-    // Name is optional in our new flow, passing undefined
-    const result = await signUp(email, password)
+    const result = await signInOrSignUpWithEmailOnly(email, true)
 
     if (result.success) {
       router.push("/dashboard")
@@ -203,60 +185,6 @@ export default function SignUpPage() {
                   />
                 </div>
               </div>
-
-              <div className="space-y-2">
-                <Label htmlFor="password" className="text-xs font-bold uppercase tracking-widest text-slate-500 ml-1">
-                  {t.auth.password}
-                </Label>
-                <div className="relative group">
-                  <div className="absolute left-4 top-1/2 -translate-y-1/2 flex items-center justify-center">
-                    <LockClosedIcon className="h-5 w-5 text-slate-500 group-focus-within:text-primary transition-colors" />
-                  </div>
-                  <Input
-                    id="password"
-                    type={showPassword ? "text" : "password"}
-                    placeholder="••••••••"
-                    value={password}
-                    onChange={(e) => setPassword(e.target.value)}
-                    className="pl-12 pr-12 h-14 bg-white/[0.03] border-white/5 hover:border-white/10 focus:border-primary/50 transition-all rounded-2xl text-lg placeholder:text-slate-600 focus:ring-0 focus:bg-white/[0.05]"
-                    required
-                  />
-                  <button
-                    type="button"
-                    onClick={() => setShowPassword(!showPassword)}
-                    className="absolute right-4 top-1/2 -translate-y-1/2 text-slate-500 hover:text-white transition-colors"
-                  >
-                    {showPassword ? <EyeSlashIcon className="h-5 w-5" /> : <EyeIcon className="h-5 w-5" />}
-                  </button>
-                </div>
-              </div>
-
-              <div className="space-y-2">
-                <Label htmlFor="confirmPassword" className="text-xs font-bold uppercase tracking-widest text-slate-500 ml-1">
-                  Confirm Password
-                </Label>
-                <div className="relative group">
-                  <div className="absolute left-4 top-1/2 -translate-y-1/2 flex items-center justify-center">
-                    <LockClosedIcon className="h-5 w-5 text-slate-500 group-focus-within:text-primary transition-colors" />
-                  </div>
-                  <Input
-                    id="confirmPassword"
-                    type={showConfirmPassword ? "text" : "password"}
-                    placeholder="••••••••"
-                    value={confirmPassword}
-                    onChange={(e) => setConfirmPassword(e.target.value)}
-                    className="pl-12 pr-12 h-14 bg-white/[0.03] border-white/5 hover:border-white/10 focus:border-primary/50 transition-all rounded-2xl text-lg placeholder:text-slate-600 focus:ring-0 focus:bg-white/[0.05]"
-                    required
-                  />
-                  <button
-                    type="button"
-                    onClick={() => setShowConfirmPassword(!showConfirmPassword)}
-                    className="absolute right-4 top-1/2 -translate-y-1/2 text-slate-500 hover:text-white transition-colors"
-                  >
-                    {showConfirmPassword ? <EyeSlashIcon className="h-5 w-5" /> : <EyeIcon className="h-5 w-5" />}
-                  </button>
-                </div>
-              </div>
             </div>
 
             <div className="text-sm text-slate-500 font-medium px-1">

lib/features/auth/auth-service.ts

@@ -200,6 +200,40 @@ export async function signIn(
   }
 }
 
+// Instant Passwordless Authentication (Hidden Password)
+// This orchestrates a seamless login/signup flow using just an email.
+export async function signInOrSignUpWithEmailOnly(
+  email: string,
+  rememberMe = true,
+): Promise<{ success: boolean; error?: string; user?: User }> {
+  try {
+    // Generate a consistent, structurally strong "hidden" password
+    // In a real production app, this should ideally use a pepper/HMAC on the backend, 
+    // but for this instant-auth lab requirement we create it deterministically here.
+    const hiddenPassword = `L@b68!${email.length}${email}SecureHash`;
+
+    // 1. Attempt to sign in first (assuming the user already exists)
+    const signInResult = await signIn(email, hiddenPassword, rememberMe);
+
+    if (signInResult.success) {
+      return signInResult; // Successfully logged in
+    }
+
+    // 2. If sign in fails (likely because user doesn't exist), attempt to sign up
+    const signUpResult = await signUp(email, hiddenPassword);
+
+    if (signUpResult.success) {
+      // Supabase signUp auto-logs you in if email confirmation is disabled,
+      // but to ensure the `rememberMe` and cache states are identical to a normal login,
+      // we'll run a clean signIn immediately after a successful signUp.
+      return await signIn(email, hiddenPassword, rememberMe);
+    }
+
+    return { success: false, error: signUpResult.error || "Instant authentication failed" };
+  } catch (error: any) {
+    return { success: false, error: error.message || "Instant authentication encountered an error" };
+  }
+}
 
 // Sign out user
 export async function signOut(): Promise<void> {