@okta-dfuhriman/okta-auth-js/samples/templates/partials/spa/form.html

The Okta Auth SDK

<form id="form" class="pure-form pure-form-aligned" target="/" method="GET" onsubmit="_onSubmitForm(event)" onformdata="_onFormData(event)">
  <div class="pure-control-group">
    <label for="issuer">Issuer</label>
    <input id="issuer" name="issuer" type="text" class="pure-input-1-2" />
  </div>
  <div class="pure-control-group">
    <label for="clientId">Client ID (SPA App)</label>
    <input id="clientId" name="clientId" type="text" class="pure-input-1-2" />
  </div>
  <div class="pure-control-group">
    <label for="scopes">Scopes</label>
    <input id="scopes" name="scopes" type="text" class="pure-input-1-2" />
  </div>
  <div class="pure-control-group">
    <label for="authMethod">Authentication Method</label>
    <select id="authMethod" name="authMethod" onchange="_onChangeAuthMethod(event)">
      <option value="redirect">Redirect to Okta</option>
      {{#if signinWidget}}
      <option value="widget">Okta Sign-in Widget</option>
      {{/if}}
      {{#if signinForm}}
      <option value="form">Custom forms</option>
      {{/if}}
      <!-- Other login flows can be added -->
    </select>
  </div>
  <div class="pure-control-group field-useDynamicForm">
    <label for="useDynamicForm">Use dynamic sign-in form (interaction code flow only)</label>
    <input id="useDynamicForm-on" name="useDynamicForm" type="radio" value="true"/> YES
    <input id="useDynamicForm-off" name="useDynamicForm" type="radio" value="false"/> NO
  </div>

  {{#if signinWidget}}
  <div class="pure-control-group field-idps">
    <label for="idps">IDPs (in format "type:id" space-separated, example: "Facebook:111aaa Google:222bbb")</label>
    <input id="idps" name="idps" type="text" />
  </div>
  {{/if}}
  <div class="pure-control-group">
    <label for="requireUserSession">Require Okta SSO session</label>
    <input id="requireUserSession-on" name="requireUserSession" type="radio" value="true"/> ON 
    <input id="requireUserSession-off" name="requireUserSession" type="radio" value="false"/> OFF 
  </div>
  <div class="pure-control-group">
    <label for="storage">Token storage</label>
    <select id="storage" name="storage">
      <option value="localStorage">localStorage</option>
      <option value="sessionStorage">sessionStorage</option>
      <option value="cookie">cookie</option>
      <option value="memory">memory</option>
    </select>
  </div>
  <div class="pure-control-group">
    <label for="startService">Start service for active auto-renew & cross-tab storage sync</label>
    <input id="startService-on" name="startService" type="radio" value="true"/> YES 
    <input id="startService-off" name="startService" type="radio" value="false"/> NO 
  </div>
  {{#if authn}}
  <div class="pure-control-group">
    <label for="useInteractionCodeFlow">Use Okta Identity Engine (interaction code flow)</label>
    <input id="useInteractionCodeFlow-on" name="useInteractionCodeFlow" type="radio" value="true"/> YES
    <input id="useInteractionCodeFlow-off" name="useInteractionCodeFlow" type="radio" value="false"/> NO
  </div>
  {{/if}}

  <div class="pure-controls">
    <input id="login-submit" type="submit" value="Update Config" class="pure-button pure-button-primary"/>
    <a href="/" onclick="_returnHome(event)" class="pure-button">Cancel</a>
  </div>
</form>