Wasp-lang•5mo ago

Is there a way automatically navigate to another page

Hi, i want to add a logic in login and register page if user already loginned then login page must navigate to main page const { data: user } = useAuth(); i can get users data to check if user loginned or not but i can't find any thing in documentation for auto navigation like useNavigate

12 Replies

kapa.ai•5mo ago

Hi @balina. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, you can use the useHistory hook from react-router-dom to programmatically navigate to another page. In your case, you can check if the user is logged in and if so, redirect them to the main page. Here's an example of how you can do this:

import { useAuth } from 'wasp/client/auth'  
import { useHistory } from 'react-router-dom'  
  
export function LoginPage() {  
 const { data: user } = useAuth()  
 const history = useHistory()  
  
 if (user) {  
   history.push('/main')  
 }  
  
 // ... rest of your code
}

import { useAuth } from 'wasp/client/auth'  
import { useHistory } from 'react-router-dom'  
  
export function LoginPage() {  
 const { data: user } = useAuth()  
 const history = useHistory()  
  
 if (user) {  
   history.push('/main')  
 }  
  
 // ... rest of your code
}

In this example, history.push('/main') will navigate to the main page if the user is logged in. You can use the same logic in your signup page as well. Please note that this is just an example and you might need to adjust the code to fit your application's structure and requirements. For more information, you can refer to the following sources: - Accessing the logged-in user (https://wasp-lang.dev/docs/auth/overview#using-the-useauth-hook) - Login action (https://wasp-lang.dev/docs/auth/username-and-pass#login) - Signup action (https://wasp-lang.dev/docs/auth/username-and-pass#signup) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @balina, 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•5mo ago

Hi @balina, You can also use useNavigate with react router, as you normally would. Wasp's frontend app is a React app with React router, so everything works normally 🙂 Does that solve your problem? Let me know if there's anything else

balinaOP•5mo ago

I don't know why, but it seems the React Router version is v5.x.x, so it doesn't have useNavigate. I can only use useHistory wasp uses react-route-doom v5.3.3 so latest version wont work. But useHistory can be used

Filip•5mo ago

Oh, yes, sorry, we really do need to update that 😅 It's been on our todo list for quite some time. I'm adding this comment to the issue to prioritize it: https://github.com/wasp-lang/wasp/issues/1247#issuecomment-2236530430 Thanks!

martinsos•5mo ago

That said we do have https://wasp-lang.dev/docs/auth/overview#onauthsucceededredirectto-string, would this be a solution for your situation?

Filip•5mo ago

@martinsos That doesn't work in this case. From what I got, @balina wants to redirect the user to the home page if they land on /login while logged in. Our hook only covers the redirect after submitting the login form (you can still land on the login page even when logged in). Should we maybe rethink the hook? There probably aren't many use cases for displaying the login page to logged in users - it's likely they landed there by accident

martinsos•5mo ago

Ah right! I thought that might be so. We might, although I might be more on the side of what we have now then, which is let them have the freedom to customizet his on their own. Ok, all good then.

p4j4r5•4w ago

@martinsos
I have hit the same issue ,where I have page which is rendered partial if user isn't signed up or logged in. Once he signs up, I need to redirect the user back to that page. So wondering if any options are there for this?

Filip•4w ago

Can you do it with useAuth and useNavigate? React router dom has now been updated

p4j4r5•4w ago

Is this in new version v0.15 ? I am on version 0.14. May need to update it to 0.15 first then

miho•4w ago

Yep, with 0.15 you get the latest React Router, with 0.14 and the old version of React Router the hook is called useHistory

MEE6•4w ago

Wohooo @miho, you just became a Waspeteer level 38!

Gaming

Programming

Is there a way automatically navigate to another page