Wasp-lang•4mo ago

How can I create an onboarding flow where forms the user fills are saved to their account

How can I create an onboarding flow where I ask users questions and save their answers in the database, for use later? For example I ask them their favorite colour and I want to show it to them alter.

3 Replies

kapa.ai•4mo ago

Hi @haarismian. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To create an onboarding flow where user responses are saved in the database for later use, you can follow these steps: 1. Define the fields: Define the fields that you want to save in the database. These fields will be the questions you ask during the onboarding process. For example, if you want to ask the user's favorite color, you would define a favoriteColor field in your User entity. 2. Customize the Signup Form: Customize the SignupForm to include the fields you defined. This can be done in the case of Email or Username & Password authentication. 3. Create a custom sign-up action: You can create a custom sign-up action which uses the lower-level API, along with your custom code. This action will be responsible for validating the data sent from the client and saving it to the database. Here is an example of how your custom sign-up action can look like:

main.wasp

main.wasp

// ...

action customSignup {
fn: import { signup } from "@src/auth/signup.js",
}

src/auth/signup.js

src/auth/signup.js

import {
ensurePasswordIsPresent,
ensureValidPassword,
ensureValidUsername,
createProviderId,
sanitizeAndSerializeProviderData,
createUser,
} from 'wasp/server/auth'

export const signup = async (args, _context) => {
ensureValidUsername(args)
ensurePasswordIsPresent(args)
ensureValidPassword(args)

try {
const providerId = createProviderId('username', args.username)
const providerData = await sanitizeAndSerializeProviderData({
hashedPassword: args.password,
})

await createUser(
providerId,
providerData,
// Any additional data you want to store on the User entity
{favoriteColor: args.favoriteColor},
)
} catch (e) {
return {
success: false,
message: e.message,
}
}

// Your custom code after sign-up.
// ...

return {
success: true,
message: 'User created successfully',
}
}

main.wasp

main.wasp

// ...

action customSignup {
fn: import { signup } from "@src/auth/signup.js",
}
``` 4. Use the data: Once the data is saved in the database, you can fetch it using Queries and display it to the user whenever needed. For more detailed instructions, you can refer to the following documentation: - Customizing the Signup Process (https://wasp-lang.dev/docs/auth/overview#customizing-the-signup-process) - Creating your custom sign-up action (https://wasp-lang.dev/docs/auth/username-and-pass#2-creating-your-custom-sign-up-action) - Modifying Data (https://wasp-lang.dev/docs/tutorial/actions) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @haarismian, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

miho•4mo ago

@kapa.ai what about having a two step signup flow where the users finish their signup in a second step? We could also control that by having a value on the User like hasFinishedSignup? Could also explain a different idea where we somehow track what the user did before the signup via localStorage and then connect the info with the User?

kapa.ai•4mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Yes, you can definitely create a two-step signup flow in Wasp. Here's how you can do it: 1. Add a isSignupComplete field to your User entity: This field will signal whether the user has completed the signup process. Here's how you can add it:

main.wasp

main.wasp

entity User {=psl
id Int @id @default(autoincrement())
username String? @unique
isSignupComplete Boolean @default(false)
psl=}

2. **Override the default signup behavior**: You can create a custom signup action that sets `isSignupComplete` to `false` initially.

3. **Implement the rest of your signup flow**: After the user signs up, you can check the `isSignupComplete` field. If it's `false`, you can redirect them to a page where they can complete the signup process. Here's an example of how you can do this:

2. **Override the default signup behavior**: You can create a custom signup action that sets `isSignupComplete` to `false` initially.

3. **Implement the rest of your signup flow**: After the user signs up, you can check the `isSignupComplete` field. If it's `false`, you can redirect them to a page where they can complete the signup process. Here's an example of how you can do this:

javascript src/HomePage.jsx

import { useAuth } from 'wasp/client/auth'  
import { Redirect } from 'react-router-dom'  
  
export function HomePage() {  
 const { data: user } = useAuth()  
  
 if (user.isSignupComplete === false) {  
 return <Redirect to="/edit-user-details" />  
 }  
  
 // ...  
}

import { useAuth } from 'wasp/client/auth'  
import { Redirect } from 'react-router-dom'  
  
export function HomePage() {  
 const { data: user } = useAuth()  
  
 if (user.isSignupComplete === false) {  
 return <Redirect to="/edit-user-details" />  
 }  
  
 // ...  
}

As for your second question, you can indeed use localStorage to track what the user did before the signup. However, connecting this info with the User would require a custom implementation. You would need to save the localStorage data to the database after the user signs up and then fetch it when needed. For more detailed instructions, you can refer to the following documentation: - Social Auth Overview (https://wasp-lang.dev/docs/auth/social-auth/overview#overrides) - Auth Overview (https://wasp-lang.dev/docs/auth/overview) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @miho, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

Gaming

Programming

How can I create an onboarding flow where forms the user fills are saved to their account