Setting up User Profiles and Authentication on Webflow— Tutorial Part 2

Building Web Applications on Webflow using custom Javascript

Custom Code Embed on Webflow using VueJS Directives

In the first section of this tutorial we covered how to set up user authentication on Webflow using an 8base backend. Now, we’re going to add a customizable user profile that allows for a user avatar to get uploaded. This tutorial is a Part 2 of the 8base + Webflow series so please complete Setting up Authentication on Webflow before proceeding!‍

A quick recap from authentication on Webflow

In Part 1 we added some custom code to the head tag of our Webflow site. The first script imported via CDN is the Vue.js framework while the other adds a custom Eightbase module to our site globally that we’ll be able to access from any page.‍

Like last time, I encourage you to read through the scripts simply as a refresher. However, we’re essentially initializing a small module that we’ll use to handle some routing concerns and interface with the browser’s localStorage API.

Also, we’ll also be adding in the Filestack CDN to help us handle file uploads!‍

<!-- FILESTACK CDN -->
<script src="https://static.filestackapi.com/v3/filestack.js "></script>