Authentication

Every website built with Frontend has access to Frontend Cloud Authentication, providing a secure and seamless way to manage user accounts and login sessions. Authentication enables you to protect content, personalize experiences, and manage user-specific data.

Authentication Methods

Frontend Cloud Authentication supports email-based authentication:

• Email and Password: Users create accounts with their email address and a secure password
• Email Verification: One-Time Password (OTP) tokens ensure email ownership
• Secure Sessions: Logged-in users maintain secure session tokens

Email Verification with OTP

Email verification is accomplished using One-Time Password (OTP) tokens:

• Users receive a 6-digit code via email
• Codes are time-limited for security
• Verification confirms email ownership before account activation
• OTPs can also be used for password resets and security checks

This approach provides strong security without requiring users to click verification links or leave your application.

Shared Account System

Frontend Cloud uses a unified authentication system across all Frontend websites:

• Cross-Site Accounts: Users can use the same account to access any Frontend website
• Single Sign-On Experience: No need to create new accounts for each Frontend site
• Consistent User Experience: Familiar login flow across the platform
• Shared User Base: Leverage the broader Frontend Cloud user community

This means if a user already has a Frontend Cloud account from another website, they can immediately log in to your site without creating a new account.

Authentication Lifecycle

The authentication flow includes several stages that your application manages through API endpoints.

Sign Up

New users create an account with their email and password:

POST /api/v1/auth/signup
{
  "email": "user@example.com",
  "password": "securePassword123"
}

After signup, users receive an OTP code for email verification.

Send OTP

Request a one-time password code for email verification:

POST /api/v1/auth/send_otp
{
  "email": "user@example.com"
}

The user receives a 6-digit code via email.

Verify OTP

Verify the email address using the received code:

POST /api/v1/auth/verify
{
  "email": "user@example.com",
  "otp": "123456"
}

Once verified, the account is activated and the user can log in.

Login

Authenticate users with their credentials:

POST /api/v1/auth/login
{
  "email": "user@example.com",
  "password": "securePassword123"
}

Successful login returns a session token for subsequent authenticated requests.

Logout

End the user’s session:

POST /api/v1/auth/logout

This invalidates the session token and logs the user out.

Protected Content

Once users are logged in, you can provide access to content and data that’s not available to anonymous visitors:

Authenticated CMS Data

• User Profiles: Personal information visible only to logged-in users
• Private Messages: Communication between authenticated users
• Saved Items: User-specific bookmarks, favorites, or preferences
• Purchase History: E-commerce order records
• Account Settings: User configuration and preferences

Permission-Based Access

Using CMS permissions, you can control what authenticated users can see and do:

• Content marked for “Authenticated” users becomes accessible after login
• “Owner” permissions ensure users only access their own data
• Mix of Anonymous and Authenticated permissions creates tiered access

Example: User Profile Access

// Before login - this request fails or returns limited data
GET /api/v1/cms/profiles

// After login - full profile data is accessible
GET /api/v1/cms/profiles
Authorization: Bearer {session_token}

Implementing Authentication

Using Frontend AI

The simplest way to implement authentication is to direct Frontend AI:

• “Add user login and signup to my website”
• “Create a user profile page that shows data only for logged-in users”
• “Implement password reset using OTP codes”
• “Add a logout button to the navigation”

Frontend AI will generate the necessary UI components and API calls automatically.

Manual Implementation

For custom implementations, you can manually call the authentication endpoints:

1. Create signup and login forms in your UI
2. Make API calls to the appropriate endpoints
3. Store the session token securely
4. Include the token in subsequent API requests
5. Handle authentication errors and edge cases

User Sessions

After successful login, users receive a session token:

• Store the token securely (e.g., in httpOnly cookies or secure storage)
• Include the token in API requests as an Authorization header
• Token remains valid until logout or expiration
• Expired tokens require users to log in again

Security Best Practices

When implementing authentication:

• Never store passwords in plain text: Frontend Cloud handles secure password hashing
• Use HTTPS: Ensure all authentication traffic is encrypted
• Validate on the server: Don’t rely solely on client-side authentication checks
• Implement rate limiting: Protect against brute force attacks
• Use secure session storage: Protect tokens from XSS attacks
• Provide password requirements: Enforce strong password policies
• Implement account lockout: Protect against credential stuffing
• Log authentication events: Monitor for suspicious activity

Common Authentication Patterns

Public Website with Member Area

• Anonymous users can browse public content
• Login required to access member-exclusive features
• User profiles and preferences behind authentication

Subscription Service

• Landing pages and marketing content public
• Product access requires authentication
• User-specific content and settings

Community Platform

• Anyone can view posts (Anonymous read on CMS)
• Creating posts requires login (Authenticated create)
• Editing posts restricted to authors (Owner write)

Secure Application

• Entire application behind authentication
• All CMS collections restricted to Authenticated or Owner
• No public content access

Frontend Cloud Authentication provides a complete, secure solution for user management, allowing you to focus on building features rather than implementing authentication infrastructure from scratch.