Adding user id to a form with javascript

[real_manuel (Manuel)]

I am adding some JS script to allow logged in users to upload a file to a server. I would like this file to be associated to a user id, hence would like to send the user_id in the form.

Is that possible? If not, how could I do that in webflow (with Javascript or whatever way)?

[memetican (Michael Wells)]

It’s not possible yet, but the Webfow Memberships team is aware of the user need. I’d encourage you to post this in the Memberships BETA forum on circle.so, so that it stays top of mind.

If you’ve forgotten the link, check your original welcome to the BETA emails.

[real_manuel (Manuel)]

That really breaks my workflow… what would be an alternative? maybe managing all the users with another solution such as firebase?

[real_manuel (Manuel)]

Sorry, cannot find the Memberships BETA forum…

[memetican (Michael Wells)]

Memberstack has the ability to access its member ID from script.

Currently any solution based on Webflow Memberships will require a very convoluted process to capture that ID and expose it so that you can use it client-side.

[real_manuel (Manuel)]

I see… I wanted to avoid that.

That’s very strange as some kind of user information should be there, specially if you use the CMS.

By inspecting the code with chrome I can see the webflow frontend API… but am still not able to expose the user id or some user information (except that the user is logged in…)

[real_manuel (Manuel)]

Michael, what would be a convoluted way of capturing the id with webflow that you can think of?

Thanks again

[ChrisDrit]

@real_manuel

Is that possible? If not, how could I do that in webflow (with Javascript or whatever way)?

Hi Manuel.

You should put Javascript aside for this as I’m assuming you’re speaking to Webflow Memberships when you say “allow logged in users to…”.

@real_manuel

…what would be a convoluted way of capturing the id with webflow that you can think of?

Nothing convoluted about it, but you’ll have to glue some stuff together (nothing exists out of the box).

Here’s a fairly common approach:

Do your form upload from a CMS Collection Page that has access to the users email address, or id, or something unique to them. Include that in a hidden field.

To get that unique something into a CMS item, create a Webflow Webhook that triggers on “membership account added”.

That’s it.

1. When a new Webflow Memberships is added…
2. This sends the email or something unique into your CMS.
3. You then grab that from your CMS Collection Page…
4. And add it as a hidden field in your file upload form.

[memetican (Michael Wells)]

@real_manuel

Michael, what would be a convoluted way of capturing the id with webflow that you can think of?

At present the MembershipID is only exposed server-side, so you need to make that accessible client-side. For you this is the most efficient approach;

1. Setup a Webflow webhook to fire when a new user is created. Connect that to a webhook URL on your favorite automation platform. When a new user is created, at that moment, in that webhook event, you’ll have the user’s ID.
2. Have your server side automation turn around and immediately update that same Member record, pushing that user_id into a custom Member field you’ve already created. Now, that ID is accessible on the /user-account page as a custom field.
3. On the User Account page, add that field so it’s accessible in the HTML, and then wrap it in a hidden DIV. You want Webflow to populate it, but no need for users to see their userID. You especially don’t want them to edit it. Add an HTML ID to this input element as well, like user_id so that you can reference it easily.

Now for the most awkward part; you need to write a script that will access that data.
User custom fields are currently only available on the /user-account page, which means your script has to get it from there. Your script will;

1. Verify the user is logged in ( check for the wf logged in cookie )
2. Create an IFRAME, which loads /user-account. Make sure to use a relative path, so the hostname passes the same-domain CORS test. Webflow membership sites and e-commerce sites specify self as an IFRAME ancestor restriction.
3. Wait roughly 3 seconds… this is the tricky part, the population scripts are slow and they set the value of the input. As such there is no possibility to trigger via a mutation observer. You basically have to poll it every 200ms and wait for some value to be returned.
4. Once it’s there, grab that value.

You will want to cache that ID but that’s another layer of complexity, because you have to know when to clear it, and there is no logout page. I store it in sessionStorage ( not localStorage ), and clear it any time the user visits the /log-in page, or any time the login cookie test returns false.

