Streaming live at 10am (PST)

Webflow with Firebase User Authentication - New video series


#1

Hey everyone,

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.

Jason


#2

This is INSANE! Thank you so much for sharing!

Is it possible to limit the Sign up to a specific @mydomain.com email address?


#3

Hey Donald,

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>

#4

Thank you so much! I’ll give it a try for sure!