I'm writing a custom web browser with JavaFX to use with Firebase Authentication. The login page is hosted with Firebase Hosting and the *******.firebaseapp.com domain is authorised.
When I try to login with Google Chrome or Safari, the login script works just fine and all the code functions as it should.
However, when I try to use my JavaFX application to login, I get this error which doesn't allow me to login:
A network error (such as timeout, interrupted connection or unreachable host) has occurred.
This is usually displayed when the domain isn't authorised. Another issue which, apparently, displays this error is when <form> tags are used but I'm using <div> tags for the login page.
Here's the JavaFX code
/*
Initally based on https://docs.oracle.com/javafx/2/webview/jfxpub-webview.htm#CEGHBDHF
*/
public class Main extends Application {
private Scene scene;
@Override public void start(Stage stage) {
stage.setTitle("Web View");
scene = new Scene(new Browser(),750,500, Color.web("#666970"));
stage.setScene(scene);
stage.show();
}
public static void main(String[] args) {
launch(args);
}
}
class Browser extends Region {
final WebView browser = new WebView();
final WebEngine webEngine = browser.getEngine();
public Browser() {
//apply the styles
getStyleClass().add("browser");
// load the web page
webEngine.load("https://***.firebaseapp.com/login.html?a");
//add the web view to the scene
getChildren().add(browser);
webEngine.setOnAlert((WebEvent<String> wEvent) -> { // From https://stackoverflow.com/a/32682018
System.out.println("JS alert() message: " + wEvent.getData() );
});
}
private Node createSpacer() {
Region spacer = new Region();
HBox.setHgrow(spacer, Priority.ALWAYS);
return spacer;
}
@Override protected void layoutChildren() {
double w = getWidth();
double h = getHeight();
layoutInArea(browser,0,0,w,h,0, HPos.CENTER, VPos.CENTER);
}
@Override protected double computePrefWidth(double height) {
return 750;
}
@Override protected double computePrefHeight(double width) {
return 500;
}
}
And here's the login.js code
document.addEventListener("DOMContentLoaded", function(event) {
console.log(window.location.search);
document.getElementById("loginBtn").addEventListener("click", function(){
var email = document.getElementById("emailInput").value;
var password = document.getElementById("passwordInput").value;
firebase.auth().signInWithEmailAndPassword(email, password).catch(function(error) { // Login user
var errorCode = error.code;
var errorMessage = error.message;
if (errorCode == "auth/wrong-password") {
alert("Wrong password.");
} else {
alert(errorMessage);
}
console.log(error);
});
});
document.getElementById("registerBtn").addEventListener("click", function(){
var email = document.getElementById("emailInput").value;
var password = document.getElementById("passwordInput").value;
firebase.auth().createUserWithEmailAndPassword(email, password).catch(function(error) { // Register new user
var errorCode = error.code;
var errorMessage = error.message;
if (errorCode == "auth/wrong-password") {
alert("Wrong password.");
} else {
alert(errorMessage);
}
console.log(error);
});
});
$(document).keypress(function(e){ // From https://stackoverflow.com/questions/6542413/bind-enter-key-to-specific-button-on-page
if (e.which == 13){
$("#loginBtn").click();
}
});
firebase.auth().onAuthStateChanged(function(user) {
if (user && window.location.search != "?a") {
window.location = "dashboard.html";
} else if (user) {
firebase.auth().currentUser.getIdToken(/* forceRefresh */ true).then(function(idToken) {
window.location.href = ("http://*******.cloudfunctions.net/api?type=view&token=" + idToken);
}).catch(function(error) {
// Handle error
});
}
});
});
