Apple TV Docs - 📱Building Your First App

Create a seamless sign-in from a mobile device or computer, and cut out the clunky TV keyboard.

Note

This article is a section in the Building Your First App walkthrough, so if you skipped here, some parts may be in reference to earlier sections of that. This article will still cover the ins and outs of creating a sign-in page.

Setting up the server

In your Rock instance, we're going to need to set up a Remote Authentication block. To start, create a new external page and put a Remote Authentication block on it, like such:

Click the settings icon, and select the site that represents your TV application:

Copy the URL to the page, or create a route that directs to it. When you navigate to that URL, you should see an output like this:

Configuring the TVML

Great! We've made some good progress. Next, let's configure our TV application.

In the application settings, change the authentication page to match the page you just created.

To start, we're going to create two new pages, the first page will be our login page.

Paste this in as the TVML content.

<document>
    <head>
        <style>
            .row {
                margin-top: 30px;
            }
        </style>
    </head>

    <divTemplate>
        <row class="row" style="tv-align: center; tv-position: top;">
            <img src="{ authQrCodeUrl }" width="500" height="500" style="border-radius:12;" />
        </row>
            
        <stack style="tv-align: center; tv-position: top; margin-top: 32;">
            <row>
                <text style="tv-text-style: title2; color: white;">Scan QR Code</text>
            </row>
            
            <row class="row">
                <text style="tv-text-style: subhead;">OR</text>
            </row>
            <row class="row">
                <!-- CHANGE THIS! -->
                <text style="tv-text-style: subtitle1; color: white;">Sign-in or create an account at <span style="font-weight: bold;">https:/example.com/page/123</span></text>
            </row>
            
            <row class="row">
                <text style="tv-text-style: subtitle1; color: white;">Enter the code below:</text>
            </row>
            
            <row class="row">
                <text style="tv-text-style: subtitle2: color: white; tv-font-spacing: 100; font-weight: bold;">{authCode}</text>
            </row>
        </stack>
    </divTemplate>
</document>

Change the URL from https://example.com/page/123 to match the URL of the page you just configured. This page receives a special set of merge fields, usable as:

Field	Description
{ authQrCodeUrl }	The URL of the generated QR code image.
{ authCode }	The authorization code to pass into the Remote Authentication block.

Please note the single curly braces '{' and '}', not to be confused with Lava's double curly brace '{{' and '}}'.

The Login Timeout Page

Create another page that will be pushed to when the login times out. Paste this in as the TVML content

<document>
    <alertTemplate>
        <title>Login Timed Out</title>
        <description
            title="{{title}}"
            handlesOverflow="true" >Your login has timed out.</description>
        <!-- Put in your start screen Guid here -->
        <button rockCommand="replacePage" rockPageGuid="">
         <text>Home</text>
      </button>
    </alertTemplate>
</document>

Replace rockPageGuid with the Guid of your start screen.

Next, let's wire up the button that actually pushes to this page in our start screen. In your start screen change:

<menuItem rockCommand="login" >
   <title>Log In</title>
 </menuItem>

To:

<menuItem rockCommand="login" 
    rockLoginPageGuid="" 
    rockLoginTimeoutPageGuid=""
    rockLoginSuccessPageGuid="">
    <title>Login</title>
</menuItem>

With the rockLoginPageGuid being the login page we created, the rockLoginTimeoutPageGuid being the login timeout page we created, and the rockLoginSuccessPageGuid being the Guid of the start screen.

Now, when you navigate to the page from your start screen, you should see an output similar to this:

When you scan the QR code, it will direct you straight to your external website to log-in, or if already logged in, will immediately authenticate you. The other option is to go to the link manually, and enter the authentication code.

Creating a Sign-in Page

Setting up the server

Configuring the TVML

The Login Page