[real_manuel (Manuel)]

Hey Chris and Michael, thanks both for the clever answers! I understands what you suggest, although is not straightforward. It makes me think that maybe changing the log in system to Firebase is possibly easier. Will work further on the topic. Thanks again!

[ysl150 (yoonsun lee)]

If you utilize Firebase, you will still need to set conditional Logic. (Wized/Xano)

Xano can take user id and Firebase Auth and has a “hooked” Webflow connect. Wized will generate “secure” user ID. If you utilize Webflow’s Subscription ID to reference a status collection and then use Filters to Show Hide User lists in Template, you should be able to manage custom User Attributes in Collections with real time tagging.

Client Project Dashboard | Wized V1

[ysl150 (yoonsun lee)]

Wized 2 with Firebase walkthrough.

Use Firebase for Auth in Wized

[real_manuel (Manuel)]

I needed to work on the integration with firebase and this has been quite painful.

I have left here a repository with instructions on how to do it. How it helps someone in the future.

GitHub - manuelsh/minimal-firebase-authentication: This is a self contained...

[WillSayer (William Sayer)]

Hey @memetican! (again)

I’ve been trying to do that (access memberstack data using JS) for days but haven’t been able to figure it out yet…

Could you pretty please help explain what I’m doing wrong?

1. I’ve put the following code in the site header:
   <script defer data-memberstack-app="app_(my-app-id)" src="https://static.memberstack.com/scripts/v1/memberstack.js" type="text/javascript"></script>

2. Put the following code in the page custom code area:

    <script> 
      const memberstack = window.$memberstackDom;
      memberstack.getApp().then(({ data : app }) => console.log({ app }))
    </script>

I was simply following the instructions found here: https://docs.memberstack.com/hc/en-us/articles/11217223809819-Vanilla-JS-Guide

However, my console log shows these errors and I can’t pass any member data through:

Any help is much appreciated!

Kind regards,
Will

[memetican (Michael Wells)]

Hi @WillSayer ,

I haven’t worked with Memberstack at all, it wasn’t suitable for any specific client projects yet, which either required tighter security or lower cost.

But glancing at the docs, they don’t indicate the defer in your script element.
That may be causing issues for you if window.$memberstackDom is not defined at the point you are trying to access it.

If that’s not the problem, your best bet is probably Memberstack’s own forums.

[WillSayer (William Sayer)]

Thanks for such a quick reply!
I tried without ‘defer’ but still not working… will resort to Memberstack forums.
Thanks again

[ChrisDrit]

@WillSayer

I’ve been trying to do that (access memberstack data using JS) for days but haven’t been able to figure it out yet…

@WillSayer what you posted should work just fine. That’s the correct approach.

Please add a share link and I can take a look at it for you.

Beyond that, here’s a screencast using the Memberstack frontend api + Webflow:

• Simple course site with only Webflow & MemberStacks frontend API

This get’s you what you need.

A small bit has changed since, but it gives you guidance.

[WillSayer (William Sayer)]

Hey @ChrisDrit

Thanks for the validation, this is driving me crazy!
here’s the link

Thanks so much! having a look through that course now

Will

[ChrisDrit]

@WillSayer,

The first thing I noticed was this error:

Which is getting called from somewhere in your site:

You’ll want to fix that.

I do see the correct script being called:

But you’ll want to double check that application ID.

Beyond that, I don’t see any other errors on your site. What page specifically triggers the error you mentioned above?

[WillSayer (William Sayer)]

Hey @ChrisDrit,

I put that line of code in to initiate the Memberstack SDK (at least that’s what chatGPT said I should do) is there another way to initiate it or have I already done that with the line of code above?

Anyway I removed that code and now only get errors whenever I use memberstack-specific code such as
if (MemberStack.isAuthenticated()) {...
which makes me think I haven’t loaded the SDK properly.

Also, do you think having the Memberstack App ID visible is a security concern?

Kind regards,
Will Sayer