VL Authentication 01 Module

Introduction

VL Authentication 01 is a System Screen module in Template Builder. It powers the sign-up and sign-in experience on your website and connected apps.

On the website, customers sign in with their email or phone number using a one-time verification code (OTP). When you enable them in module settings, Google and Apple sign-in buttons also appear on the login form.

This article explains how to create the Authentication page in Template Builder, configure VL Authentication 01, publish it, and verify the experience on the web.

Purpose

The purpose of this article is to help you:

• Create an Authentication System Screen in Template Builder
• Add and configure the VL Authentication 01 module
• Enable the sign-in and sign-up methods your site needs
• Brand and localize the authentication screens
• Understand what customers see on the website after sign-in
• Publish and verify the live Authentication page

Scope

This article covers:

• Creating a System Screen page for authentication in Template Builder
• Adding VL Authentication 01 to the page layout
• Module settings: Authentication Options, Images, display toggles, Brand, Localization (Labels and Errors)
• How the authentication page appears on the website
• An overview of the sign-in flow on web (flowchart)

It does not cover:

• Setting up Google or Apple credentials in external provider consoles
• Full TV provider (TVE) onboarding
• Other authentication modules (for example VL Authentication 02)

Prerequisites

Before you begin, ensure you have:

• Access to Template Builder for your site
• Access to ViewLift Tools / AppCMS if you need to enable TVE or other service-level login settings
• Google or Apple sign-in configured at the site level if you plan to offer those options
• Brand colors and copy ready: titles, subtitles, button labels, Terms of Service, and Privacy Policy links

Example used in this article
Throughout the steps below we use an Authentication page named Authentication at path /authentication. Replace the sample values with your own.

Authentication flow overview (website)

The flowchart below shows the typical customer journey on the website when VL Authentication 01 is published on your Authentication page.

Notes

• After sign-in, customers may be sent to different pages depending on your site setup (consent, device activation, redeem, onboarding, or home).
• On the website login form, Google and Apple are the social sign-in options shown when enabled in Authentication Options. Facebook, Amazon, and TVE can be configured in Template Builder but are used on other platforms or flows, not as buttons on this web login form.
• This module does not use email-and-password login on the website; sign-in is OTP-based, plus Google and Apple when enabled.

Step 1: Open Template Builder

1. Log into ViewLift Tools.
2. Open AppCMS → Edit Template Builder (or open Template Builder for your site from your usual entry point).
3. Confirm you are on the correct site and language (if localization is enabled, use the language selector on the Template Builder home screen before editing page copy).

Figure 1. Template Builder home. From here you create pages and open System Screens.

Step 2: Create the Authentication System Screen

The Authentication page must be a System Screen so that system modules (including VL Authentication 01) are available in the module picker.

1. In Template Builder, go to Pages.
2. Select + ADD NEW (or Create a New Page).
3. Enter New Page Name: Authentication (or your preferred name).
4. In New Page Type * Developers Only, select System Screen.
5. Optionally set Target Language (If localized Page) if you are creating a language-specific Authentication page.
6. Select CREATE.

*Figure 2..1 Create a New Page - Click on + ADD NEW

Figure 2..2 Create a New Page. Set New Page Name to Authentication, set New Page Type * Developers Only to System Screen, then select CREATE.

After create, Template Builder opens the page Settings screen.

Set the page path

1. On Page Settings, set the page path to /authentication (recommended) unless your site already uses a different auth path.
2. Confirm the page type is System Screen.
3. Save page settings if prompted.

Figure 3. Page Settings. Set the path to /authentication so Sign In / Sign Up links and redirects resolve correctly.

Tip: Keep /authentication consistent across environments. Many apps and web flows expect this path for login redirects.

Step 3: Add VL Authentication 01 to the layout

1. Open the Authentication page.
2. Select Edit Layout (or the equivalent layout editor for your Template Builder version).
3. Select Add a New Module (or insert module).
4. Because the page is a System Screen, the picker shows system modules.
5. Search for or select VL Authentication 01.
6. Insert the module into the page layout.

Figure 4. Edit Layout → Add a New Module. Search for and insert VL Authentication 01.

System Screens typically use a single primary system module. Avoid stacking unrelated content trays on this page unless your product design requires them.

