Hactoberfest fourth week
I implemented a complete authentication system for a Next.js project, adding login and signup functionality that works entirely on the frontend using localStorage for data persistence.
What I Built
Authentication Pages
I created fully functional login and signup pages with routes for both English (/en/login, /en/signup) and Japanese (/ja/login, /ja/signup) locales. Each page includes form components with proper validation and error handling.
Client-Side Authentication Logic
The authentication system lives entirely in the browser. I built a utility module (auth-client.ts) that handles user session management, including getCurrentUser() and setCurrentUser() functions. User data persists in localStorage, and sessions automatically restore when users return to the site.
Form Validation
Using Zod, I created validation schemas for both login and signup forms. These schemas validate email formats, password requirements, and full name fields, with localized error messages that adapt to the user's language preference.
UI Enhancements
I added a reusable Input component to maintain consistency across forms and integrated logout buttons into both the main sidebar and mobile sidebar, giving users a clear way to end their sessions.
Internationalization
All auth-related text supports both English and Japanese, from form labels and placeholders to success messages and validation errors. This ensures a seamless experience regardless of language preference.
Technical Approach
Rather than waiting for backend infrastructure, I implemented a self-contained frontend authentication system. This approach allows the UI to be fully functional immediately while leaving room for backend integration later (I even kept the server actions structure in place for future use).
The validation layer ensures data integrity before it ever touches localStorage, and the session management handles edge cases like page refreshes and navigation between routes.
Hacktoberfest 2025 Contribution
Issue #13 | Pull Request #20
Top comments (0)