Different potential solutions for templateless & renderless "provider" components

possible-today.ts

import Component from '@glimmer/component';
import { setComponentTemplate } from '@ember/component';
import { action } from '@ember/object';
import { hbs } from 'ember-cli-htmlbars';

export default setComponentTemplate(
  hbs`
    {{~yield
      (hash
        user=this.user
        login=this.authenticate
        logout=this.logout
      )
      this.isLoggedIn
    ~}}
  `,
  class AuthProviderComponent from Glimmer {
    @tracked user?: User;
    
    // This only exists to showcase passing more than one positional argument to `{{yield}}`.
    get isLoggedIn() {
      return Boolean(this.user);
    }

    // Notice the alias of `login=authenticate`.
    @action
    authenticate(username: string, password: string): Promise<void>;

    @action
    logout(): Promise<void>;
  }
)

yield-decorator.ts

import Component, { yield } from '@glimmer/component';
import { action } from '@ember/object';
import { hbs } from 'ember-cli-htmlbars';

type YieldDecoratorOptions = { position?: number; asIs: true }
  | { position?: number; as?: string };

export default class AuthProviderComponent from Glimmer {
  @yield
  @tracked user?: User;

  @yield({ position: 1, asIs: true })
  get isLoggedIn() {
    return Boolean(this.user);
  }
  
  @yield({ as: 'login' })
  @action
  authenticate(username: string, password: string): Promise<void>;

  @yield
  @action
  logout(): Promise<void>;
}

yield-symbol.ts

import Component, { YIELD } from '@glimmer/component';
import { action } from '@ember/object';
import { hbs } from 'ember-cli-htmlbars';

export default class AuthProviderComponent from Glimmer {
  @tracked user?: User;

  // This only exists to showcase passing more than one positional argument to `{{yield}}`.
  get isLoggedIn() {
    return Boolean(this.user);
  }
  
  // Notice the alias of `login=authenticate`.
  @action
  authenticate(username: string, password: string): Promise<void>;

  @action
  logout(): Promise<void>;
    
  get [YIELD]() {
    return [
      { user: this.user, login: this.authenticate, logout: this.logout },
      this.isLoggedIn
    ];
  }
}

I think the easiest to comprehend API is the [YIELD] symbol.