Figure 5. Authentication System Screen layout with VL Authentication 01 placed on the page.

Step 4: Configure Authentication Options

Open the VL Authentication 01 module settings. The first section is Authentication Options.

You can enable, disable, and reorder methods. Drag items within each group to change display order on supported platforms.

Figure 6. Open Module Settings

Figure 7. Module settings → Authentication Options. Enable Email Login / Signup, Social providers, and OTT Signin methods as needed. Drag to reorder.

Email Login / Signup

Social Login / Signup

Note — TVE
TVE sign-up / sign-in is also controlled from AppCMS → Service → Monetization Types (or the equivalent monetization settings in Tools). Use those toggles together with the module’s TVE option.

OTT Signin

These options primarily affect TV and OTT experiences. Enable the ones your device apps support.

Step 5: Configure Images and display toggles

Images

Under Images, add one or more image entries used on the Authentication experience (for example a side panel or hero on supported platforms).

For each image entry you can set:

Figure 8. Module settings → Images. Add Title, Sub Title, Description, and Image URL for each Authentication visual.

Display toggles

Leave at least one of email or mobile visible. The form prevents hiding both at once.

Figure 9. Agreement and input toggles. Use Show login / signup agreement text, and optionally hide email or mobile — but not both.

Step 6: Configure Brand colors

Expand Brand to set colors used by the Authentication module on the website and supported platforms.

Colors can be changed with the color palette controls in Template Builder.

Figure 10. Module settings → Brand. Set background, CTA, input, text, and error colors to match your site brand.

Step 7: Configure Localization — Labels

Expand Localization → Labels to edit customer-facing copy. All of these strings are editable and can be localized per language when site localization is enabled.

Key labels include (not exhaustive):

Edit only the strings you need for launch. Keep Terms and Privacy permalinks aligned with your published legal pages.

Figure 11. Localization → Labels. Edit titles, placeholders, CTAs, legal links, and OTT copy shown on Authentication screens.

Step 8: Configure Localization — Errors

Expand Localization → Errors to customize default error messages customers can see during sign-in / sign-up.

Examples of editable errors:

Customize tone and language for your brand, but keep the meaning clear so support teams can diagnose issues.

Figure 12. Localization → Errors. Edit the messages shown when OTP, email, phone, social, or device checks fail.

Step 9: Save and publish the Authentication page

1. Save the module settings (apply / save in the module form).
2. Review the page layout once more.
3. Publish the Authentication System Screen.

Until the page is published, apps and web will not show your latest Authentication configuration.

Figure 13. Publish the Authentication page after you finish module configuration.

Changes can take several minutes to appear because of caching. To verify sooner, use a private window, another browser, or clear cookies and cache.

Step 10: How it looks on the website

After publish, open your site’s Authentication URL, for example:

https://www.example.com/authentication

Typical website layout

On the website, customers usually see:

1. Heading — from Create Account Title (for example Create an account or sign in)
2. Subtitle — instructions for email / phone verification, with optional linked Terms and Privacy text
3. Email or phone entry — customers first select the entry control, then type their email or phone number
4. Primary CTA — Get Verification Code (or your customized label)
5. Social buttons — only for enabled providers (Google and Apple on the website)
6. Agreement text — if login / signup agreement toggles are on

Figure 14. Website Authentication page (/authentication). Title, subtitle, email/phone field, primary CTA, and enabled social options.

OTP verification on the website

After the customer submits an email or phone number:

1. The page switches to the Verify screen.
2. Copy explains that a one-time code was sent.
3. The customer enters the 6-digit code and selects Verify.
4. They can Resend Code or choose Use a different Email / Mobile.

Figure 15. Website OTP verification. Enter the one-time code, verify, resend, or switch to a different email or phone.

After successful sign-in

Depending on your site setup, the customer may be sent to:

If a customer who is already signed in opens the sign-in page again, they are typically taken to the homepage.

Link Sign In from the site

After you publish your Authentication page, customers need a way to reach it from the website. The Sign In link in your header, menu, or account area should open the same page path you set in Template Builder (for example /authentication).

Step 1: Confirm your Authentication page path

1. Open Template Builder.
2. Go to Pages and open your Authentication System Screen.
3. Open Page Settings.
4. Note the page path (for example /authentication).
5. Confirm the page is published.

