Wasp-lang•7mo ago

Modification of sing up. Add additional fields in sing up form and user entity.

Hi, I need to extend the user model to include first name and last name. I will update the user model in main.wasp. Additionally, how can I update the sign-up form to include the new fields? Where should I modify the registration logic on the backend? I am also wondering if it is possible to integrate a solution like Veriff or SumSub for KYC in the registration process. Thanks in advance 🙂

3 Replies

kapa.ai•7mo ago

Hi @Kbk. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Sure, I can guide you through the process of adding additional fields to the signup form and user entity in Wasp. Firstly, you need to update your User entity in the main.wasp file to include the new fields firstName and lastName. Then, you need to define the auth.methods.{authMethod}.userSignupFields field in your main.wasp file. The {authMethod} depends on the auth method you are using. For example, if you are using Username & Password, you would add the auth.methods.usernameAndPassword.userSignupFields field. Here is an example of how you can do it:

app crudTesting {  
 // ...  
 auth: {  
 userEntity: User,  
 methods: {  
 usernameAndPassword: {  
 userSignupFields: import { userSignupFields } from "@src/auth/signup",  
 },  
 },  
 onAuthFailedRedirectTo: "/login",  
 },  
}  
  
entity User {=psl  
 id Int @id @default(autoincrement())  
 firstName String?
 lastName String?
psl=}

app crudTesting {  
 // ...  
 auth: {  
 userEntity: User,  
 methods: {  
 usernameAndPassword: {  
 userSignupFields: import { userSignupFields } from "@src/auth/signup",  
 },  
 },  
 onAuthFailedRedirectTo: "/login",  
 },  
}  
  
entity User {=psl  
 id Int @id @default(autoincrement())  
 firstName String?
 lastName String?
psl=}

Next, you need to define the userSignupFields object in the src/auth/signup.js file. This object should include the new fields firstName and lastName. Here is an example of how you can do it:

import { defineUserSignupFields } from 'wasp/server/auth'  
  
export const userSignupFields = defineUserSignupFields({  
 firstName: async (data) => {  
 const firstName = data.firstName  
 if (typeof firstName !== 'string') {  
 throw new Error('First name is required')  
 }  
 return firstName  
 },
 lastName: async (data) => {  
 const lastName = data.lastName  
 if (typeof lastName !== 'string') {  
 throw new Error('Last name is required')  
 }  
 return lastName  
 },
})

import { defineUserSignupFields } from 'wasp/server/auth'  
  
export const userSignupFields = defineUserSignupFields({  
 firstName: async (data) => {  
 const firstName = data.firstName  
 if (typeof firstName !== 'string') {  
 throw new Error('First name is required')  
 }  
 return firstName  
 },
 lastName: async (data) => {  
 const lastName = data.lastName  
 if (typeof lastName !== 'string') {  
 throw new Error('Last name is required')  
 }  
 return lastName  
 },
})

For the frontend, if you are using Wasp's Auth UI, you can customize the SignupForm component by passing the additionalFields prop to it. It can be either a list of extra fields or a render function. As for integrating a solution like Veriff or SumSub for KYC in the registration process, it's not directly covered in the provided sources. However, Wasp is quite flexible and it should be possible to integrate third-party services, but the exact implementation would depend on the specific APIs and services those platforms provide. For more details, you can refer to the following sources: - Customizing the Signup Process (https://wasp-lang.dev/docs/auth/overview#customizing-the-signup-process) - Defining Extra Fields (https://wasp-lang.dev/docs/auth/overview#1-defining-extra-fields) - Signup Fields Customization (https://wasp-lang.dev/docs/auth/overview#signup-fields-customization) - Customizing the Signup Component (https://wasp-lang.dev/docs/auth/overview#2-customizing-the-signup-component) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Kbk, 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•7mo ago

The bot gave a pretty good answer and linked to best places in the docs to read more 🙂 Let us know how it went!

I am also wondering if it is possible to integrate a solution like Veriff or SumSub for KYC in the registration process.

About this, it depends on what kind of field to expect to use. You can define custom UI that can send some info to the backend upon the registration request e.g. some sort of token or hash you can verify on the backend. (I've only done stuff with captachas, never KYC, but this feels similar?)

KbkOP•7mo ago

We will work next week on this feature I will let you know here how it goes 🙂

Gaming

Programming

Modification of sing up. Add additional fields in sing up form and user entity.