How can user authentication be set up on a Webflow site without using Firebase UI and instead building custom forms for full control over the site's appearance and functionality?
TL;DR
- Create a Firebase project, enable desired auth methods, and copy the Firebase config.
- Add Firebase SDK scripts and initialization code to Webflow’s custom code section.
- Build custom login, sign-up, and optional reset forms using Webflow form elements.
- Use JavaScript to intercept submissions and authenticate users with Firebase methods.
- Monitor auth state to manage redirects and protected page access client-side.
- Add logout functionality via JavaScript and handle post-logout redirects.
To set up user authentication on a Webflow site without using Firebase UI, you’ll need to integrate Firebase Authentication manually using custom forms, JavaScript, and Webflow’s native form elements for full design control.
1. Configure Firebase Project
- Go to the Firebase Console and create a new project.
- Enable Authentication from the left menu and select Email/Password (or other desired providers like Google, GitHub, etc.).
- Go to Project Settings > General and copy your Firebase Web Config (apiKey, authDomain, etc.).
2. Add Firebase SDK Script to Webflow
- In Webflow, go to Project Settings > Custom Code.
- In the Footer section, add the Firebase SDK scripts from the official CDN:
- Firebase core (
https://www.gstatic.com/firebasejs/10.0.0/firebase-app.js) - Firebase Auth (
https://www.gstatic.com/firebasejs/10.0.0/firebase-auth.js) - Also include a script that initializes Firebase with your project’s config.
3. Build Custom Login & Sign-Up Forms in Webflow
- Use Webflow’s native form elements to build your custom:
- Sign-up form (email, password)
- Login form (email, password)
- Optional: Password reset form
- Assign custom IDs or class names to form elements to target them via JavaScript.
4. Handle Form Submissions with JavaScript
- Inside the Custom Code Footer (or via Webflow’s Embed element), write JavaScript that:
- Prevents native form submission
- Extracts form input values
- Uses Firebase tokens to sign up or log in users via the Firebase JavaScript SDK
- Example methods:
createUserWithEmailAndPassword(),signInWithEmailAndPassword()
- Example methods:
5. Manage Auth State and Redirects
- Use
onAuthStateChanged()to monitor login state. - Redirect users to protected pages or hide/show elements based on auth status.
- Example: If user is not logged in, redirect them to the login page.
6. Secure Protected Pages (Client-Side Only)
- In each protected page’s Page Settings > Custom Code > Footer, add a script that:
- Checks if a user is logged in through
firebase.auth().currentUser - If not logged in, redirects to the login page
- For added control, you can store the user token in
localStorageorsessionStorage.
7. Optional: Logout Functionality
- Add a “Logout” button and attach a JavaScript
clickhandler that callsfirebase.auth().signOut(). - On successful logout, redirect the user to the homepage or login screen.
Summary
To enable user authentication with custom form control on a Webflow site, integrate Firebase Authentication via the SDK, create Webflow-based forms, and handle interactions using JavaScript. This setup lets you fully own the front-end design while benefiting from Firebase’s secure backend auth services.