FireBASED

Free, No-Code Memberships Infrastructure for Webflow

FireBASED helps you add membership functions like user accounts and logins
to any Webflow project.

Get started

what's included?

Step-by-step instructions

Bye bye, jargon. FireBASED is designed for the no-code community.

Includes prebuilt UI components

Includes forms that let users sign in, sign out, and create an account.

Generates the code for you automatically

No coding involved. Simply copy and paste, and you're good to go.

Step 1: Webflow

a. Clone the UI kit

View in Showcase

what's included?

Step-by-step instructions

Bye bye, jargon. FireBASED is designed for the no-code community.

Includes prebuilt UI components

Includes forms that let users sign in, sign out, and create an account.

Generates the code for you automatically

No coding involved. Simply copy and paste, and you're good to go.

b. Proceed to Step 2

what's included?

Step-by-step instructions

Bye bye, jargon. FireBASED is designed for the no-code community.

Includes prebuilt UI components

Includes forms that let users sign in, sign out, and create an account.

Generates the code for you automatically

No coding involved. Simply copy and paste, and you're good to go.

Step 2: Firebase

If you've never used (or heard of) Firebase before, don't worry. Just think of it as a tool made by Google that lets you add advanced features, like user logins, to your website.

It's the engine that will actually create the accounts, sign users in/out, and keep track of all the data. The best part is that it's 100% free and backed by Google's world-class security.

a. Create a Firebase Project

Go to firebase.google.com and click "Get Started"
Log in with your Google account, or create one if you don't have one
Disable Google Analytics. For our purposes, we don't need it. You can always add it later, though.
Click "Continue"

b. Wait for the project to initialize

The project will take a minute or two to get set up.
When it's complete, click "Continue."

c. Add your website

On the next screen, click the icon with the "</>" symbol labeled "Web"
Put your website name in the text box labeled "App nickname"
Leave the checkbox underneath it unchecked. We don't need Firebase Hosting.
Click "Register App"

d. Skip the "Add Firebase SDK" Step

After the app's done registering, a bunch of code will pop up.
Ignore this completely and click "Continue to console"

e. Enable Firebase Auth

In the menu on the left, click "Authentication"
Click "Get Started"
You should automatically be taken to the Sign-in method tab. If you aren't, click "Sign-in method" at the top of the page

f. Enable Email/Password Login

Under "Sign-in providers," click "Email/Password"
On the next screen, turn on the switch for "Email/Password," but leave the other one disabled
Click Save

This is the one we're looking for.

Select "HTTP referrers (web sites)"

g. Activate security measures

We're almost done, but we need to secure our database first so that only your website is authorized to create, sign in, or sign out users. To do this, we need to go to the Credentials page.
Click here to open the Credentials page. It'll load in Google Cloud, but that's ok. Firebase is part of Google Cloud.
Keep your Firebase console open in a separate tab. We'll be right back.
Underneath "API Keys," click on "Browser key (auto created by Firebase)
On the next page, look under "Application
If your page is empty, check to make sure you have a project selected in the dropdown menu in the main navigation.

h. Give access to your website only

