I’ve made a new video series here which shows how to get user authentication working on your Webflow site. This is different to my last video series as this new approach doesn’t rely on Firebase UI. This means that you can have full control over the look and feel of your login and signup forms. Would be great to hear any feedback or hear what else you would like me to cover in future.
As far as I’m aware there is no official way to do this. However you could alter the signup function slightly to first check if the email address entered into the signup email field belongs to a certain domain. This isn’t 100% rock solid secure as you’re relying on your front end for validation, but this would stop anyone who isn’t malicious from signing up. To strengthen things further, if you went on to use the Firebase Database you could set your security rules to only allow users with a certain domain in their email address.
Here’s an example of altering the signup function to restrict signups to a certain domain:
<script>
signupButton.addEventListener('click', signup);
function signup() {
signupButton.style.display = 'none';
signupError.style.display = 'none';
var email = signupEmail.value;
var password = signupPassword.value;
var domain = email.split('@')[1];
if (domain !== 'alloweddomain.com') {
signupError.innerText = 'Sorry, this domain is not authorised for sign ups.';
signupError.style.display = 'block';
} else {
firebase.auth().createUserWithEmailAndPassword(email, password)
.then(function () {
window.location.replace('./private');
})
.catch(function (error) {
var errorCode = error.code;
var errorMessage = error.message;
console.log('Error code: ' + errorCode);
console.log('Error message: ' + errorMessage);
signupButton.style.display = 'block';
signupError.innerText = errorMessage;
signupError.style.display = 'block';
});
}
}
</script>
Hey I think Firebase has changed their initial setup instructions a bit since I made these videos. You are getting this error because your page doesn’t have the Firebase Auth library to call methods from. It’s still the same principal though, you need to explicitly include the library scripts for the services you need:
<script src="https://www.gstatic.com/firebasejs/6.2.3/firebase-app.js"></script>
// Below firebase-app.js you include the library scripts you need, in this case
// you need to include firebase-auth.js
<script src="https://www.gstatic.com/firebasejs/6.2.3/firebase-auth.js"></script>
<script>
var firebaseConfig = {
apiKey: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
authDomain: "XXXXXXXXXXXXXXXXX.firebaseapp.com",
databaseURL: "https://XXXXXXXXX.firebaseio.com",
projectId: "XXXXXXXXXXXXX",
storageBucket: "XXXXXXXXXXXXXXX.appspot.com",
messagingSenderId: "XXXXXXXXXXXXXXXX",
appId: "XXXXXXXXXXXXXXXXXXX"
};
firebase.initializeApp(firebaseConfig);
</script>
You should go to this page of their documentation and read it in full to understand better.
Hey Jason, your videos are amazing thanks! I had a quick question (after also having that problem above and fixing it thanks to more useful replies from you!)
When I enter a false email to test the errors, it displays the Error message but it displays the text I put in the text block on Webflow, not the Firebase error message so it isn’t specific to the problem that’s occurring. My code is as follows:
You can use a regular webflow form , however - delete and replace the submit button with your own and then add the ID’s and stuff just like in the video.
Also, to prevent webflow’s default form behavior, add this to your body tag custom code section on the pages that you have your firebase forms.
<!-- Prevent webflow form handling -->
<script>
var Webflow = Webflow || [];
Webflow.push(function() {
// === Custom Form Handling ===
// unbind webflow form handling
$(document).off('submit');
// new form handling
$('form').submit(function(evt) {
evt.preventDefault();
});
});
</script>
Hi - can you help me set up Fire base authentication in Webflow - I have watched your videos and at the end of part 4 I am getting this error message (screen shot)
@boafo You might already figure this out but you actually need to correct a link in the source. If you see console log with your code, it would show you 404 no source found.
Correct code should be something like this: <script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-auth.js"></script>
Instead of: <script src="/__/firebase/...