How to clone?
Follow all these steps to clone the web app:
- Clone the Webflow website
- Clone the Wized project and paste the Wized embed code into the cloned Webflow website
- Build a Firebase backend (see below in walkthrough tutorial) and get your API key
Walkthrough tutorial
If you have any questions, please reach out to Support.
- Make sure Firebase is added in the My Apps panel in Wized.
- How to build the authentication backend for Firebase:
- Create a new Firebase project, give it a name and confirm
- You don't need to enable Google Analytics, this is optional
- In the Firebase dashboard, select Project Overview > Build > Authentication
- Select "Get started"
- Select Email/Password as Sign-in providers, keep Email link (passwordless sign-in) disabled (for now)
- Select "Templates" tab > Email address verification > Edit template
- This is where we edit the action URL. Currently, this is set to a default with your app name and "/_/auth/action". Change this to https://your-webflow-staging-page-name.webflow.io/auth/submit-reset-password > Select "Save"
- Create a Firestore Database: In the dashboard navigation select Extensions > Firestore Database > Select "Create Database" > Select "Start in production mode" and replace the line "allow read, write: if false;" with "allow read, write: if request.auth.uid != null;"
- Start a collection: Give the collection an ID of "users"
- Create your first document (sometimes this is only possible after 5 minutes or so, as the database does not seem to be ready right away): "Auto ID, "email" as String and insert any email (we have to add a document here, but can delete this later)
- If not done yet, create a Web app in your project, call it whatever you want
- Add the Firebase project ID, Firebase app ID, and Firebase API key to your Wized project
Additional information
- Webflow is used to build the web app UI, including the interaction.
- Wized is used to transform the UI into a functional web app component.
- For this project, Firebase is used as the backend.
