Customer Accounts

Customer Accounts

Overview

Customer accounts let shoppers save addresses for faster checkout, view order history, track shipments, and manage their profile. Every major e-commerce platform has this built in — Shopify, WooCommerce, and BigCommerce all provide account registration, login, address books, and order history without any custom development. The main decisions are: whether to make accounts optional or required, and whether to extend the platform's default account pages with additional functionality.

When to Use This Skill

• When enabling customer registration and login on a new storefront
• When customizing the account dashboard with order history and tracking
• When adding an address book to speed up returning customer checkout
• When converting guest checkout users into registered customers
• When adding wishlist or saved-for-later functionality

Core Instructions

Step 1: Determine platform and enable customer accounts

---

Step 2: Platform-specific setup

---

Shopify

Shopify offers two account experiences: Classic accounts and the newer New customer accounts (available on all plans).

Enable accounts and choose the experience:

1. Go to Settings → Customer accounts 2. Choose between:

• Classic accounts: traditional email + password login with customizable account pages via Liquid theme
• New customer accounts: passwordless login via email link; Shopify-hosted pages that Shopify controls (faster to set up, less customizable)

3. Set accounts as Optional (recommended) or Required

Classic accounts setup:

1. Enable Classic accounts in Settings → Customer accounts 2. The account page appears at /account — your theme controls the layout 3. Customize the account page in Online Store → Themes → Customize → Customer account pages 4. Key pages: Login, Register, Account overview, Order detail, Addresses

Making accounts optional (strongly recommended):

• Always allow guest checkout — never force registration before purchase
• After checkout, show a "Create account to save your details" prompt
• Shopify handles the "convert guest to account" flow automatically when a customer registers with the same email used for a past order

Extending account pages:

For enhanced account functionality (wishlist, loyalty points, social login, recent orders with tracking):

• Install Flits from the App Store — comprehensive account page customization
• Or install Customer Accounts Concierge — adds wishlist, recently viewed, reorder functionality

---

WooCommerce

WooCommerce has a built-in My Account page that includes order history, addresses, and profile management.

Set up My Account:

1. Go to WooCommerce → Settings → Accounts & Privacy 2. Configure:

• Guest checkout: check "Allow customers to place orders without an account"
• Account creation: optionally auto-create accounts during checkout
• Account erasure: enable "Allow customers to request account deletion"

3. The My Account page is created automatically at /my-account/

Customize My Account tabs:

The default tabs are: Dashboard, Orders, Downloads, Addresses, Account details, Logout. Add or remove tabs: 1. Add custom tabs by using the woocommerce_account_menu_items filter in your child theme's functions.php, or install a plugin like YITH WooCommerce Customize My Account Page 2. Reorder tabs by modifying the array in the filter

Address book:

1. Go to WooCommerce → Settings → Accounts → Allow customers to store multiple addresses 2. Customers can add/edit multiple addresses in My Account → Addresses 3. WooCommerce pre-fills checkout with the default address automatically

Wishlist:

• Install YITH WooCommerce Wishlist (free/premium)
• Adds a "Add to Wishlist" button on product pages and a wishlist page in My Account

Converting guest to registered after purchase:

WooCommerce shows a "Create account" prompt in order confirmation emails automatically when accounts are enabled but optional.

---

BigCommerce

BigCommerce has a built-in customer portal.

Enable and configure:

1. Go to Store Setup → Store Settings → Display → Customer Account Access 2. Set to "Optional" to allow guest checkout 3. Account pages are managed by your theme — customize in the Stencil theme editor

Customer groups:

Use customer groups for tiered access, B2B pricing, or member-only categories: 1. Go to Customers → Customer Groups → Add Group 2. Set group-specific pricing, category visibility, or shipping rules 3. Assign customers to groups manually or auto-assign based on purchase history

Address book:

• Built-in under the customer account portal
• Customers can save multiple addresses and select them at checkout

---

Custom / Headless

For headless storefronts, build a complete account system with secure authentication:

