Custom Web Login System

What it is

A complete sign-up and sign-in flow written by hand, wrapped in a demo events site. A visitor can register with an email and password, sign in, or use Google sign-in instead, and then reach a dashboard and a profile page that only signed-in users see. Around it, the demo shows events in eight categories for Chile and Argentina, with a search box, category tabs and a country switch in the navbar.

A new account stays unverified until its email is verified. The live demo sends no mail, so it offers a "Verificar ahora" button instead.

How it's built

The client is React 18 with React Router and Material UI; the server is Node.js with Express 4 over MySQL. No auth library does the work: accounts, sessions and verification are each implemented in the routes of server/server.js.

• Server-side sessions: each sign-in creates a UUID session, stored in a sessions table and in the express-session cookie, so a refresh or a direct URL keeps the user signed in. One account can be signed in from several places at once.
• Validation on the server: field lengths, a repeated password, an email check that goes past the regex (length of the local part and of each domain label) and a check that the email is not already registered, each answered with an error code that the form turns into a message.
• Google sign-in through @react-oauth/google on the client and Passport on the server.
• Shared constants (API address, roles) live in one common module used by both client and server.
• Settings outside the code: the session secret, port, allowed origins and database login are read from a settings file. Password hashing is still marked as a to-do in the code.

Why I made it

I built it in 2024 from scratch as the account layer of an events site; this repository keeps that layer on its own, with demo events around it so it can be tried.

Timeline

Written from May to September 2024, deployed with its demo content in November 2026.

Technologies

• React
• Express
• MySQL