Onboarding
Collect information about your users
Shipped provides a basic onboarding to collect information about the users that signup into your product for the first time.
When the button Next is clicked, the answers are saved to the database, and the onboarding is marked as complete for the currently authenticated user.
The page also checks if:
the user is logged in, otherwise redirects the page to
/login
the onboarding is complete, in positive case, it redirects to
/dashboard
You reach the onboarding page by browsing /onboarding
.
Customize the questions
You can customize the questions by updating the file src/components/UserOnboarding/onboarding.questions.ts
You can define free text and questions with predefined answers.
A database table named UserOnboarding
is required (already included prisma.schema
)
To customize the questions, you need to:
update table
UserOnboarding
to include the question key you want to use (by defaultrole
andsource
)run
npx prisma generate
to update the database typesupdate the file
src/components/UserOnboarding/onboarding.questions.ts
update
PostOnboardingRequest
insrc/app/api/onboarding/route.ts
with the expected question keysupdate the question keys in
src/app/api/onboarding/route.ts
(validity checks and the prisma record creationawait prismaClient.userOnboarding.create({
)finally run
npx prisma db push
to apply the updated table to your database
By default, the name
question value is stored in the table User
in the column name
if it's not present.
This is particularly useful if you are using email authentication.
Hook: useOnboarding
This hook is particularly useful to check if the onboarding, for the current user, is completed or not.
If you have an onboarding, you probably want to redirect the user after the signup, but only if it is not complete.
To do that you can use isOnboardingCompleted
in the SignUp
component and update the redirect URL accordingly. Here's an example:
Last updated