Wasp•4mo ago

custom signup form

I have created a custom signup form that just asks for email and password. It uses the email as the username. The user is created successfully in the database. After calling await signup({ email, password, username: email }); I call await login(email, password); I would expect Wasp's hSucceededRedirectTo to take over at this point. However, the browser stays on the signup page. If I click on a protected page, I am able to load it correctly (i.e. the user is actually logged in). How should the redirect actually work after authentication?

2 Replies

kapa.ai•4mo ago

Hi @cmilazzo. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the Wasp documentation, the automatic redirect after successful authentication using the onAuthSucceededRedirectTo field only works when you are using the Wasp-provided Auth UI components—not when you implement your own custom signup/login forms. The docs state:

Automatic redirect on successful login only works when using the Wasp-provided Auth UI
Docs > Auth > Overview > API Reference > Auth Fields > onAuthSucceededRedirectTo

When you use custom forms and call signup and login programmatically, you are responsible for handling the redirect after authentication. This is why, in the example code for custom signup/login, you see a manual redirect using history.push("/") after a successful login:

await signup({ username, password });
await login(username, password);
history.push("/");

await signup({ username, password });
await login(username, password);
history.push("/");

Docs > Auth > Username & Password > Customizing the Auth Flow > 1. Using the signup and login actions So, in your case, you should manually redirect the user after login by calling history.push or a similar navigation method in your form's submit handler. The onAuthSucceededRedirectTo setting will not automatically redirect the user when using custom forms. If you want the redirect to happen automatically, you need to use the Wasp-provided Auth UI components. Otherwise, handle the redirect yourself in your custom form logic. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @cmilazzo, 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?

toticozeni•4mo ago

Hey @cmilazzo There are examples on the docs for that: https://wasp.sh/docs/auth/username-and-pass/create-your-own-ui. You should import

import { useNavigate } from 'react-router-dom'

import { useNavigate } from 'react-router-dom'

and use the returned navigate function.

Gaming

Programming

custom signup form

Did you find this page helpful?