Login & Registration

Overview

The Login and Registration page serves as the entry point for users to access their accounts or create new ones, ensuring a seamless shopping experience. It facilitates easy login, registration, and guest checkout, allowing users to proceed with purchases quickly while later benefiting from features like order tracking.

Designed with a clean, minimal, and responsive layout, this page ensures a smooth experience across all devices. Below, you'll find details on key features, URL structure, and customization options for the login and registration flow.

Key Features

1. Login & Authentication – Enables users to securely sign in with email and password, featuring built-in validation and error handling.
2. Registration & Guest Checkout – Allows new users to create an account or proceed as guests for a faster checkout experience.
3. IDP Login & Registration – Supports third-party authentication via Google, Apple, and other identity providers for seamless access.
4. Forgot Password & Reset Password – Provides a secure password recovery process with email validation and reset link functionality.
5. Easy Flow Switching – Users can effortlessly switch between login, registration, and guest checkout using tab navigation and contextual links.

URL Structure

We maintain the following URL structure to ensure a consistent and predictable user experience:

• /signin – Default login flow.
• /signin?register=true – Registration and guest checkout flow.

This approach ensures users land on the appropriate flow while enabling deep-linking for specific scenarios (e.g., redirecting new users directly to the registration form).

Login Flow

The login flow enables returning users to access their accounts securely.

Login Form Fields:

• Email Address (required, validated format)
• Password (required, masked input with toggle visibility option)
• "Forgot password?" link for users who need to reset their credentials
• "Log in" button (CTA)

Upon successful login, users are redirected to their previous location or to the checkout if login was initiated as part of the checkout flow.

Registration Flow

The registration flow enables new users to create an account quickly.

Registration Form Fields:

• Gender (required, one of four options: Male, Female, Diverse, Prefer not to say)
• First Name & Last Name (depending on tenant settings)
• Email Address (required, validated format)
• Password (required, must meet security criteria)
• Privacy Disclaimer – Users must accept the Terms of Service and acknowledge the Privacy Policy.
• Register (CTA button)

Upon successful registration, users are automatically logged in and redirected to their previous location or the checkout, depending on the flow they initiated.

Guest Checkout Flow

For users who prefer not to create an account, the guest checkout flow provides a frictionless experience:

• Encourages account creation but keeps it optional.
• Allows users to proceed directly to checkout after providing an email address.

IDP Login and Registration

In addition to email/password authentication, users can log in or register using an Identity Provider (IDP) such as Google, Apple, or other third-party authentication services. You can read more about IDP configuration in the IDP guidelines.

IDP Login & Registration Process:

1. Users select their preferred IDP login/registration option.
2. They are redirected to the IDP authentication page, where they enter their credentials (if not already logged in).
3. Upon successful authentication, users are redirected back and automatically logged in.

Forgot Password Flow

Users can initiate a password reset process from the login page if they forget their password.

Step 1: Request Password Reset

• Users click "Forgot password?" on the login page.
• A flyout appears, prompting them to enter their registered email address.
• Upon submission, the email format is validated and checked against existing accounts.
• If the email exists, a password reset email is sent.

Step 2: Receive and Click the Reset Link

• Users receive an email with a secure, time-sensitive password reset link.
• Clicking the link redirects them to the login page with the "Set New Password" flyout open.

Step 3: Set a New Password

• Users enter a new password that meets security requirements.
• The password is validated before allowing submission.
• Upon success, the password is updated, and a confirmation message is displayed.

Error Handling & User Feedback

To ensure a smooth user experience, error messages are displayed clearly and contextually:

• Input-Specific Errors – Displayed below the invalid field:
  • Example: “Your password must be at least 8 characters and include a mix of letters and numbers.”
• Form-Specific Errors – Displayed at the top of the form:
  • Example: “An account with this email already exists. Please log in.”

Additionally, real-time validation helps users correct mistakes before submitting the form.

Customizing the Login and Registration Flows

For details on customizing your Login and Registration page, refer to our Customization Guideline.