// lib/auth.ts
import bcrypt from 'bcrypt';
import jwt from 'jsonwebtoken';
import { z } from 'zod';

const registerSchema = z.object({
  email: z.string().email(),
  password: z.string().min(8).max(128),
  firstName: z.string().min(1).max(100),
  lastName: z.string().min(1).max(100),
  acceptsMarketing: z.boolean().default(false),
});

// POST /api/customers/register
export async function register(req: Request, res: Response) {
  const input = registerSchema.parse(req.body);

  const existing = await db.customers.findByEmail(input.email.toLowerCase());
  if (existing) return res.status(409).json({ error: 'An account with this email already exists' });

  const passwordHash = await bcrypt.hash(input.password, 12);  // Cost factor 12 minimum
  const customer = await db.customers.create({ ...input, email: input.email.toLowerCase(), passwordHash });

  await sendVerificationEmail(customer);
  const token = jwt.sign({ sub: customer.id, type: 'customer' }, process.env.JWT_SECRET!, { expiresIn: '7d' });

  res.status(201).json({ customer: omit(customer, ['passwordHash']), token });
}

// POST /api/customers/login
export async function login(req: Request, res: Response) {
  const { email, password } = req.body;
  const customer = await db.customers.findByEmail(email.toLowerCase());

  // Use the same error for both "not found" and "wrong password" to prevent email enumeration
  if (!customer || !customer.passwordHash) return res.status(401).json({ error: 'Invalid email or password' });
  if (customer.status === 'disabled') return res.status(403).json({ error: 'This account has been disabled' });

  const valid = await bcrypt.compare(password, customer.passwordHash);
  if (!valid) return res.status(401).json({ error: 'Invalid email or password' });

  const token = jwt.sign({ sub: customer.id, type: 'customer' }, process.env.JWT_SECRET!, { expiresIn: '7d' });
  res.json({ customer: omit(customer, ['passwordHash']), token });
}

// Address book CRUD — GET /api/customers/me/addresses
export async function listAddresses(req: AuthRequest, res: Response) {
  const addresses = await db.customerAddresses.findMany({ where: { customerId: req.customerId } });
  res.json({ addresses });
}

// POST /api/customers/me/addresses
export async function addAddress(req: AuthRequest, res: Response) {
  const existing = await db.customerAddresses.findMany({ where: { customerId: req.customerId } });
  const input = { ...addressSchema.parse(req.body), customerId: req.customerId };

  if (input.isDefault || existing.length === 0) {
    await db.customerAddresses.updateMany({ where: { customerId: req.customerId }, data: { isDefault: false } });
    input.isDefault = true;
  }

  const address = await db.customerAddresses.create({ data: input });
  res.status(201).json({ address });
}

// GET /api/customers/me/orders — paginated order history with tracking
export async function listOrders(req: AuthRequest, res: Response) {
  const page = parseInt(req.query.page as string) || 1;
  const limit = Math.min(parseInt(req.query.limit as string) || 10, 50);

  const [orders, total] = await Promise.all([
    db.orders.findMany({ where: { customerId: req.customerId }, skip: (page - 1) * limit, take: limit, orderBy: { createdAt: 'desc' }, include: { lineItems: true, shipments: true } }),
    db.orders.count({ where: { customerId: req.customerId } }),
  ]);

  res.json({ orders, pagination: { page, limit, total, totalPages: Math.ceil(total / limit) } });
}

---

Step 3: Configure post-checkout account creation

The highest-converting moment to ask for account creation is immediately after a successful first purchase, not before.

Shopify: The order confirmation page includes a "Create account" button automatically when customer accounts are enabled but optional. Customize the message in Online Store → Themes → Customize → Order status page.

WooCommerce: Customize the "Thank you" page message in WooCommerce → Settings → Accounts or use the Checkout Field Editor plugin to add a post-checkout account creation prompt.

What to say: "Save your details for faster checkout next time" is more compelling than "Create an account" — focus on the benefit, not the action.

Best Practices

