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.
2 Replies
Btw. I dont know if my question made any sense haha. So lemme know if you want me to clarify
assuming those are pages, I'd update the user with what page they have finished, and allow them to access page n+1 only if they submitted page n
this means you can't really keep aggregating the data client-side and send it once, or at least you have to send a progress update call from each page