Wasp•7mo ago

How to add custom Sign up field that refers another entity

I am trying to create a custom sign up where a User can select college and university through a drop down. This is my defineUserSignupFields method call:

export const getEmailUserFields = defineUserSignupFields({
  username: (data: any) => data.email,
  isAdmin: (data: any) => adminEmails.includes(data.email),
  email: (data: any) => data.email,
  firstName: (data: any) => data.firstName,
  lastName: (data: any) => data.lastName,
  academicYearLevel: (data: any) => data.academicYearLevel,
  university: (data: any) => ({
    connect: { id: data.universityId } // Assuming `universityId` is the ID of the selected university
  }),
  college: (data: any) => ({
    connect: { id: data.collegeId } // Assuming `collegeId` is the ID of the selected college
  }),
});

export const getEmailUserFields = defineUserSignupFields({
  username: (data: any) => data.email,
  isAdmin: (data: any) => adminEmails.includes(data.email),
  email: (data: any) => data.email,
  firstName: (data: any) => data.firstName,
  lastName: (data: any) => data.lastName,
  academicYearLevel: (data: any) => data.academicYearLevel,
  university: (data: any) => ({
    connect: { id: data.universityId } // Assuming `universityId` is the ID of the selected university
  }),
  college: (data: any) => ({
    connect: { id: data.collegeId } // Assuming `collegeId` is the ID of the selected college
  }),
});

All of these attributes exist in my User entity however I get this error: Unknown arg university in data.university for type UserUncheckedCreateInput. Did you mean universityId? trying to use universityId/collegeId instead of university/college yields the same error but with typ UserCreateInput

8 Replies

kapa.ai•7mo ago

Hi @Suchitk. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The error message you're seeing suggests that the UserUncheckedCreateInput type doesn't recognize the university and college fields. This could be because these fields are not directly part of the User entity, but are related entities. In Wasp, the defineUserSignupFields function is used to define extra fields that need to be set on the User during the sign-up process. The keys in the userSignupFields object represent the field name, and the values are functions that receive the data sent from the client and return the value of the field. If the value that the function received is invalid, the function should throw an error. Here is an example of how to define userSignupFields:

import { defineUserSignupFields } from 'wasp/server/auth'  
  
export const userSignupFields = defineUserSignupFields({  
 address: (data) => {  
 if (!data.address) {  
 throw new Error('Address is required')  
 }  
 return data.address  
 }  
 phone: (data) => data.phone,  
})

import { defineUserSignupFields } from 'wasp/server/auth'  
  
export const userSignupFields = defineUserSignupFields({  
 address: (data) => {  
 if (!data.address) {  
 throw new Error('Address is required')  
 }  
 return data.address  
 }  
 phone: (data) => data.phone,  
})

(Source: Wasp Docs (https://wasp-lang.dev/docs/auth/social-auth/keycloak#api-reference)) However, the defineUserSignupFields function and the userSignupFields object are not designed to handle relations between entities. In your case, you're trying to connect the User entity with the University and College entities during the sign-up process, which is not supported out of the box. You might need to create a custom sign-up action to handle this. Unfortunately, the provided knowledge sources do not contain enough information on how to do this. I recommend checking the Wasp documentation or reaching out to the Wasp community for further assistance. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Suchitk, 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

Your code seems to be on the right track, but if you could share your entities with me and I'll replicating the setup 🙂 I'd need your Signup page and your Wasp file (the important bits)

SuchitkOP•7mo ago

Hey here are the SignupPage and wasp file as requested, your help would be much appreciated!

SignupPage.tsx

main.wasp

miho•7mo ago

I've tried doing this locally:

entity User {=psl
    id                        Int           @id @default(autoincrement())
    dog Dog @relation(fields: [dogId], references: [id])
    dogId String
psl=}

entity Dog {=psl
  id String @id @default(cuid())
  name String

  users User[]
psl=}

entity User {=psl
    id                        Int           @id @default(autoincrement())
    dog Dog @relation(fields: [dogId], references: [id])
    dogId String
psl=}

entity Dog {=psl
  id String @id @default(cuid())
  name String

  users User[]
psl=}

<SignupForm
              appearance={appearance}
              logo={todoLogo}
              socialLayout="horizontal"
              additionalFields={[
                (form, state) => {
                  return (
                    <FormItemGroup className="text-sm text-gray-500">
                      <select
                        {...form.register('dogId')}
                        className="w-full p-2 mt-1 border border-gray-300 rounded-md"
                      >
                        {dogs?.map((dog) => (
                          <option key={dog.id} value={dog.id}>
                            {dog.name}
                          </option>
                        ))}
                      </select>
                    </FormItemGroup>
                  )
                },
              ]}
            />

<SignupForm
              appearance={appearance}
              logo={todoLogo}
              socialLayout="horizontal"
              additionalFields={[
                (form, state) => {
                  return (
                    <FormItemGroup className="text-sm text-gray-500">
                      <select
                        {...form.register('dogId')}
                        className="w-full p-2 mt-1 border border-gray-300 rounded-md"
                      >
                        {dogs?.map((dog) => (
                          <option key={dog.id} value={dog.id}>
                            {dog.name}
                          </option>
                        ))}
                      </select>
                    </FormItemGroup>
                  )
                },
              ]}
            />

  dog: (data: any) => {
    console.log('data received', data);
    if (typeof data.dogId !== 'string') {
      throw new Error('Dog ID is required.')
    }
    return {
      connect: { id: data.dogId}
    }
  },

  dog: (data: any) => {
    console.log('data received', data);
    if (typeof data.dogId !== 'string') {
      throw new Error('Dog ID is required.')
    }
    return {
      connect: { id: data.dogId}
    }
  },

And it worked for me 😄 One thing that doesn't work - the initial set of the dogId value on load. I had to pick something in the <select> to get the first value to be set properly. Did you try outputing the data to see what you actually receive from the client?

SuchitkOP•7mo ago

Wow, Thank you so much for deconstructing the logic like this 😃 I have managed to get it to work based on the example that you have provided. The issue was mainly with how I was providing the ID from data as well as the initial set of ID on load.

miho•7mo ago

Nice, I'm glad it worked 😊

massari•4mo ago

@miho also thank from me ^^ couldn't figure it out without your help. That should be in the OpenSaaS Documentation

massari•4mo ago

but important: dont forget the userSignupFields 😄

Gaming

Programming

How to add custom Sign up field that refers another entity