PortfolioAbout This Article
In headless EC, the frontend and backend are separated, making authentication mechanisms more complex. This project adopted passwordless authentication to achieve both customer experience and security.
Why Passwordless
Problems with Password Authentication
Traditional password authentication has many challenges.
| Problem | Specific Impact |
|---|---|
| Password leak risk | Damage spreads due to reuse across services |
| Management burden | Users can't remember complex passwords |
| Phishing attacks | Passwords stolen on fake sites |
| Reset handling | Support effort when forgotten |
| Brute force attacks | Need countermeasures against exhaustive attacks |
Benefits of Passwordless Authentication
| Benefit | Details |
|---|---|
| Eliminate leak risk | No password to leak |
| Reduce user burden | No need to remember passwords |
| Phishing resistant | One-time codes are disposable |
| Reduce support effort | No password reset handling needed |
| Improved UX | Login with just email address |
Authentication Flow Overview
Login Flow
Customer enters email address and clicks "Login"
System generates one-time password (6-digit number) and sends via email
Customer enters received code on screen
Verify if entered code is correct and within validity period
On successful verification, issue token to maintain authenticated state
Subsequent requests authenticated with token. Re-login required when expired
System Integration
Enter email, enter OTP, access when authenticated
OTP generation/verification, session token issuance
Send OTP to customer via email
Security Measures
Unauthorized Access Prevention
The following measures are implemented to operate passwordless authentication safely.
| Measure | Purpose | Specific Implementation |
|---|---|---|
| Short validity | Reduce damage from OTP leak | Verification code valid for only 5 minutes |
| Rate limiting | Prevent brute force | Limit attempt count from same IP |
| Attempt limiting | Prevent exhaustive attacks | Invalidate OTP after 3 failures |
| Token refresh | Prevent session hijacking | Regularly refresh tokens |
| Logging | Detect unauthorized access | Record all authentication attempts |
Session Management Approach
OTP verification passes, authentication complete
Issue session token with 7-day validity
Valid -> Continue use / Expired -> Request re-login
Implementation Points in Headless Architecture
Frontend and Backend Separation
In headless architecture, authentication state management requires attention.
Login UI, token storage, auth state management, auto logout
OTP generation, OTP verification, token issuance, Shopify API integration
Token storage location: HttpOnly Cookie (recommended), sent with Secure attribute, protected with SameSite=Strict
Supporting Multiple Authentication Methods
Multiple authentication methods are supported for customer convenience.
- Email OTP: Standard passwordless authentication
- Shopify Customer Account API: Leverage Shopify's authentication infrastructure
- Social login: Integration with Google, Apple, etc. (future support)
Benefits of This Authentication Method
For Customers
- No need to remember passwords
- Easy login with just email address
- Reduced security concerns
For Operations
- No password reset handling needed
- Reduced account takeover risk
- Simplified security implementation