--- title: "Al Hatab Rewards: from signing in to a card at the counter." url: "https://lindemann.design/work/alhatab-rewards/" description: "An Arabic and English member area for Al Hatab Rewards, connecting phone-code sign-in, points and a scannable card to the brand’s customer system." --- # Al Hatab Rewards: from signing in _to a card at the counter._ We built Al Hatab’s web member area so customers can sign in with a phone number and code, see their points and show a membership barcode at the counter. The Arabic and English experience connects directly to the brand’s existing customer system, keeping the member record where the business already manages it. - [Visit website](https://rewards.alhatab.com.sa/) Member experience - ![Al Hatab Rewards sign-in screen with a mobile-number field, verification check and Continue button beside branded juice photography.](/_astro/phone-sign-in.DdLnDKcb_2eNI6n.png) Members start with a mobile number. The same entry point supports sign-in and registration. - ![Al Hatab Rewards verification screen with five code-entry boxes, a Confirm button and a resend countdown beside product photography.](/_astro/code-verification.DfMmHLV8_Z1Amv3a.png) A five-digit SMS code verifies the mobile number, with a countdown before another code can be requested. - ![Al Hatab Rewards profile form with a fixed mobile number, editable name and demographic fields, and an incentive to complete the profile.](/_astro/profile-completion.BUW9raeN_ZLByV4.png) Members can complete their profile from the account area, with a points incentive shown alongside the form. - ![Al Hatab Rewards member overview showing the points balance, its value in Saudi riyals, a barcode control, profile access and logout.](/_astro/member-overview.DfMf8_9E_Z1EiXWe.png) The member overview brings together the points balance, its monetary value, barcode access and profile details. Organisation Al Hatab Foods, Saudi Arabia Role Design, architecture and engineering Stack - Astro - Cloudflare Pages - Cloudflare Workers, KV Status In production Since 2024 to present 1. **Join** register or sign in with a phone number and code 2. **View** see available points and upcoming expiry 3. **Scan** bring the membership card to the counter The brief ## Give members access to the record the business already uses. Al Hatab needed a member area connected to its existing customer system. Customers needed a straightforward way to join, sign in and retrieve their card in either language. We built that interface around the existing records, with temporary storage for the sign-in flow. The member journey ## A phone number, a code and a membership card. The service checks the phone number against the customer system and guides the visitor through verification and registration where needed. Once signed in, members can see their points, upcoming expiry and a barcode generated from their membership ID. Short-lived codes and the browser’s session timer support the sign-in journey. OTP · lifecycle ```text OTP_TTL_SECONDS 180 stored as session id → code, in KV, expiring verify compares with the stored code session expiry configured in the frontend session check browser timer and periodic checks code expiry and temporary phone storage have separate lifetimes ``` Verification and testing ## Check the flow at each step. The Workers validate API keys and apply bot checks according to the operation and environment settings. Shared utilities handle those checks, request identifiers and calls to the customer system. Playwright tests exercise registration and sign-in in the testing environment, where configured bypasses allow automated runs. Production frontend builds remove console output. checks around the member journey ```text ◇ X-API-Key per worker, validated first │ ◇ X-Turnstile-Token bot check; strict for sensitive operations │ ◇ fallback a second bot check when the first is unavailable │ ◇ session expiry checked in the browser │ ◆ then the operation │ with a request id through every log line automated tests use configured verification bypasses ``` Behind the interface ## Small services with clear responsibilities. The Astro frontend handles the bilingual member experience. Four Cloudflare Workers handle customer lookup, verification codes, temporary phone storage and customer creation or updates. They share utilities for phone formatting, OAuth, request checks and logging, so common behaviour can be maintained in one place. four workers, one job ```text customer-verification is this phone a member? asks the client's customer system customer-otp-store a one-time code, in KV, with a short life customer-phone-store the phone, held only for the session customer-create-update a new member, or an updated one, written back _shared logging, CORS, API keys, phone formatting, OAuth tokens each worker checks an API key, a bot token, and a session before it does anything ``` Recorded usage ## A view of the work happening behind each visit. The historical Cloudflare sample recorded here covers twelve weeks and approximately 1.59 million requests across the four Workers. Normalised to thirty days, it represents about 568,000 requests, 256,000 storage reads and 114,000 writes. These are infrastructure operations, so they should not be read as counts of members or successful sign-ins. The figures are rounded, sampled and exclude logging Workers. cloudflare analytics · 12 weeks ```text metric 12 weeks per 30 days four workers, requests 1,589,510 568K OTP worker, requests 631,119 225K KV reads 717,813 256K KV writes 317,952 114K monthly range 497K to 607K requests twelve measured weeks of production analytics, normalised to 30-day averages; rounded; sampled; logging workers excluded ``` Historical Cloudflare sample, shown as 30-day averages. Part of the platform ## Connect membership to the wider customer experience. Rewards sits alongside Al Hatab’s content platform and link service. Each has a focused job: publishing content, bringing visitors to the right destination or giving members access to their account. The rewards interface connects to the brand’s customer system rather than maintaining a separate permanent member database.