JSFiddle - React, Tailwind, and code Playground

HTML

Link:<br>
<input data-bind="value: link"><br>
Provider<br>
<input data-bind="value: provider"><br>
Challenge URL:
<input data-bind="value: challenge" readonly>

CSS

input {
  width: 100%;
}

JavaScript

function ViewModel() {
  this.link = ko.observable("https://example.com/Vinyl/app/Northwind");
  this.provider = ko.observable("SAML");
  
  var startOfRelativeLink = ko.computed(function() {
    return this.link().indexOf("/app");
  }, this);
  
  var root = ko.computed(function() {
    return this.link().substr(0, startOfRelativeLink());
  }, this);
  
  var relativeLink = ko.computed(function() {
    return this.link().substr(startOfRelativeLink());
  }, this);
  
  var response = ko.computed(function() {
    return root() + "/auth/authenticated?returnUrl=" + encodeURIComponent(relativeLink());
  }, this);
  
  this.challenge = ko.computed(function() {
    return root() + "/service/authentication/external?provider=" + encodeURIComponent(this.provider()) + "&returnUrl=" + encodeURIComponent(response());
  }, this);
}

ko.applyBindings(new ViewModel());