A new section titled "Website restrictions" will now be visible
Add two items: your preview URL from Webflow and your live domain. Be sure to input the entire URL (including the https://)
When you're finished, scroll to the bottom and click "Save"

i. Open project settings in Firebase

Return to Firebase and click the gear icon located at the top left, next to "Project Overview."
Click "Project Settings"

j. Copy your Config snippet

On the Project Settings page, scroll all the way down to the code block labeled "SDK setup and configuration"
By default, it'll have "npm" selected. Select "Config" instead.
Click the "copy" icon at the bottom right of the code block to copy it to your clipboard.
You're ready for the last step!

Proceed to Step 3

‍

Step 3: Generate Code

Paste the code snippet you just copied in the box below. Then, paste the generated code before the </body> tag on every page of your site.

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Note: Further written instructions coming soon! In the meantime, watch the tutorial for where to go from here.

Your code will appear here

Button Text

};
  
    // Initialize Firebase and declare "global" variables. all variables declared in this section are accessible to functions that follow.
    const app = initializeApp(firebaseConfig);
    const auth = getAuth(app);
  
    
    
   //identify auth action forms
    let signUpForm = document.getElementById('wf-form-signup-form');
    let signInForm = document.getElementById('wf-form-signin-form');
    let signOutButton = document.getElementById('signout-button');
    
   
    //assign event listeners, if the elements exist
    if(typeof(signUpForm) !== null) {
      signUpForm.addEventListener('submit', handleSignUp, true)
      } else {  };
      
     if(typeof(signInForm) !== null) {
      signInForm.addEventListener('submit', handleSignIn, true)
      } else {};
      
      if(typeof signOutButton !== null) {
        signOutButton.addEventListener('click', handleSignOut);
           } else {}
    
    //handle signUp
    function handleSignUp(e) {
        e.preventDefault();
        e.stopPropagation();
        
      const email = document.getElementById('signup-email').value;
      const password = document.getElementById('signup-password').value;
      
      console.log("email is " + email);
      console.log("password is " + password + ". Now sending to firebase.");
      
      createUserWithEmailAndPassword(auth, email, password)
    .then((userCredential) => {
      // Signed in 
      const user = userCredential.user;
      console.log('user successfully created: ' + user.email)
      // ...
    })
    .catch((error) => {
      const errorCode = error.code;
      const errorMessage = error.message;
      var errorText = document.getElementById('signup-error-message');
      console.log(errorMessage);
      errorText.innerHTML = errorMessage;
      // ..
    });
  
    };
  
      //handle signIn
    
    function handleSignIn(e) {
        e.preventDefault();
        e.stopPropagation();
        
      const email = document.getElementById('signin-email').value;
      const password = document.getElementById('signin-password').value;
      
      signInWithEmailAndPassword(auth, email, password)
    .then((userCredential) => {
      // Signed in 
      const user = userCredential.user;
      console.log('user logged in: ' + user.email);
      // ...
    })
    .catch((error) => {
      const errorCode = error.code;
      const errorMessage = error.message;
      var errorText = document.getElementById('signin-error-message');
      console.log(errorMessage);
      errorText.innerHTML = errorMessage;
      
    });
    }
    
  function handleSignOut() {
      signOut(auth).then(() => {
    console.log('user signed out')
    // Sign-out successful.
  }).catch((error) => {
  const errorMessage = error.message;
  console.log(errorMessage);
    // An error happened.
  });
    
  }
  
  
  onAuthStateChanged(auth, (user) => {
  		let publicElements = document.querySelectorAll("[data-onlogin='hide']");
      let privateElements = document.querySelectorAll("[data-onlogin='show']");
  
      if (user) {
      // User is signed in, see docs for a list of available properties			
      
      const uid = user.uid;
      
      privateElements.forEach(function(element) {
      element.style.display = "initial";
      });
      
      publicElements.forEach(function(element) {
      element.style.display = "none";
      });
      
      console.log(`The current user's UID is equal to ${uid}`);
      // ...
    } else {
      // User is signed out
      publicElements.forEach(function(element) {
      element.style.display = "initial";
      });
      
      privateElements.forEach(function(element) {
      element.style.display = "none";
      });
      // ...
    }
  });
  </script>

Step 4: Automate!

Watch the tutorial below for instructions. Text version coming soon.

Paste your Webhook URL here:

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Your code will appear here

Button Text

FireBASED

Free, No-Code Memberships Infrastructure for Webflow

Step 1: Webflow

a. Clone the UI kit

b. Proceed to Step 2

Step 2: Firebase

a. Create a Firebase Project

b. Wait for the project to initialize

c. Add your website

d. Skip the "Add Firebase SDK" Step

e. Enable Firebase Auth

f. Enable Email/Password Login

g. Activate security measures

h. Give access to your website only

i. Open project settings in Firebase

j. Copy your Config snippet

Proceed to Step 3

Step 3: Generate Code

Paste the code snippet you just copied in the box below. Then, paste the generated code before the </body> tag on every page of your site.

Note: Further written instructions coming soon! In the meantime, watch the tutorial for where to go from here.

Your code will appear here

Step 4: Automate!

Paste your Webhook URL here:

Your code will appear here

Your screen's too small.

Your screen's
too small.