HYPR
The HYPR Connector manages authentication requests to the HYPR platform. These requests could be “passwordless” with no other IDP providing primary identity information, or they can be used as a second factor in conjunction with another Identity Provider.
This connector manages the user’s authentication experience in the browser with three different pages:
- an interface for the user to provide their username if HYPR is used as a passwordless first factor
- an interstitial page displayed while waiting for the user’s response to the HYPR platform
- an error page for exceptional conditions
Each of these have a default implementation, but you can provide customized pages or completely change the user’s interactions via Service Extension.
Configuration options
The following values are used to configure the HYPR connector via the Orchestrator configuration file.
Name
name
is used to reference this connector elsewhere in config.
HYPR Domain
hyprDomain
is the base domain of the HYPR account.
HYPR App ID
hyprAppID
is the name of the application as defined in the HYPR Control Center.
Access Token
accessToken
is the API token configured in the HYPR Control Center. This is
sensitive information which should be retrieved from a secret provider in
production environments. At the bare minimum, it should have application
authentication permissions.
QR Authentication
By default the Hypr connector will use push based authentication for prompting the user to authenticate. However, you can enable QR authentication which will display a QR code to the user which should be scanned by the Hypr Mobile App.
Enabled
Set to true
to use QR Authentication. It is false
by default.
Status Check URL (optional)
statusCheckURL
is used by the interstitial page to poll for status while waiting
for the user to complete the authentication on their device. This endpoint is hosted
by the Orchestrator, so the domain specified should resolve to a domain the
Orchestrator hosts. It can also be set as a relative path. In either case, it must
not conflict with any paths to protected applications. If unset, the value
/.hypr-status-check
will be used.
When specifying a statusCheckURL
, use absolute (full) URL including scheme, hostname, and path to ensure status requests are routed correctly.
Always specify custom statusCheckURL
value if the routePattern
includes a hostname.
For example, if the routePattern
is defined as follows:
routePatterns:
- api.example.com
then the statusCheckURL
value might be:
statusCheckURL: https://api.example.com/.hypr-status-check
Login URL (optional)
loginURL
is used to post the username to be authenticated. This endpoint is hosted
by the Orchestrator, so the domain specified should resolve to a domain the
Orchestrator hosts. It can also be set to a relative path. In either case, it must
not conflict with any paths to protected applications. If unset, the value
/.hypr-login
will be used.
When specifying a loginURL
, use absolute (full) URL including scheme, hostname, and path to ensure status requests are routed correctly.
Always specify custom loginURL
value if the routePattern
includes a hostname.
For example, if the routePattern
is defined as follows:
routePatterns:
- api.example.com
then the loginURL
value might be:
loginURL: https://api.example.com/login
Custom Intersitial HTML (optional)
customInterstitialHTML
The page displayed while waiting for the user to respond to the HYPR prompt. It should contain the file system location of an HTML page.
If the value is unset a default interstitial page will be used.
Custom Login HTML (optional)
customLoginHTML
is the page displayed to prompt the user for their HYPR username.
It should contain the file system location of an HTML page. If the value is unset a
default login page will be used.
Custom Error HTML (optional)
customErrorHTML
is the page displayed for error conditions. It should contain the
file system location of an HTML page. If the value is unset a default error page will
be used.
Examples
Using HYPR as an IDP
Push Based Authentication
connectors:
- name: hypr
type: hypr
hyprDomain: "https://example.hypr.com"
hyprAppID: "strata"
accessToken: <HYPR_SECRET>
apps:
- name: ExampleApp
type: proxy
routePatterns:
- /
upstream: https://app.exmaple.com
policies:
- location: /
authentication:
idps:
- hypr
authorization:
allowAll: true
QR Code Authentication
connectors:
- name: hypr
type: hypr
hyprDomain: "https://example.hypr.com"
hyprAppID: "strata"
accessToken: <HYPR_SECRET>
qrAuthentication:
enabled: true
apps:
- name: ExampleApp
type: proxy
routePatterns:
- /
upstream: https://app.example.com
policies:
- location: /
authentication:
idps:
- hypr
authorization:
allowAll: true
Customizing the Login Experience
There are three customization points for the HYPR connector’s user interactions. Each of these can deliver a custom HTML page stored in a location reachable by the Orchestrator, as shown above. The Orchestrator uses Go Templates to provide relevant arguments to be rendered.
Custom login page
This page will need to POST the username content to the login URL, which will be delivered in the LoginURL
template value. The originally requested page can be found in the RedirectURL
template value, and should be posted to the login URL along with the username.
<html>
<body>
<form method="POST" action="{{.LoginURL}}">
<input type="hidden" name="redirectURL" value="{{.RedirectURL}}">
<input type="text" name="username">
<input type="submit">
</form>
</body>
</html>
Custom interstitial page
This is a holding page for the user’s browser session while they respond to the
prompt on the HYPR app. It will need to poll the StatusCheckURL
template value to
determine when the request has completed. The originally requested URL is available
in the RedirectURL
template value.
If QR Authentication is enabled, the QR code image will be available in
the QRCodeImg
template value.
<html>
<head>
<script type="text/javascript">
function checkHYPRStatus() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == XMLHttpRequest.DONE) {
if (xmlhttp.status == 200) {
if (xmlhttp.responseText == "COMPLETED") {
window.location.replace("{{.RedirectURL}}");
return;
}
setTimeout(checkHYPRStatus, 2000)
}
}
}
xmlhttp.open("GET", "{{.StatusCheckURL}}", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send();
};
window.onload = function () {
checkHYPRStatus();
};
</script>
</head>
<body>
<div>
{{ if not .QRCodeImg }}
<div style="font-weight: 400;font-size: 14px;white-space: pre-line;">
We're sending you a notification to confirm it's really you...
</div>
{{- else }}
<div style="font-weight: 400;font-size: 14px;white-space: pre-line;">
open your Hypr app and scan the QR code below.
</div>
<div id="qr-code">
<img src="data:image/png;base64,{{.QRCodeImg}}" alt="QR Code">
</div>
{{- end }}
</div>
</body>
</html>
Custom error page
This page is used to render error messages, which are available in the Error
template value.
<html>
<body>
An error has occurred: {{.Error}}
</body>
</html>