Use this exact path everywhere you link Sign In on the site.

Step 2: Update the header or main navigation

1. From the Template Builder home screen, open Global Settings.
2. Select Header Navigation (or Other Navigation if Sign In lives in a footer or secondary menu).
3. Find the menu item used for Sign In (for example Sign In, Log In, or Account).
4. Set Linked To to your Authentication page path only — for example /authentication.
   Do not add language codes or extra parameters to the URL unless your site specifically requires them.
5. Set Caption to the label customers should see (for example Sign In).
6. Save and publish your navigation changes.

Step 3: Check the masthead (if your site uses one)

If your site header is built with VL Masthead or another header module:

1. Open the page that contains the masthead (often Home or a global layout page).
2. Open the masthead module settings.
3. Find any Sign In / Log In / Account link settings.
4. Point those links to the same Authentication path (for example /authentication).
5. Save and publish the page.

Step 4: Verify on the live website

1. Open your website in a private browser window (so you are not already signed in).
2. Click Sign In from the header or account menu.
3. Confirm you land on your Authentication page (for example https://www.yoursite.com/authentication).
4. If the link goes somewhere else, go back to Step 2 or Step 3 and update the path.

Step 5: Check login prompts on protected content (if applicable)

If customers are asked to sign in when they try to watch content or open a subscriber-only page:

1. Confirm those prompts also send customers to your published Authentication path.
2. If they open a different page or show an error, work with your site admin or support team to align those redirects with /authentication (or your chosen path).

Tip: Use one Authentication page path across the whole site. When header navigation, masthead links, and login prompts all use the same path, customers always see the sign-in experience you configured in Template Builder.

Verification checklist

• Authentication page exists as a System Screen
• Page path is /authentication (or the path your apps expect)
• VL Authentication 01 is on the layout
• Email / phone and required social options are enabled
• TVE is enabled in both the module and AppCMS monetization settings (if used)
• Brand colors and Images are set
• Labels and Errors are reviewed for launch language(s)
• Terms of Service and Privacy Policy permalinks resolve
• Page is published
• Website /authentication shows the expected UI
• OTP (and social, if enabled) completes and redirects correctly

Troubleshooting

Best Practices

• Use one Authentication System Screen at a stable path (/authentication).
• Enable only login methods you support end-to-end (credentials, apps, and support process).
• Match brand colors to the rest of the site so the auth wall feels intentional, not like a separate product.
• Keep legal links current — Terms and Privacy permalinks should point to published pages.
• Localize Labels and Errors when the site has multiple live languages.
• Test web and at least one OTT path before launch if OTT Signin options are enabled.
• Publish after every meaningful change — draft System Screens do not update production apps.

FAQs

Q. What page type should I use for VL Authentication 01?
System Screen (set under New Page Type * Developers Only when creating the page).

Q. What is the recommended page path?
/authentication.

Q. How do customers sign in on the website?
With email or phone using a one-time verification code (OTP). Google and Apple are also available when you enable them in Authentication Options.

Q. How do I turn on Google or Apple sign-in?
Enable the provider under Authentication Options → Social Login / Signup, ensure provider credentials are configured for the site, then publish.

Q. Where do I turn TVE on?
In the module’s Social options and in AppCMS service monetization / TVE settings.

Q. Can I change the order of social buttons?
Yes. Drag items within Authentication Options to reorder.

Q. Will changes appear immediately on the website?
Often within several minutes. Use a private window if you need to verify sooner.

Q. How is this different from VL Authentication 02?
They are separate modules with different layouts and website experiences. This article covers VL Authentication 01 only.

Important Information

• VL Authentication 01 must be placed on a System Screen page.
• Create the page as a System Screen, add the module, configure options, then publish.
• TVE depends on both module settings and AppCMS monetization configuration.
• Do not hide both email and mobile inputs.
• Labels and Errors under Localization drive most of the customer-facing copy on web, mobile, and OTT.
• After sign-in, customers may be routed to consent, activation, redeem, onboarding, or home depending on site setup.

Glossary

Contact Support

If you need help beyond this article, contact the ViewLift support team.

• Email: techsupport@viewlift.com
• Phone (US): +1-800-859-0420
• Phone (UK): +44-203-014-8921

Support hours: B2C requests are handled Monday to Friday. B2B support is available 24/7.