Introduction
VL Authentication 01 is a Template Builder module that 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. When you turn Google Login or Apple Login on in Login Options, those buttons also appear on the login form (after site-level Google or Apple setup is complete).
This article explains how to create the Authentication page, add and configure VL Authentication 01, publish it, and verify the experience on the website.
Purpose
The purpose of this article is to help you:
- Create an Authentication Screen or System Screen for sign-in
- Add and configure the VL Authentication 01 module
- Enable the sign-in methods your site needs
- Set colors, images, and customer-facing labels and errors
- Understand what customers see after they sign in
- Publish and verify the live Authentication page
Scope
This article covers:
- Creating the Authentication page in Template Builder
- Adding VL Authentication 01
- Layout colors, hide options, agreement toggles, and Login Options
- Content: Images, Labels, and Errors
- How the authentication page appears on the website
- An overview of the website sign-in flow
It does not cover:
- Setting up Google or Apple credentials in external provider consoles
- Full TV provider (TVE) onboarding
- Other authentication modules (VL Authentication 02, VL Authentication With Password)
Prerequisites
Before you begin, ensure you have:
- Access to Template Builder with permission to create, edit, and publish pages
- 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
The steps use a page named Authentication at path/authentication. Replace these examples with values that match your site.
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.
.png)
Notes
- This module does not use email-and-password login on the website. Sign-in is one-time code, plus Google and Apple when those Login Options are on.
- Facebook, Amazon, and TVE can be turned on in Login Options. They are used on other platforms or flows, not as buttons on this website login form.
- Signin with Mobile, Signin with Web, and Signin with OTP primarily affect TV and OTT experiences.
- After sign-in, customers may go to consent, device activation, redeem, onboarding, or home, depending on your site setup.
Step 1: Create the Authentication page
You can start a new page in either of these ways:
- Open Template Builder.
- Start Create New Page from one of these locations:
- On the Template Builder home screen, select + New Page.
- On the home Page Overview, select View All Pages, then select New Page.
- Enter a Page Name, such as
Authentication. - Under Page Type, select Authentication Screen or System Screen.
- Enter a Page Path.
/authenticationis the recommended path unless your site already uses a different sign-in path. - If localization is enabled, choose the Target Language.
- Select Create Page.
The page type cannot be changed after the page is created.
Create New Page with Authentication Screen or System Screen selected as the Page Type. Start from + New Page on the Template Builder home screen, or from New Page on View All Pages.
Also available on: Modular Page and Marketing Page. For the standard sign-in experience, use an Authentication Screen or System Screen.
Keep /authentication consistent across environments when you can. Many web and app flows send customers to this path.
Step 2: Add the VL Authentication 01 module
- Open the new page in the Template Builder editor.
- Select Add Modules.
- Open the Authentication group, or search for
VL Authentication 01. - Select VL Authentication 01 to add it to the page.
- Select the module on the page to open its settings.
System screens typically use a single primary system module. Avoid stacking unrelated trays on this page unless your product design requires them.
Add Modules → Authentication. Search for and insert VL Authentication 01.
Step 3: Configure Layout
Open Layout and configure colors, hide options, and display toggles.
Colors and hide options
| Setting | Description | Default |
|---|---|---|
| Background | Background color of the authentication module. | #0D2148 |
| Active CTA | Background color of the primary button when it is available. | #D2393B |
| Input Background | Background color of the email / phone field. | #2B426E |
| Disabled CTA | Background color of the primary button when it is not available. | #FFFFFF |
| Text | Text color used on supported authentication controls. | #FFFFFF |
| Error | Color reserved for error styling. | #FF0000 |
| Hide Mobile Number | When on, the website does not show the phone country picker when the customer enters a phone number. | Off |
| Hide Email | Hides email entry on supported experiences. | Off |
Display toggles
| Setting | Description | Default |
|---|---|---|
| Show Login Agreement Text | Shows agreement text on the login path on supported experiences. | Off |
| Show Signup Agreement Text | Shows agreement text on the sign-up path on supported experiences. | Off |
| Show Create Account | Controls create-account messaging on supported experiences. | Off |
| Show No Plans CTA | Controls a “no plans” style call-to-action on supported experiences. | Off |
VL Authentication 01 → Layout. Set colors, hide options, and agreement toggles.
Step 4: Configure Login Options
Still in Layout, open Login Options. Turn on only the methods your site supports.
| Setting | Description | Default |
|---|---|---|
| Email Login / Signup | Email and phone sign-in and sign-up. Customers enter an email or phone number and receive a one-time verification code. | On |
Social
| Setting | Description | Default |
|---|---|---|
| Facebook Login | Social sign-in on supported platforms when Facebook is configured for the site. | Off |
| Google Login | When on, Sign in with Google can appear on the website login form. | Off |
| TVE Login | TV provider sign-in on supported platforms and flows. Also depends on site monetization / TVE setup. | Off |
| Apple Login | When on, Sign in with Apple can appear on the website login form. | Off |
| Amazon Login | Social sign-in on supported platforms when Amazon is configured for the site. | Off |
On the website login form, only Google and Apple appear as social buttons when those options are on and site-level credentials are in place.
OTT
| Setting | Description | Default |
|---|---|---|
| Signin with Mobile | Sign in from a TV or OTT device using the mobile app. | Off |
| Signin with Web | Sign in from a TV or OTT device using a web browser and activation code. | Off |
| Signin with OTP | OTP-based sign-in for OTT devices. | Off |
These options primarily affect TV and OTT experiences. Enable the ones your device apps support.
VL Authentication 01 → Layout → Login Options. Enable Email Login / Signup, social providers, and OTT methods as needed.
Step 5: Configure Images
Open Content → Images. Add one or more image entries used on the Authentication experience on supported platforms (for example a side panel or hero).
For each image entry you can set:
| Field | Description | Example |
|---|---|---|
| Title | Image title / headline | Welcome to City Sports |
| Sub Title | Supporting headline | Live games and originals |
| Description | Longer supporting copy | Sign in to watch live matches and exclusive shows. |
| Image URL | Absolute URL of the image asset | https://cdn.example.com/auth-hero.jpg |
Step 6: Configure Labels
Open Content → Labels to edit customer-facing copy. These strings are localizable when site localization is enabled.
Key labels for the website sign-in and verification screens:
| Label | What it controls | Default |
|---|---|---|
| Create Account Title | Main heading on the sign-in page | Create an account or sign in |
| Create Account Subtitle | Instructions under the title. You can use $terms_of_service$ and $privacy_policy$ to insert linked Terms and Privacy text on the website. |
Enter phone or email to receive a verification code. You can also sign in with Apple or Google… |
| Email Text Field Placeholder | Input placeholder | Enter your email or phone number |
| Get Verification Code Button Title | Primary CTA before the code is sent | Get Verification Code |
| Apple Sign In Button Title | Apple button label | Sign In With Apple |
| Google Sign In Button Title | Google button label | Sign In With Google |
| Verify Email Title / Verify Email Subtitle | Email verification screen | Verify your Email Address |
| Enter Code To Verify Email | Instruction under the email verification subtitle | Enter your code below to continue. |
| Verify Mobile Title / Verify Mobile Subtitle | Mobile verification screen | Verify your mobile number |
| Enter Code To Verify Mobile | Instruction under the mobile verification subtitle | Please enter the code below to verify your number. |
| Resend Code Button Text | Resend one-time code | Resend Code |
| Use Different Email Text | Return to a different email | Use a different Email Address |
| Use Different Mobile Text | Return to a different mobile number | Use a different Mobile Number |
| Verify Code Button Title | Verify control | Verify |
| Terms Of Service Text / Terms Of Service Permalink | Agreement link text and path | Terms of Service / /tos |
| Privacy Policy Text / Privacy Policy Permalink | Privacy link text and path | Privacy Policy / /privacy-policy |
| Skip CTA | Skip label. Whether customers see Skip depends on the sign-in flow for your site. | SKIP |
| Email Consent Text | Marketing consent copy where that checkbox is shown | Please send me email or other marketing communications… |
OTT and device copy in the same Labels section includes Login By Mobile App, Login By Web Browser, Login By Remote, Login By Apple ID, Login By Amazon ID, Create Account Subtitle (Smart TV), and Onboarding Title / Onboarding Description.
Other Labels fields cover restore purchase, missing Google / Facebook / Apple configuration messages, magic-link copy, delimiter / account-not-exist text, and Required Text. Edit the strings that apply to your live platforms.
Keep Terms and Privacy permalinks aligned with your published legal pages.
Step 7: Configure Errors
Open Content → Errors to customize messages customers can see during sign-in and sign-up. All of these strings are localizable.
Examples:
| Error | Typical use | Default (short) |
|---|---|---|
| Default Error | Generic processing failure | There was an error processing your request. |
| Sign In / Sign Up Error | Email not registered | Sorry, we can't find an account with this email address… |
| OTP Mismatch Text / Verify OTP Failed / OTP Expired / OTP Not Valid | Bad or expired verification codes | OTP entered is incorrect / OTP IS NOT CORRECT… / Otp Expired |
| Send OTP Failed | Code could not be sent | Sending OTP to your Number has failed… |
| Email Already Linked / Phone Already Linked | Identity already associated with another account | This email address is already linked… |
| Device Limit Exceeded | Too many concurrent devices | You have exceeded the maximum number of devices… |
| Cross Country Error | Phone not allowed in the user’s region | This phone number is not allowed to use in this region |
| Facebook Error / Google Error / Amazon Login Error | Social provider failures | Facebook login failed / Google login failed |
| Unverified Email / Unverified Phone | Identity not verified | The entered email or mobile is not verified… |
| Input Value Missing / Email Format Validation Message | Empty or invalid email or phone | Please enter your phone number or email address. |
The Errors section also includes password, name, date of birth, and zip code messages used on supported sign-in or checkout-related flows.
Customize tone and language for your brand, but keep the meaning clear so support teams can diagnose issues.
Step 8: Publish the page
- Review the page layout and module settings.
- Select Publish in the page toolbar.
- In the confirmation dialog, select Publish Page.
- Wait for the publish action to complete.
Until the page is published, the website and apps will not show your latest Authentication configuration.
Step 9: 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:
- Heading — from Create Account Title
- Subtitle — from Create Account Subtitle, with optional linked Terms and Privacy text
- Email or phone entry — placeholder from Email Text Field Placeholder
- Primary CTA — from Get Verification Code Button Title
- Google and Apple buttons — when Google Login and Apple Login are on and configured for the site
The module uses Background for the page area, Input Background for the field, Active CTA when the button is available, and Disabled CTA when it is not.
Website Authentication page (/authentication). Title, subtitle, email/phone field, primary CTA, and enabled social options.
One-time code on the website
After the customer submits an email or phone number:
- The page switches to the verification screen.
- Copy explains that a one-time code was sent (Verify Email or Verify Mobile labels).
- The customer enters the 6-digit code and submits it.
- They can resend the code or use a different email or mobile number.
Website verification. Enter the one-time code, submit, resend, or switch to a different email or phone.
After successful sign-in
Depending on your site setup, the customer may be sent to:
| Situation | Where the customer goes |
|---|---|
| VPPA consent is required and not yet accepted | Consent page (/consent) |
| Customer was in a device activation flow | Device activation page (/activate) |
| Customer was in a TV provider activation flow | TV provider activation page (/tveactivate) |
| Customer was in a Roku activation flow | Roku activation page (/rokuactivate) |
| Customer was redeeming a gift card | Redeem page (/redeem) |
| Profile is complete and customer is subscribed | Homepage (/) |
| Customer still needs onboarding (for example plans or profile) | Next step in your site’s onboarding flow |
If a customer who is already signed in opens the sign-in page again, they are typically taken to the homepage.
Example destination after a successful sign-in (home, consent, activation, redeem, or an onboarding step).
Link Sign In from the site
After you publish the Authentication page, customers need a way to reach it.
- Confirm the published page path (for example
/authentication). - From Template Builder, open Global Settings and update Header Navigation (or Other Navigation if Sign In lives in a secondary menu).
- Set the Sign In item’s destination to that same path only. Do not add language codes or extra parameters unless your site requires them.
- If the header is built with VL Masthead or another header module, point those Sign In / Account links to the same path.
- Open the website in a private window and select Sign In. Confirm you land on the Authentication page.
Use one Authentication path across the site so header links and login prompts open the same experience.
Verification checklist
- The page type is Authentication Screen or System Screen
- Page path is
/authentication(or the path your apps expect) - VL Authentication 01 is on the page
- Email Login / Signup is on
- Google Login and Apple Login are on only if those providers are configured for the site
- TVE is enabled in Login Options and in site monetization settings (if used)
- Layout colors and Images are set
- Labels and Errors are reviewed for launch language(s)
- Terms of Service and Privacy Policy permalinks resolve
- The page is published
- Website
/authenticationshows the expected heading, field, and button - A one-time code completes sign-in
- Google and Apple complete sign-in when those options are on
- After sign-in, the customer lands on the expected next page
- Header Sign In opens the same Authentication path
Troubleshooting
| Problem | What to check |
|---|---|
| VL Authentication 01 is not in the module list | Confirm the page type is Authentication Screen, System Screen, Modular Page, or Marketing Page. |
| Google or Apple button is missing | Turn Google Login or Apple Login on under Login Options, complete site-level provider setup, and publish. |
| Social button does nothing / shows configuration missing | Enable the provider in Login Options and complete site-level provider setup. Review the missing-configuration Labels if needed. |
| TVE is on but TVE does not appear or fails | Turn TVE Login on and confirm TVE is enabled in site monetization settings, then republish. |
| Facebook or Amazon is not on the website login form | Expected. Those options apply on other platforms or flows. The website form shows Google and Apple when enabled. |
| Phone country picker is missing | Turn Hide Mobile Number off and publish. |
| Labels or errors do not change on the site | Save Labels or Errors, publish the page, and retry in a private window. For localization, edit the correct language. |
| Customer lands on consent after login | VPPA compliance is required for the site. Complete consent, or review compliance settings with your admin. |
| Customer goes to activate or redeem unexpectedly | They may have started from a device activation or gift-card flow before signing in. |
| One-time code never arrives | Confirm email or SMS delivery is configured; confirm the customer entered a valid address or number. |
| Changes do not appear immediately | Confirm the page is published, then retry in a private window after allowing time for cache updates. |
Best Practices
- Use one Authentication page at a stable path (
/authentication). - Enable only login methods you support end-to-end (credentials, apps, and support process).
- Match Background, Active CTA, and Input Background to the rest of the site.
- Keep Create Account Title and Create Account Subtitle short so customers know they will receive a code.
- Keep Terms and Privacy permalinks pointed at published legal pages.
- Localize Labels and Errors when the site has more than one live language.
- Test web and at least one OTT path before launch if OTT options are on.
- Point every Sign In link to the same published path.
- Publish after every meaningful change. Draft system screens do not update the live site.
FAQs
Q. What page type should I use for VL Authentication 01?
Use an Authentication Screen or System Screen.
Q. How do I create the page?
Select + New Page on the Template Builder home screen, or open View All Pages and select New Page. Then choose the page type, enter the name and path, and select Create 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. Google and Apple are also available when Google Login and Apple Login are on and configured for the site.
Q. How do I turn on Google or Apple sign-in?
Turn Google Login or Apple Login on under Layout → Login Options, complete site-level provider setup, then publish.
Q. Which social buttons appear on the website?
Google and Apple, when those Login Options are on. Facebook, Amazon, and TVE are configured in the same section for other platforms or flows.
Q. Where do I turn TVE on?
Turn TVE Login on in Login Options, and confirm TVE in your site monetization settings.
Q. Does this module support password sign-in on the website?
No. Website sign-in for VL Authentication 01 is one-time code, plus Google and Apple when enabled.
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 belongs on an Authentication Screen or System Screen.
- The website sign-in form uses email or phone plus a one-time code.
- Login Options control which sign-in methods are enabled. On the website login form, social buttons are Google and Apple when those options are on.
- Labels and Errors under Content 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.
- Both the page and any related legal or consent pages must be published for the full experience.
Glossary
| Term | Definition |
|---|---|
| Authentication Screen | Template Builder page type used for the sign-in experience. |
| System Screen | Template Builder page type used for sign-in, checkout, search, and other system flows. |
| VL Authentication 01 | The module that displays the sign-in experience documented in this article. |
| Login Options | Layout settings that enable email, social, and OTT sign-in methods. |
| One-time code | Verification code sent to email or phone. |
| Social sign-in | Sign-in via Google, Apple, Facebook, or Amazon (website shows Google and Apple when enabled). |
| TVE | TV Everywhere — authenticate with a TV provider. |
| OTT Signin | Device-oriented sign-in methods (mobile app, web browser activation, OTP on TV). |
| VPPA / consent | Privacy compliance step that can send customers to a consent page after sign-in. |
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.