VL Authentication 02 Module

Introduction

VL Authentication 02 is a System Screen module in Template Builder. It powers a newer 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 02, 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 02 module
• Enable the sign-in and sign-up methods your site needs
• Brand and localize the authentication screens (including fonts and override colors)
• 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 02 to the page layout
• Module settings: Authentication Options, Images, display toggles, Brand, Override, Font Settings, 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
• Checkout-only fields in detail (name, date of birth, zip code, and TV provider options also appear when this module is used inside checkout)
• Other authentication modules (for example VL Authentication 01)

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 02 is published on your Authentication page.

Notes

• On the website login form, Google and Apple are the social sign-in options shown when enabled. Facebook, Amazon, and TVE can be configured in Template Builder but are used on other platforms or flows (for example TV provider options during checkout).
• A password field appears on the website only when password sign-in is enabled for your site at the service level (for example NHL SSO). Module password labels alone do not turn it on.
• Unlike VL Authentication 01, this module’s website flow does not send customers to a VPPA consent page as part of the standard post-sign-in redirect.

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 02) 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.

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.

Step 3: Add VL Authentication 02 to the layout

1. Open the Authentication page.
2. Select Edit Layout.
3. Select Add a New Module.
4. Search for or select VL Authentication 02.
5. Insert the module into the page layout.

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

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

Step 4: Configure Authentication Options

Open the VL Authentication 02 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

OTT Signin

Step 5: Configure Images and display toggles

Images

Under Images, add one or more image entries used on the Authentication experience on supported platforms.

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

Display toggles

The module form may also include configurable checkboxes (for example consent options) that appear on supported sign-in flows.

On the standalone /authentication page, customers typically see email/phone sign-in (and password when enabled for your site), plus Google and Apple when enabled. Name, date of birth, and zip code fields are more commonly used when this module appears inside checkout.

Figure 9. Display toggles on VL Authentication 02. Configure hide/require flags for email, mobile, name, DOB, zip, and Terms text as needed.

Step 6: Configure Brand, Override, and Font Settings

Brand

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

Override

Use Override when you want different input styling in certain contexts (for example checkout):

Figure 11. Module settings → Override. Optional override colors for input background and text.

Paths and Font Settings

Font Settings let you customize typography for:

Figure 12. Font Settings and Terms / customer-care page paths on VL Authentication 02.

Step 7: Configure Localization — Labels

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

Key labels include (not exhaustive):

The Labels section also includes copy for connected TV, magic-link, TV provider, and account-exists scenarios. Edit the labels that apply to your live platforms.

Figure 13. Localization → Labels. Edit titles, placeholders, CTAs, legal copy, password copy, and platform-specific strings.

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:

Figure 14. Localization → Errors. Edit messages shown for OTP, credential, social, and field-validation failures.

Step 9: Save and publish the Authentication page

1. Save the module settings.
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 15. 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 Log in Btn Text or Create Account Title (for example Log In)
2. Email / phone instruction line
3. Email or phone input — with the configured placeholder
4. Primary CTA — Get Verification Code (or your customized label)
5. Password field and Forgot Password — only when password sign-in is enabled for your site
6. Divider “or” — when Google and/or Apple are enabled
7. Google / Apple buttons — when those social options are enabled
8. Terms of Service line — with a link to your Terms page
9. Don’t have an account? Sign Up — links to your checkout page (/checkout)
10. reCAPTCHA legal text — shown on the standalone sign-in page

Figure 16. Website Authentication page (/authentication). Title, 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 go back to use a different email or phone.

Figure 17. 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:

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 02 is on the layout
• Email / phone and required social options are enabled
• Brand, Override, and Font Settings are reviewed
• Labels and Errors are reviewed for launch language(s)
• Terms of Service page path is set if you use the web Terms link
• 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.
• Match brand colors and fonts to the rest of the site.
• 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 the published sign-in page for OTP, social sign-in, and password (if enabled) before launch.
• Publish after every meaningful change — draft System Screens do not update production.

FAQs

Q. What page type should I use for VL Authentication 02?
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. When does password login appear on the website?
Only when password sign-in is enabled for your site at the service level (for example NHL SSO). Align password labels and min/max length in the module with that flow.

Q. Which social buttons appear on the website?
Google and Apple, when those options are enabled in the module’s Social Login / Signup settings.

Q. Where does “Don’t have an account? Sign Up” go?
It navigates to your checkout page (/checkout).

Q. How is this different from VL Authentication 01?
Authentication 02 offers a newer website layout (including font settings and override colors), a different post-sign-in redirect behavior, and additional profile fields when used in checkout. This article covers VL Authentication 02 only.

Important Information

• VL Authentication 02 must be placed on a System Screen page.
• Create the page as a System Screen, add the module, configure options, then publish.
• Website social buttons are Google and Apple when enabled.
• Post-sign-in routing depends on whether the customer was activating a device, redeeming a gift card, subscribing, or continuing checkout — not a fixed single path for every site.
• Publish after configuration changes.

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.

Last updated: August 2026