I have a single webpage that uses an API to query backend for data, which is returned and plotted in a few figures. Backend is Node.js with Express.
The appearance of the figures is controlled through a set of JS functions that are loaded when the page initially loads.
After the user has been on the page for 30 seconds, I want to ask them to login or register by displaying a modal over the page.
If the login is successful, I'd like to close the modal and have new functionality available to the user, including changing the behavior of the original JS functions that were loaded when the user first arrived. But, I'd like to do this without reloading a new page with a separate set of JS functions.
I'm a relative newbie at this and have been having a hard time figuring out the right way to accomplish this.
I thought maybe there was a way to update the original JS function file by submitting an API get request and using the response to overwrite replace/overwrite the non-authenticated version. Then user would have access to new functionality without having reloaded the page.
But, I can't seem to find anything that would support this as the correct approach, or even whether this would be possible.
Really need help on which direction to go.