Webflow with Firebase User Authentication - New video series

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

6 Likes

This is INSANE! Thank you so much for sharing!

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

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>
1 Like

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

Amazing! Thank you so much for the tutorial.

I followed all your steps for SignUp but I can’t help but run into the following issue:

TypeError: firebase.auth is not a function. (In ‘firebase.auth()’, ‘firebase.auth’ is undefined)
Global Code — login:28
signup — login:47

http://tax-project.webflow.io/login

Do you have any idea what might have gone wrong?

Thanks in advance!

1 Like

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.

3 Likes

You’re awesome! This worked for me, thank you so much!

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:

<script>
signupButton.addEventListener('click', signup);

function signup() {
    signupButton.style.display = 'none';
    signupError.style.display = 'none';
    var email = signupEmail.value;
    var password = signupPassword.value;

    firebase.auth().createUserWithEmailAndPassword(email, password)
    .then(function () {
        window.location.replace('./restricted');
        })
            
    .catch(function(error) {
    // Handle Errors here.
    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';
    // ...
    });
}

Any idea why this might be? Thanks again!

1 Like

Getting “Passwords cannot be submitted” message, how do you remove?

Otherwise everything works great!

1 Like

I am also getting a “Passwords cannot be submitted” message.

1 Like

How to add text input. Alt for windows not working… would really appreciate your help…

1 Like

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>
2 Likes

Hello Jason ,

Thanks once again for the amazing tutorials! I have a question about replacing Firebase’s error messages with something that is more user friendly.

I’ve tried a few things but the message only displays when the variable is set to the default error.message

Whenever I try to replace it using the innerText property it doesn’t show up and my console shows an error of undefined.

Your help will be greatly appreciated!

1 Like

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)

Hey @webflow_auth ,

So I ran into a similar issue when I was doing this too and the issue was that I did not add the specific firebase modules that I needed.

In this case that would be the auth.js module. Check Step 3 from the Firebase docs

  <!-- Add Firebase products that you want to use -->
  <script src="/__/firebase/7.15.0/firebase-auth.js"></script>

Double check to see if you have the firebase-auth.js script in your code somewhere, if not add it AFTER the script that loads Firebase itself.

Hope that helps

Hey, thank you for the tutorial.

I’ve made a few attempts and looked at the documentation, and the posts above, and I am still having trouble getting started.

I would greatly appreciate some help. I don’t think firebase is connecting. I get a bunch of 404 errors and

Uncaught ReferenceError: firebase is not defined
at sign-up:37
sign-up:43 Uncaught ReferenceError: firebase is not defined
at sign-up:43

Thank you!

Please ignore previous request above. I set up a database and added this code, which did remove those errors:

// Make auth and firestore references
const auth = firebase.auth();
const db = firebase.firestore();

@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/...