Developer Docs - Apple TV Docs - Creating a Sign-in Page

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

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.

The Login Page

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.

    
        
    

    
        
            
        
            
        
            
                Scan QR Code
            
            
            
                OR
            
            
                
                Sign-in or create an account at https:/example.com/page/123
            
            
            
                Enter the code below:
            
            
            
                {authCode}
            
        
    

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:

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

    
        
        Your login has timed out.
        
        
         Home
      
    

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:

To:

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.