can u fix the ui of it, make it more curved. design the overall auth system in dark theme, use shadcn components from

@/components/ui/ComponentName - instead of creating all these components like button forminput, logo, ProtectedRoute,otpinput dont createe them just use them they are provided by shadcn ui so just import them instead of writing them from scratch thats a simple thing because the components it is actually for breaking down whole auth system into reusable components so don't waste time on recreating shadcn components in it.

instead of creating components from scratch create reusable components that can be reused in authentication and making it easier, writing less code.

remove unnecessary files, codes from the features that are not needed like logo i will import it from @/components/ui/Logo

dont build shadcn components by yourself.

make overall ui look good, dark themed and add password view option, use good typography - use medium font weight of Inter.

for AuthContext - use similar somewhat this logic instead of calling the API on mount it is bad makes server much overloaded.

similar to this or u can come up with better and simpler logic for state handling. "use client"

import { createContext, useContext, useState, useCallback, useEffect } from "react"

const AuthContext = createContext()

export function AuthProvider({ children }) { const [user, setUser] = useState(() => { const storedUser = localStorage.getItem("user") if (storedUser) { try { const parsedUser = JSON.parse(storedUser) // console.log("Loaded user from localStorage:", parsedUser) return parsedUser } catch (error) { //console.error("Error parsing stored user data:", error) localStorage.removeItem("user") return null } } return null })

const [isAuthenticated, setIsAuthenticated] = useState(!!localStorage.getItem("user"))

const login = useCallback((userData) => { if (!userData?.id) { console.error("userData missing id:", userData) return } setUser(userData) setIsAuthenticated(true) localStorage.setItem("user", JSON.stringify(userData)) // console.log("User logged in and stored:", userData) }, [])

const logout = useCallback(() => { setUser(null) setIsAuthenticated(false) localStorage.removeItem("user") localStorage.removeItem("tempUserId") }, [])

const handleLoginSuccess = (userData) => { login(userData) }

// Sync user state with localStorage changes (optional, for robustness) useEffect(() => { const storedUser = localStorage.getItem("user") if (storedUser && !user) { try { setUser(JSON.parse(storedUser)) setIsAuthenticated(true) } catch (error) { console.error("Failed to sync user from localStorage:", error) } } }, [user])

return ( <AuthContext.Provider value={{ user, isAuthenticated, login, logout, handleLoginSuccess }}> {children} </AuthContext.Provider> ) }

export const useAuth = () => useContext(AuthContext)

also add the cloudfare captcha, just add google option for login, remove all other options like x and apple from it.

use on top of middle the logo a component of <Logo/> is in the ui folder u just call in all pages.

make the buttons and everything a little more curved.

write all code in React JS. write it inside javascript or .jsx