Welcome to lets-form Discussions!

[guidone]

👋 Welcome!

We’re using Discussions as a place to connect with other members of our community. We hope that you:

• Ask questions you’re wondering about.
• Share ideas.
• Engage with other community members.
• Welcome others and are open-minded. Remember that this is a community we
  build together 💪.

To get started, comment below with an introduction of yourself and tell us about what you do with this community.

[maulik9898]

Impressive library! It aligns perfectly with my project requirements. I have a question regarding external variables in scripts:
My use case involves fetching data from a backend API to populate options for a select field. However, my API requires authentication. Is there a way to pass external variables, such as a bearer token, to the script? This would allow me to include the token in my API requests.
Specifically, I'm looking to do something like this:

1. Pass an authentication token to the form component.
2. Use this token in a script to make an authenticated API request.
3. Use the response data to populate the options of a select field.

Is this possible with LetsForm? If so, could you provide an example of how to implement this?
Thank you for your help, and for creating such a useful library!

[guidone]

Hi Maulik, yes it's definitely possible.

The current solution is to use using hidden fields in scripts, in this example the external variable is used for validation, but it can be used in scripts as well.

The solution is not optimal though, in your case the token will persist in the form payload and, unless you manually remove from it on onSubmit or onChange callbacks, it could be exposed / sent to the backend and stored in unwanted places.

I think this could be a useful feaure, so this is my proposal of "form context": https://www.javascript-jedi.com/Form-context-e3cf47ba205c45649e245295cbddfa0f, I'd appreciate feedback, it should be easy to implement

About #3 yes it's definitely possible, an example here: https://letsform.dev/components/select#form-scripts

Thanks for the feedback

[maulik9898]

Thanks for the quick reply! I was actually thinking of using hidden fields and then removing them manually on onSubmit like you mentioned. But yeah, having a proper solution would be much better and more scalable in the long run.

Your idea for adding form context looks like a perfect solution. Just one more doubt I had:

In your example:

<LetsForm 
    form={MY_FORM}
    defaultValues={myDefaultValues}
    // ...
    context={{
        myVar: 42,
        myToken: 'abc'
    }}
/>

Can we also pass React state to the context? The thing is, with JWT tokens, they usually need to be updated quite often. So if my token in React state gets updated, it would be great if the script could automatically use the new token without me having to refresh the form manually.

Like, could we do something like this?

const [token, setToken] = useState('initial_token');

// ... token update logic

<LetsForm 
    form={MY_FORM}
    defaultValues={myDefaultValues}
    context={{
        myToken: token  // React state variable
    }}
/>

This way, the form would always have the latest token, which would be really helpful for both security and user experience.

[guidone]

Ok, I get your point and it makes sense.

I've done some experiments and it basically works except the scenario you mentioned, I could fix it in a way it re-renders if the context changes, but in your example the form would re-render everytime since at every re-render the { myToken: '...' } will be a different object

So the correct solution will be

const [viewState, setViewState] = useState({ token: 'initial_token' });

// ... token update logic
const onChangeToken = newToken => {
  setViewState(state => ({ ...state, token: newToken }));
};

<LetsForm 
    form={MY_FORM}
    defaultValues={myDefaultValues}
    context={viewState}
/>

I'll make some experiments

[maulik9898]

This makes sense. Please let me know if you want me to test anything.

[guidone]

Ok, you can try with version 0.9.5