Redirect to a specific page after signup

I want to redirect new users who have signed up to a payments/pricing page so they can pay. How can I do this?

6 Replies

Hi @josh. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- In Wasp, you can redirect users after signup by using the onAuthSucceededRedirectTo property. However, this property is not well documented and there is no direct example in the provided knowledge sources. Alternatively, you can use a similar approach to the one described in the Wasp documentation for handling incomplete signups. This involves checking a user property and redirecting based on its value. In your case, you could add a property like hasPaid to your User entity and check its value after signup. If hasPaid is false, you can redirect the user to your payments/pricing page. Here is an example of how you can implement this in your HomePage component:

import { useAuth } from 'wasp/client/auth'  
import { Redirect } from 'react-router-dom'  
  
export function HomePage() {  
 const { data: user } = useAuth()  
  
 if (user.hasPaid === false) {  
 return <Redirect to="/payments" />  
 }  
  
 // ...  
}

import { useAuth } from 'wasp/client/auth'  
import { Redirect } from 'react-router-dom'  
  
export function HomePage() {  
 const { data: user } = useAuth()  
  
 if (user.hasPaid === false) {  
 return <Redirect to="/payments" />  
 }  
  
 // ...  
}

In this example, if the hasPaid property of the user is false, the user is redirected to the /payments page. Please note that this is a client-side solution and the actual implementation might depend on your specific use case and setup. For more information, you can refer to the following sources: - Wasp Docs: Showing the Correct State on the Client (https://wasp-lang.dev/docs/auth/social-auth/overview#3-showing-the-correct-state-on-the-client) - Github Issue: Allow specifying where to redirect after successful login/signup (https://github.com/wasp-lang/wasp/issues/1360) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @josh, 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?

Filip•3mo ago

Hey @josh, Like the bot says, there's an onAuthSucceededRedirectTo hook you can use to redirect users after both signup and login: https://wasp-lang.dev/docs/auth/overview#onauthsucceededredirectto-string I don't know why the bot thinks it's some obscure feature though, it's very normal 🙂 After you redirect the user, you can check (inside the react component) whether they paid and depending on that either show them the pricing page or something else (with code similar to what Kapa AI suggested). One gotcha: this redirect will happen after both login and signup, but it shouldn't be problem in your case because I'm guessing you'd want to send the users to the pricing page on every auth success until they don't pay (regardless of whether it's a login or a signup). @miho One question for you. It seems I often see users wanting to do some frontend logic after signup but not after login (and vice versa). Have we considered supporting this (I can't find the issue)?

miho•3mo ago

Yes, a client post login/signup hooks could be useful. But users can implement them themselves easily if I'm not mistaken - redirect to a /post-auth-page and then do some logic on that page which can redirect again?

Filip•3mo ago

redirect to a /post-auth-page and then do some logic on that page which can redirect again?

Yeah, that's what I suggested to @josh and will probably work in this case (since the redirect doesn't specifically depend on the login/signup state but rather on the payment status). The problem arises when you want different behavior depending on login/signup explicitly (and not depending some business logic) becuase, if I'm not mistaken, there's no way for the page that does the redirect to know whether the user landed on it after the signup or after the login.

miho•3mo ago

@sodic That's correct, out of the box they can't know. The developer can have some sort of extra field on the user e.g. isOnboardingCompleted that gets set to true after the first login.

Filip•3mo ago

Made an issue: https://github.com/wasp-lang/wasp/issues/2277

GitHub

Consider providing different redirect pages for login and signup · ...

Wasp exposes the onAuthSucceededRedirectTo field that tels Wasp where to send the user after successful authentication (login and signup). Every now and then, users want different behavior dependin...

Gaming

Programming

Redirect to a specific page after signup