Wasp•5d ago

Can't do changes to signUp in auth

Does anyone know why i can't change the signup? I have made new version of the page and i have even tried to make a new route to make sure they don't conflict each other in my wasp.main but the changes to signup dosent appear, and when i get this error when i make a new route: "react-router-dom.js?v=1d596e5f:214 No routes matched location "/newSignup" "
i have tried to wasp clean

4 Replies

kapa.ai•5d ago

Hi @Yumyum. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- It seems you're having trouble customizing the signup functionality in your Wasp application. Based on the knowledge sources, there are a few approaches to customize the signup process in Wasp: 1. Create a custom signup form Instead of using the built-in SignupForm component, you can create your own form and use the lower-level primitives that Wasp provides:

import { signup, login } from 'wasp/client/auth'
import { useState } from 'react'
import { useHistory } from 'react-router-dom'

export function CustomSignup() {
  const [username, setUsername] = useState('')
  const [password, setPassword] = useState('')
  const [error, setError] = useState(null)
  const history = useHistory()

  async function handleSubmit(event) {
    event.preventDefault()
    try {
      await signup({
        username,
        password,
      })
      await login(username, password)
      history.push("/")
    } catch (error) {
      setError(error)
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      {/* Your custom form elements here */}
    </form>
  );
}

import { signup, login } from 'wasp/client/auth'
import { useState } from 'react'
import { useHistory } from 'react-router-dom'

export function CustomSignup() {
  const [username, setUsername] = useState('')
  const [password, setPassword] = useState('')
  const [error, setError] = useState(null)
  const history = useHistory()

  async function handleSubmit(event) {
    event.preventDefault()
    try {
      await signup({
        username,
        password,
      })
      await login(username, password)
      history.push("/")
    } catch (error) {
      setError(error)
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      {/* Your custom form elements here */}
    </form>
  );
}

Then define a route to this component in your main.wasp file:

route CustomSignupRoute { path: "/newSignup", to: CustomSignupPage }
page CustomSignupPage {
  component: import { CustomSignup } from "@src/pages/customAuth.jsx"
}

route CustomSignupRoute { path: "/newSignup", to: CustomSignupPage }
page CustomSignupPage {
  component: import { CustomSignup } from "@src/pages/customAuth.jsx"
}

2. Add extra fields to the signup process If you want to add extra fields to the signup process, you can define userSignupFields in your main.wasp file:

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

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

Then export the userSignupFields object from a file like src/auth/signup.js:

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
  },
})

Troubleshooting For your specific error "No routes matched location "/newSignup"", make sure: 1. You've correctly defined the route in your main.wasp file 2. You've run wasp start after making changes to the main.wasp file 3. There are no typos in your route path If you've tried wasp clean already, another approach is to: 1. Stop the Wasp server 2. Run wasp clean 3. Make sure your route is correctly defined in main.wasp 4. Run wasp start again Remember not to modify files under .wasp/out/ as mentioned in the Discord support thread - these are generated files and changes will be overwritten. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Yumyum, 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?

YumyumOP•5d ago

this is my route: route NewSignupRoute { path: "/newSignup", to: SignupPageTEMP } page SignupPageTEMP { component: import { Signup } from "@src/client/app/SignupPageTEMP" } and i have just changed moved it from auth to app to see if that would work, but i still get the same error

YumyumOP•5d ago

Never mind i fixed it, I'm just an idiot

Carlos•4d ago

Not an idiot! It's easy to get a bit lost when first starting out. Tell us if you need anything else! 🙂

Gaming

Programming

Can't do changes to signUp in auth

Did you find this page helpful?