Wasp•2w ago

Persisting pre-signup data

Hey, I wander if there's a way to persist data user enters before sign-up, so I can store it to DB (and associate with the used ID) when/if signup completed? My guess would be working with react context to achieve this, but I'm not sure

4 Replies

kapa.ai•2w ago

Hi @agnusdei1166. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To persist pre-signup data and associate it with a user after signup in Wasp, there are a few approaches you can take. While using React context is a valid client-side solution, Wasp provides some built-in features that might be more suitable for this use case. 1. Custom Signup Fields: Wasp allows you to define custom signup fields that will be automatically saved to the database upon successful signup. You can do this by defining userSignupFields in your main.wasp file:

   app crudTesting {
     // ...
     auth: {
       userEntity: User,
       methods: {
         usernameAndPassword: {
           userSignupFields: import { userSignupFields } from "@src/auth/signup",
         },
       },
       onAuthFailedRedirectTo: "/login",
     },
   }

   app crudTesting {
     // ...
     auth: {
       userEntity: User,
       methods: {
         usernameAndPassword: {
           userSignupFields: import { userSignupFields } from "@src/auth/signup",
         },
       },
       onAuthFailedRedirectTo: "/login",
     },
   }

Then, in your src/auth/signup.js file, you can define the fields and their validation:

   import { defineUserSignupFields } from 'wasp/server/auth'

   export const userSignupFields = defineUserSignupFields({
     // Define your custom fields here
     customField: async (data) => {
       // Validation logic
       return data.customField
     },
   })

   import { defineUserSignupFields } from 'wasp/server/auth'

   export const userSignupFields = defineUserSignupFields({
     // Define your custom fields here
     customField: async (data) => {
       // Validation logic
       return data.customField
     },
   })

This approach is described in the Wasp documentation on customizing the signup process (https://wasp-lang.dev/docs/auth/overview#1-defining-extra-fields). 2. Custom Signup Action: If you need more control over the signup process, you can create a custom signup action. This allows you to handle the pre-signup data and associate it with the user during the signup process:

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

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

In your src/auth/signup.js file:

   import {
     createProviderId,
     sanitizeAndSerializeProviderData,
     createUser,
   } from 'wasp/server/auth'
export const signup = async (args, _context) => {
     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
         {
           customField: args.customField,
         },
       )

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

       return {
         success: true,
         message: 'User created successfully',
       }
     } catch (e) {
       return {
         success: false,
         message: e.message,
       }
     }
   }

   import {
     createProviderId,
     sanitizeAndSerializeProviderData,
     createUser,
   } from 'wasp/server/auth'
export const signup = async (args, _context) => {
     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
         {
           customField: args.customField,
         },
       )

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

       return {
         success: true,
         message: 'User created successfully',
       }
     } catch (e) {
       return {
         success: false,
         message: e.message,
       }
     }
   }

This approach is detailed in the Wasp documentation on creating a custom sign-up action (https://wasp-lang.dev/docs/auth/username-and-pass#2-creating-your-custom-sign-up-action). 3. Client-side State Management: If you need to manage the pre-signup data on the client-side before sending it to the server, you can indeed use React context or any other state management solution. However, you'll still need to send this data to the server during the signup process using one of the methods mentioned above. Remember to update your User entity in the main.wasp file to include any new fields you want to store:

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

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

By using these Wasp-specific features, you can persist pre-signup data and associate it with the user ID when signup is completed, without relying solely on client-side solutions like React context. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @agnusdei1166, 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?

martinsos•2w ago

@agnusdei1166 all going fine here, need human help :)?

agnusdei1166OP•2w ago

hey thanks mate! will try to check it ASAP, not feeling well today

MEE6•2w ago

Wohooo @agnusdei1166, you just became a Waspeteer level 1!

Gaming

Programming

Persisting pre-signup data