Is it possible to customize the Okta Sign-In Widget with Angular Material components?


I’ve just added @okta/okta-signin-widget to my Angular SPA, and it renders something like:

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

I style my Angular SPA using the Angular Material library , which requires a different DOM structure:

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

Does anyone know how to accomplish this? Because of Angular’s component factories, I can’t simply re-structure the DOM with typical javascript like below:

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;

Sure, this’ll change the DOM, but this circumvents Angular’s component factories, which are necessary for producing the complete structure:

    <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>

Does anyone know how to achieve this? I’m currently playing around with Angular’s ComponentFactorResolver as mentioned in I think I’ll be trying to combine the above javascript with the use of a component factory - but maybe the widget will have issues if I try that? Maybe there’s an easier way?

Could I perhaps create my own sign-in form and move the inputs from the widget into it once rendered?

Thanks for any hints and help!

No, I don’t think it’s possible to change the Sign-In Widget to use Angular Material. However, you can use the lower-level Auth JS with Angular Material to create a Login form.

1 Like

Okta offers so many tools, I have trouble knowing what exists and for what use cases they’re intended. This sure looks like a better fit than the widget. Thanks!

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.