Custom Layout for a specific route not displaying with Iron Router

help
1

I want to use a different layout template for pages such as login, 404, and other pages.
I created the following template:

The custom layout

<template name="UtilityLayout">
  <div class="ui centered grid">
    <div class="six wide column">
      {{> yield}}
    </div>  
  </div>
</template>

However, when calling this template in my route (using Iron Router), it appears to be ignored and instead uses the default template. How can I update this so that it uses the intended template?

Iron Router Config:

Router.configure({
   layoutTemplate: 'AppLayout',
  loadingTemplate: 'Loading',
  notFoundTemplate: 'NotFoundLayout'
});

routes.js
(before hook and login route)

    Router.onBeforeAction(function () {
    
     // here, I want to redirect to /login if a user is not signed and if they are not already on login (to prevent a redirect loop)
      if (!Meteor.userId() && (Router.current().route.getName() !== 'login')) {
        this.redirect('login');
        // I also tried Router.go('login');
      } else {
        this.next();
      }
    });
    
    
   
    Router.route('/login', { name: 'login'}, function(){
   // **** This appears to be ignored ***
       this.layout('UtilityLayout');
    });
2

Turns out I need to create a controller for this route and specify the layout there: