I'm looking for a sanity check here - here's what I'm trying to do:
I have an Inertia Page which is rendering a multistep form in a single Vue component.
Step 4 of the form has the user hit a (hosted) Google authorization flow - this of course will redirect back to my app after it's complete.
What I'm finding is that because this Google auth flow is hosted externally, the redirect back is causing the state of the form up to this point to be lost.
I've attempted to use some of the solutions found in the inertia docs, but these only seem applicable to cases where a user is staying within the app while navigating around.
Assuming I'm correct up to this point, an option I'm considering is introducing a Pinia store that also leverages the browsers local storage to synchronize/maintain state. My gut, however, is telling me that this is over-engineering for the problem. Does anyone have any alternate suggestions or a vote of confidence for this direction? š
It sounds like you're on the right track with using Pinia store and local storage to maintain state. This is a great solution for preserving state after an external page visit.
You could also consider using a query string parameter in the URL when redirecting back to your app. You could store the state in the query string and then parse it when the page loads.
For example, you could store the state in the query string like this:
https://example.com/redirect?state={"step":4}
Then, when the page loads, you can parse the query string and set the state accordingly:
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const state = JSON.parse(urlParams.get('state'));
