Можно ли настроить виджет Okta Sign-In с компонентами Angular Material?

Я только что добавил @okta/okta-signin-widget в мой Angular SPA, и он отображает что-то вроде:

<span>
    <input id="okta-signin-username" type="text">
</span>

Я оформляю свой Angular SPA с помощью библиотеки материалов Angular, которая требует другой структуры DOM:

<mat-form-field>
    <input id="okta-signin-username" type="text" matInput>
</mat-form-field>

Кто-нибудь знает, как это сделать? Из-за фабрик компонентов Angular я не могу просто реструктурировать DOM с помощью javascript, как показано ниже:

this.widget.on('ready', (context) => {
    // This WON'T work!
    const username = document.getElementById('okta-signin-username');
    const field = document.createElement('mat-form-field');
    const parent = username.parentElement;
    field.appendChild(username);
    parent.appendChild(field);
});

Конечно, это изменит DOM, но это позволит обойти фабрики компонентов Angular, которые необходимы для создания полной структуры:

<mat-form-field>
    <div class="mat-form-field-wrapper ...">
          <div class="mat-form-field-flex ...">
              <div class="mat-form-field-infix ...">
                  <input id="okta-signin-username" type="text" matInput>
              </div>
         </div>
    </div>
</mat-form-field>

Кто-нибудь знает, как этого добиться? В настоящее время я играю с Angular ComponentFactorResolver, как указано в https://angular.io/guide/dynamic-component-loader. Я думаю, что попытаюсь объединить приведенный выше javascript с использованием фабрики компонентов, но, возможно, у виджета возникнут проблемы, если я попробую это? Может есть способ проще?

Могу ли я, возможно, создать свою собственную форму входа и переместить в нее входные данные из виджета после рендеринга?

Спасибо за любые подсказки и помощь!