I understand that Wix hosts its own database, and thats awesome, but I have an app that uses firebase that I am trying to create a website for, that also connects to the same database (firebase.) Is there any way possible to connect wix to firebase?
2 Likes
Hi David,
The short answer is no - Wix Code only supports its internally used database.
The long answer is that you could possibly use wix-fetch and wix-http-functions , but this would greatly magnify the complexity of the project, as well as intruduce peformance penalties.
You might want to consider modifying the app’s design to use the native Wix Code database. Most likely you will find everything you need - and then some.
I hope that helps.
Yisrael
Thanks for the quick reply Yisrael. It seems wix isn’t a good fit for me then. I need to have access to firebase. Thank you for your honesty though!
No problem. Good luck.
Hey David, there’s actually a way to use all Firebase frontend tools (database, authentication, etc) with Wix. I faced the same problem and found a work around. It’s just a matter of recreating Firebase esm files (and their dependencies) in Wix as public files and then importing them as you would with any Wix modules.
I’ll create a post about it and share it here.
But is it able to handle user authentication and methods like ‘onAuthStateChanged’ or is it a server-side package like firebase-admin?
I’m also struggling with the same problem - I’m trying to support social user login through Firebase (e.g. login to my Firebase app through Facebook) in the front end of the Wix site. Is this possible?
The suggested nom module above is a dead end. I almost managed to have it working properly in the front-end by replicating each firebase js file in the public folder, but firebase-auth.js is huge and exceeds Wix’s bundling time .
@mjhymel111 a work around is creating an html (iframe) element and placing it in the site header
I actually ended up finding a hacky (?) solution to this with the help of Wix’s html element documentation ( https://support.wix.com/en/article/wix-code-working-with-the-html-element ). The trick is to add an iframe element that is allowed to import code from CDN and then pass data back and forth with messages. Here’s instructions to do something like login with Facebook using Firebase:
First, add an HTML iframe element to your page. Use “Edit Code” option on the iframe and select the “Code” option. In this iframe we are going to import Firebase code from CDN, initialize firebase from config, set up a listener to events from the Wix page, run Firebase login code, and finally send a message back to the Wix page with the result. In this section, paste the following code (sorry for the bad formatting in some places), making sure to update the config with your firebase config values:
<html>
<head>
<script src="https://www.gstatic.com/firebasejs/5.8.2/firebase.js"></script>
<script type="text/javascript">
var config = {
/* your firebase config,
obtained from firebase console */
};
firebase.initializeApp(config);
// listen for messages from Wix page
window.onmessage = (event) => {
if (event.data) {
let receivedData = event.data;
if (receivedData == "LOGIN_WITH_FACEBOOK") {
var provider = new firebase.auth.FacebookAuthProvider();
firebase.auth().signInWithPopup(provider).then((creds) => {
// creds contains token, etc that you need
// see https://firebase.google.com/docs/auth/web/facebook-login
// Send the results back to the Wix page
window.parent.postMessage('CREDS:' + JSON.stringify(creds), "*");
}).catch((error) => {
// always good to catch any errors
window.parent.postMessage('ERROR:' + error, "*");
});
}
}
};
</script>
</head>
</html>
Next, in your Wix page code, we want to set up our page to listen for events from the iframe, so add the following to your $w.onReady function:
$w.onReady(function () {
// The rest of your onReady code...
//html1 is the name of your html element
$w("#html1").onMessage((event) => {
let received = event.data;
if (received) {
if (received.startsWith('CREDS')) {
let json = received.replace('CREDS:', '');
let obj = JSON.parse(json);
console.log('Wix got CREDS: ' + JSON.stringify(obj));
// now do what you want with the obj
// e.g. access token at obj['access_token']
}
else if (received.startsWith('ERROR')) {
console.log('Wix got ERROR: ' + received.toString());
}
else {
console.log('Wix got: ' + received.toString());
}
}
});
});
Finally, add a button to the page to post a message to the html element to kick off the login popup:
export function button_click(event) {
//html1 is the name of your html element
$w("#html1").postMessage("LOGIN_WITH_FACEBOOK");
}
Hopefully that explanation makes sense for others.
@brdu1976 Thanks! I just figured this out myself as well, posted a quick writeup to help anyone else having the same issue below.
Exactly the same solution I’ve applied. Passing messages between the website and an iframe
Hi Bruno, is your post available somewhere?
Hi @Mitchell Hymel, I was wondering is it possible to put the initialized config in backend file like api key.
Is it expose the insecure risk?
Thank you!
@d24659033 There’s no risk in exposing the firebase config on client side (assuming you have set up on firebase server side that only authorized users can interact with your data) - and it’s actually needed to login with firebase. See this StackOverflow post for a better explanation: https://stackoverflow.com/questions/37482366/is-it-safe-to-expose-firebase-apikey-to-the-public
@mjhymel111 Thank you for your help! And I still tried to put logic in backend file, It seems WIX not allow you to use auth provider there like facebook even though I have installed the firebase package.
var provider = new firebase.auth.FacebookAuthProvider();
code always break after this line of code, any help?
ps: I ran this code after I call initializeApp method of firebase.
@d24659033 You can’t use firebase auth providers on the backend, they can only be used in front end code. The initial comment I posted described how you can get the necessary credentials to interact with firebase either via REST calls in the front end, or you can pass the credentials to the back end and use the firebase npm package.
@mjhymel111 Thank you, appreciate your answer.
these packages doesn’t seem to work