React: Supporting Semi-Authenticated User State in Router Redirects

In react apps with accounts and authentication, a common pattern for handling public/private routes is to have:

In our app, we have a sign-up flow that has multiple steps: the user first registers their account, then they create an organization for their team. Each of the steps in the sign-up flow is a separate component, wrapped in an AuthRedirect so that users who are already signed in can’t access sign-up.

We started encountering a crash as soon as the user finished the first step and registered their account. It wasn’t immediately obvious why: when the user registers their account in the first step, they become signed in, so the AuthRedirect wrapping the subsequent step was trying to redirect to the home page. The home page component caused a crash since there was no organization made, which would have happened in the second registration step.

To properly solve this, we needed the AuthRedirect component to redirect only if the user was signed in and finished with registration. This meant adding a check not only for whether the user was signed in to an account, but whether their account also belonged to an organization, indicating that they had finished the remaining registration steps as well. As a bonus, this solution also makes the multi-step registration process stateless: if the user registers their account in the first step, then leaves the app and comes back later, we can direct them to the second step to pick up where they left off.

I haven’t seen a solution like this used before, I suppose because components typically either rendering when the user is signed out, or redirecting when they’re signed in — but not both, a state I’ve started referring to as “semi-authenticated”. There are plenty of sites though where users have several steps to sign in, though, like entering a verification code, so I wonder how others handle semi-authenticated users in routing.