User Onboarding
Implementing a user onboarding page and collecting information on sign-up
By default, Stack Auth only collects email addresses and user names during sign-up, provided these details are available from the OAuth providers or sign-in methods used. If you want to ensure these details are collected, gather additional information such as phone numbers or addresses, or display an onboarding tutorial for new users, you need to create a custom user onboarding page.
The most straightforward approach is to redirect users to an onboarding page right after they sign up. However, this not recommended for the following reasons:
- Users can easily accidently (or purposely) close or navigate away from the page before completing the onboarding.
- Redirect URLs may vary depending on the context. For instance, if a user is redirected to a sign-in page after trying to access a protected page, they’ll expect to return to the original protected page post-authentication.
Instead, a more reliable strategy is to store an onboarded
flag in the user’s metadata and redirect users to the onboarding page if they haven’t completed it yet.
Example implementation
First, let’s create an onboarding page to collect the user’s name and address, then update the user’s metadata (more details on metadata here).
While the above implementation offers a basic onboarding process, users can still skip onboarding by directly sending an API request to the Stack Server to update the clientMetadata.onboarded
flag. If you want to ensure that onboarding cannot be bypassed on the API level, you should create a server endpoint to validate and store the data, then save the onboarded
flag in the clientReadonlyMetadata
on the server side after validation.
Next, we can create a hook/function to check if the user has completed onboarding and redirect them to the onboarding page if they haven’t.
Client Hook
Server Function
You can then use these functions in locations where onboarding is required (typically in areas where you interact with the user object).