Restrict direct access to NextJS routes
I am writing a user onboarding flow where the whole onboarding flow is about 3 pages, it starts with username, email and password on route 1 (lets say /signup/credentials), full name, other details etc on route 2 (/signup/details) and some last few details on route 3 (/signup/confirm) lets say.
On route 3, I have a button which takes the data from all 3 routes, compiles it into some data, and makes the API call to sign up the user.
By this logic, I only want to allow client side routing from route 1 to route 2, and client side routing from route 2 to route 3, i.e. users shouldnt be able to go to /signup/confirm route directly.
I have 2 questions. Is this a good idea ? 2nd, how do I restrict direct access to these routes in NextJS ? One idea I have in mind is to keep some global state (lets say some boolean set to false initially), and only set it to something other than the default (lets say true) when the previous step is complete, so when user lands on a route directly, we check this state and only show if the state was altered from the default.
On route 3, I have a button which takes the data from all 3 routes, compiles it into some data, and makes the API call to sign up the user.
By this logic, I only want to allow client side routing from route 1 to route 2, and client side routing from route 2 to route 3, i.e. users shouldnt be able to go to /signup/confirm route directly.
I have 2 questions. Is this a good idea ? 2nd, how do I restrict direct access to these routes in NextJS ? One idea I have in mind is to keep some global state (lets say some boolean set to false initially), and only set it to something other than the default (lets say true) when the previous step is complete, so when user lands on a route directly, we check this state and only show if the state was altered from the default.
