JCOGS OTP Pro Sample Templates

Production-ready examples for implementing two-factor authentication

✅ Templates Installed: These example templates have been installed to the jcogs_otp_pro_examples template group. You can customize them directly in the Template Manager or copy them to your own template group.

Login Patterns

Choose the authentication flow that fits your site's UX:

✅ Production Ready

Pattern 1: Inline Progressive

Single-page login with OTP appearing inline when required

  • No page reloads
  • No JavaScript required
  • Best for simple sites
  • BEM CSS auto-injected
View Example →
✅ Production Ready

Pattern 2: Separate Pages

Traditional two-page flow: login → validation

  • Clean separation
  • No JavaScript required
  • Best for traditional workflows
  • BEM CSS auto-injected
View Example →
✅ Recommended

Pattern 3a: Modal (Tag-Based)

Simple AJAX modal using single tag

  • One-line tag implementation
  • Auto-handles all AJAX logic
  • BEM CSS auto-injected
  • Easiest AJAX approach
View Example →
✅ Recommended

Pattern 3b: Inline (Tag-Based)

Simple AJAX inline using single tag

  • One-line tag implementation
  • Auto-handles all AJAX logic
  • BEM CSS auto-injected
  • Better for mobile
View Example →
⚡ Advanced

Pattern 3a: Modal (Manual)

Full AJAX modal implementation with manual JavaScript

  • Complete control
  • Customizable behavior
  • More complex setup
  • For advanced users
View Example →
⚡ Advanced

Pattern 3b: Inline (Manual)

Full AJAX inline implementation with manual JavaScript

  • Complete control
  • Customizable behavior
  • More complex setup
  • For advanced users
View Example →

User Preference Templates

Member profile pages for OTP management:

✅ Production Ready

OTP Settings Dashboard

Complete OTP management interface

View Example →
✅ Production Ready

Trusted Devices

View and manage trusted devices

View Example →
✅ Production Ready

Delivery Methods

Switch authentication providers

View Example →

🛠️ Customization Guide

Using the Templates

These templates are ready to use as-is for testing and development. To customize them for your site:

Option 1: Edit in Place

Edit the templates directly in the Template Manager under the jcogs_otp_pro_examples group. Perfect for quick customization and testing.

Option 2: Copy to Your Own Group

Create a new template group for your site and copy these templates as a starting point:

  1. Go to Developer → Templates in the Control Panel
  2. Create a new template group (e.g., member_auth)
  3. Copy the relevant templates from jcogs_otp_pro_examples
  4. Update internal links to reference your new group name

Key Customization Points

Element Location Notes
CSS Styling All templates use BEM classes Override with your own CSS
Success URLs return="..." parameters Point to your dashboard/home page
Form Messages Error and success text Customize wording for your brand

📚 Resources