Best approach to create user profile page with SA5?

General
1

Hi! I am trying to link my E-commerce with CMS. I created an extra CMS collection called Users and on a new order I send the email address from Webflow Users to “Users” collection with Logic.
And then I get the current user email with SA5, making an API call to my “Users” collection and if they match I return a slug and append it to my user profile url.

Seems to be working but obviously not secure, and on top of that all other profile pages are not restricted for other users if they “guess the link”

I think I am reinventing a wheel and there must be a simpler way to do this? :smiley:

Here is my code

<!-- Sygnal Attributes 5 | Memberships --> 
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/sygnaltech/webflow-util@5.3.4/dist/css/webflow-membership.css"> 
<script defer src="https://cdn.jsdelivr.net/gh/sygnaltech/webflow-util@5.3.4/dist/nocode/webflow-membership.js"></script>
<script>
window.sa5 = window.sa5 || [];
window.sa5.push(['getMembershipConfig', 
  (config) => {
    // Apply any configuration settings here
    // such as access groups 
    return config;
  }]);
</script>

<script>
window.sa5 = window.sa5 || [];
window.sa5.push(['userInfoChanged', (user) => {
    // Access the 'email' property of the 'user' object
    var userEmail = user.email;

    // Log the email separately
    console.log("User Email:", userEmail);

    const apiUrl = "https://FIREBASE_URL";

    // Function to fetch data iteratively
    const fetchData = async (limit, offset) => {
        const response = await fetch(`${apiUrl}?limit=${limit}&offset=${offset}`);
        return response.json();
    };

    // Recursive function to fetch all items
    const fetchAllData = async (limit, offset = 0) => {
        const response = await fetchData(limit, offset);
        const { items, pagination } = response;

        // Check each item in the response for a match with the logged-in user's email
        const matchingItem = items.find(item => item.fieldData.name === userEmail);

        if (matchingItem) {
            // If a match is found, log the corresponding "slug" field
            const globalUserSlug = matchingItem.fieldData.slug;
            console.log(`User's slug: ${globalUserSlug}`);
             // Update the URL using globalUserSlug
            const profileLink = document.getElementById('profileLink');
            profileLink.href = `/users/${globalUserSlug}`;
            
        } else {
            console.log("User not found in the response.");
        }

        // If there are more items, fetch the next batch
        if (pagination.total > pagination.limit + offset) {
            await fetchAllData(limit, offset + limit);
        } else {
            console.log("All data fetched");
        }
    };

    // Start fetching data
    fetchAllData(100); // Assuming your limit is 100 items
}]);
</script>
2

Hey Dmitry, some thoughts-

1 Like
3

Thanks a lot Michael for such and in-depth reflection on my trials!

4

@memetican May I ask an additional question, my code provided above seems to work but its not loading consistently each time and sometimes there is a 2 second or so glitch and if I happen to click on the user acount link before it, the slug is not ready yet.
Is it possible to directly send a request to API to get a slug data for a specific email in my collection, instead of doing it in the front end? I am not sure Webflow supports server side filtering. Is it possible with the alt ID maybe?

5

Not in any reliable way that I’m aware of, you’d have to dig into the Webflow v2 api docs.

1 Like