W
Wasp•4w ago
mario.p

How to custom redirect after signup with custom signup form?

Hi guys, I'm creating an onboarding process in OpenSaas and I'm managing, through a custom form, the signup. I'm invoking the function "import { signup } from 'wasp/client/auth';" in case of registration with email and, I would need to make the user land on a specific page. At the moment the user is redirected to the default login page. Do you have any suggestions? Thank you!
3 Replies
kapa.ai
kapa.ai•4w ago
Hi @mario.p. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Custom Redirect After Signup with Custom Form You have a few options to handle custom redirects after signup when using a custom form: Option 1: Manual Redirect After Signup When using a custom signup form with the signup function from wasp/client/auth, you can manually redirect the user after successful signup by using React Router's useHistory or useNavigate hook: 
import { signup, login } from 'wasp/client/auth'
import { useState } from 'react'
import { useHistory } from 'react-router-dom'

export function CustomSignupForm() {
  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)
      // Redirect to your custom page
      history.push("/onboarding")
    } catch (error) {
      setError(error)
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      {/* Your form fields */}
    </form>
  )
}
import { signup, login } from 'wasp/client/auth'
import { useState } from 'react'
import { useHistory } from 'react-router-dom'

export function CustomSignupForm() {
  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)
      // Redirect to your custom page
      history.push("/onboarding")
    } catch (error) {
      setError(error)
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      {/* Your form fields */}
    </form>
  )
}
This approach is demonstrated in the Wasp documentation for using the signup and login actions. Option 2: Create a Custom Signup Action For more control, you can create a custom signup action: 1. Define your custom signup action in main.wasp: 
action customSignup {
  fn: import { signup } from "@src/auth/signup.js",
}
action customSignup {
  fn: import { signup } from "@src/auth/signup.js",
}
2. Implement your custom signup logic in the action: 
import {
  ensurePasswordIsPresent,
  ensureValidPassword,
  ensureValidUsername,
  createProviderId,
  sanitizeAndSerializeProviderData,
  createUser,
} from 'wasp/server/auth'
export const signup = async (args, _context) => {
  // Validation and user creation logic
  // ...
  
  // Your custom code after sign-up
  // ...
  
  return {
    success: true,
    message: 'User created successfully',
  }
}
import {
  ensurePasswordIsPresent,
  ensureValidPassword,
  ensureValidUsername,
  createProviderId,
  sanitizeAndSerializeProviderData,
  createUser,
} from 'wasp/server/auth'
export const signup = async (args, _context) => {
  // Validation and user creation logic
  // ...
  
  // Your custom code after sign-up
  // ...
  
  return {
    success: true,
    message: 'User created successfully',
  }
}
3. Then call this custom action from your frontend and handle the redirect there. This approach is documented in Creating your custom sign-up action. Note on Future Improvements The Wasp team is planning to add hooks for running code after signup/login in a future release. As mentioned in a Discord thread, these hooks are "at the top of the list of the stuff we are handling, but there is quite some stuff alongside them we are also working on, so it will probably take a 1 - 2 months to get it out" according to a team member. Until then, the manual redirect approach is your best option for custom redirects after signup. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @mario.p, 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?
mario.p
mario.pOP•4w ago
Thanks @kapa.ai , ​​I had already tried the first option but it didn't seem to work. It was the Docker container that wasn't watching the changes. I'll set it as solved! Thanks
kapa.ai
kapa.ai•4w ago
Let me check the knowledge base for you again. One moment! :books: ---------------------- I'm glad to hear you've identified the issue! Yes, hot reloading problems in Docker containers are a known challenge, especially when the file system changes aren't being properly detected. This is actually a common issue with Wasp development in certain environments. As mentioned in some of the knowledge sources, there are known issues with file watching and hot reloading, particularly in environments like WSL2 when working with Windows file systems as discussed in this GitHub issue. The Wasp team is also actively investigating how their file watching works after some restructuring in version 0.12.0, as noted in this GitHub issue. For future reference, if you encounter similar issues with hot reloading in Wasp: 1. Make sure your project is on the native file system of the environment you're using 2. Check for any errors in the terminal where you ran wasp start 3. Check your browser's developer console for any errors I'm happy you've resolved your issue and thank you for letting me know! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @mario.p, 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?

Did you find this page helpful?