• Always make accounts optional — never force registration before purchase; post-purchase conversion rates are much higher than pre-purchase
• Offer social login where possible (Google, Facebook) — reduces friction significantly for mobile users; use apps like Single Sign-On (SSO) for Shopify or WooCommerce Social Login for WooCommerce
• Auto-populate checkout from saved addresses — the primary value of accounts is faster checkout; ensure the default address pre-fills automatically
• Send a re-engagement email 24 hours after checkout to guest buyers inviting them to create an account — timing matters
• Enable GDPR/CCPA account deletion — every platform supports this; make sure the "delete my account" option is easy to find; see your platform's documentation for the data erasure workflow

Common Pitfalls

Related Skills

• @customer-segmentation
• @customer-lifetime-value
• @personalization-engine

Customer Address Book

Problem/Feature Description

A global e-commerce platform is adding a saved-address feature to their customer accounts. Customers frequently abandon checkout because they have to re-enter their shipping details every time — the business wants to let customers save multiple addresses and have their preferred one pre-fill the checkout form automatically.

The platform has customers in the US, UK, Australia, Japan, and several other countries where postal address formats differ significantly. The engineering team has been burned before by an address system that rejected valid addresses from customers in countries like Hong Kong (no state/province) and broke the checkout for those users. The solution must handle international addresses gracefully.

Your task is to implement the address book feature: the SQL schema for storing addresses and the Express/TypeScript API endpoints for listing, adding, updating, and deleting customer addresses. The system must intelligently manage which address is the "default" so that checkout can always pre-fill from a single well-defined source of truth.

Output Specification

Produce two files:

1. schema.sql — the SQL DDL for the customer addresses table (you may include a stub customers table as context if needed) 2. addresses.ts — TypeScript Express handler functions for:

• GET /api/customers/me/addresses
• POST /api/customers/me/addresses
• PUT /api/customers/me/addresses/:id
• DELETE /api/customers/me/addresses/:id

You may stub database calls with placeholder functions. Focus on the logic for default-address management and request validation. Include type definitions for the address shape.

Password Reset Flow

Problem/Feature Description

An online marketplace has received complaints from customers who are locked out of their accounts. The engineering team needs to build a self-service password reset flow. Security is critical here — a competitor recently suffered an account-takeover attack because their reset tokens were predictable, and another service leaked user account existence when customers entered emails to request resets.

The team wants a robust implementation: when a customer requests a reset, a time-limited link is emailed to them; when they follow the link, they can set a new password. The reset mechanism needs to be safe against token prediction, token theft (e.g., if the database is breached), and account takeover through stale reset links or old sessions.

The codebase already uses bcrypt for password hashing during registration. The reset flow should be consistent with that approach.

Output Specification

Produce a TypeScript file named password-reset.ts containing:

• The POST /api/customers/forgot-password handler
• The POST /api/customers/reset-password handler
• Any helper functions and type definitions needed

You may stub out database operations and the email-sending function with placeholder functions. Focus on the security logic: token generation, storage strategy, expiry, and the actions taken after a successful reset.

Also produce a short security-notes.md explaining the key design decisions made in the implementation (3-5 bullet points).

Customer Authentication API

Problem/Feature Description

A mid-size online retailer is building a new backend service for their storefront. The engineering team needs to implement the customer-facing authentication layer: a registration endpoint and a login endpoint. Security is a top concern — a previous vendor had a breach because they stored passwords insecurely and their login error messages made it easy for attackers to enumerate which email addresses had accounts.

The team has chosen TypeScript with Express for the API. They need you to implement the two endpoints (POST /api/customers/register and POST /api/customers/login) with proper input validation, secure password handling, session token issuance, and defensive error handling. The implementation should be production-quality — not a prototype.

Output Specification

Produce a single TypeScript file named auth.ts containing:

• The register handler function
• The login handler function
• The session creation helper
• Any necessary type definitions, imports, and schemas

You may stub out external dependencies (database calls, email sending) with placeholder functions or comments — the goal is the core logic and security decisions. Do not require a running database or mail server.

Also produce a short notes.md file explaining the key security decisions made in the implementation (2-4 bullet points).