Wasp•4mo ago

custom auth actions -> Instructions don't work

Hi team, I've started working on my account based login with multiple users. The first step is to test the sign so I can add account creation. I've started following these steps: https://wasp.sh/docs/auth/advanced/custom-auth-actions MY Steps: Add call to WASP code, added signup.tsx, added a new customsignupPage. ERROR 1: the signup.js file, needed to be called signup.tsx as it had typescripe in it. ERROR 2:Module '"wasp/server/operations"' has no exported member 'CustomSignup'. Start I can't actual wasp start Now I'm normally not one to dive into the wasp server code, so I thought I would ask here if I am missing something. Thoughts?

Custom sign-up actions | Wasp

If you need to deeply hook into the sign-up process, you can create your own sign-up action and customize the code to, for example, add extra validation, store more data, or otherwise call custom code at registration time.

6 Replies

kapa.ai•4mo ago

Hi @stobbsc. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Thank you for your detailed description of the issues you’re facing with custom auth actions in Wasp. Here’s what I can clarify based on the official documentation and community discussions: 1. File Naming: signup.js vs signup.tsx - The Wasp documentation consistently refers to the backend signup action file as either signup.js or signup.ts (for TypeScript), not signup.tsx. The .tsx extension is for React components, not backend/server logic. You should use .ts for TypeScript backend files, e.g., signup.ts [Custom Signup Action Example]. 2. Importing CustomSignup from wasp/server/operations - The documentation shows examples where CustomSignup is imported from wasp/server/operations in TypeScript custom signup actions [Custom Signup Example]. However, if you are getting the error:

  Module '"wasp/server/operations"' has no exported member 'CustomSignup'.

  Module '"wasp/server/operations"' has no exported member 'CustomSignup'.

This suggests that either: - You are using a Wasp version that does not export CustomSignup (it may be a newer addition or not yet available in your version). - Or, there is a mismatch in the documentation and the actual available exports in your installed Wasp version. The knowledge sources do not provide a workaround for this error, nor do they clarify the minimum Wasp version required for CustomSignup. If you are not on the latest Wasp version, try upgrading. 3. General Guidance - Do not modify files in .wasp/out/server/.... Always place your custom server logic in your own src/server or src/auth directory [Discord: never modify .wasp]. - The custom signup action should be registered in your main.wasp like this:

  action customSignup {
    fn: import { signup } from "@src/auth/signup.ts",
    entities: [User]
  }

  action customSignup {
    fn: import { signup } from "@src/auth/signup.ts",
    entities: [User]
  }

And your signup.ts should look like:

  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, {})
    } catch (e) {
      return { success: false, message: e.message }
    }

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

  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, {})
    } catch (e) {
      return { success: false, message: e.message }
    }

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

[Custom Signup Action Example] 4. If You Still Can't Start Wasp - Double-check your Wasp version and upgrade if possible. - Ensure your file extensions are correct (.ts for backend logic). - If the CustomSignup type is not available, you can omit it and use plain TypeScript types or any for now, as the type is only for type safety and not required for functionality. 5. Documentation Gaps - The knowledge sources do not provide a solution if CustomSignup is missing from your Wasp version. If you continue to have issues, consider reaching out on the Wasp Discord for real-time help, as others may have encountered and solved this problem. --- Summary:
- Use .ts for backend signup actions, not .tsx. - If CustomSignup is missing, it may be a version issue; try omitting it or upgrading Wasp. - Register your action in main.wasp as shown above. - Do not edit files in .wasp/out. If you need further help, please provide your Wasp version and the exact code you’re using. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @stobbsc, 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?

stobbscOP•4mo ago

thanks I've managed to fix this what I can't work out is can I use the built wasp SignUpForm with my new customSignup action, or do I need a new form?

MEE6•4mo ago

Wohooo @stobbsc, you just became a Waspeteer level 2!

toticozeni•4mo ago

Hey @stobbsc , how come you are makring your own custom auth actions? What is it that you can't do with out auth hooks or user signup fields ? To use your new custom auth actions you need to make your own auth UI. Though we export <Form/>, <FormItemGroup/>, <FormLabel/>, <FormInput/>, <FormTextarea/>, and <FormError/> which you can use.

stobbscOP•4mo ago

I'm looking to do account and multi user based app, so on signup I need to create an account/org then create the user and link them to the account. My understanding through the documentation was I needed to implement the code for custom signup provided. I got stuck so I solved it in the backend using triggers on my user table . I'll re build this section once all the wasp auth stuff gets upgraded in the future 😁

toticozeni•4mo ago

You would need a Organization entity separate from our providers. Eventually multi-user apps requires a custom signup flow separate from usual single user applications. I'd recommend that path once you design your auth flow wireframes. e.g. at least these two separate signup flows are needed: handle initial creation of organization + owner account handle inviting users to create an account inside of the organization Even more complicated if user can be part of multiple organizations 😅 Glad to see you got it working for now.

Gaming

Programming

custom auth actions -> Instructions don't work

Did you find this page helpful?