Wasp-lang•2mo 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

7 Replies

kapa.ai•2mo 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•2mo 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

balina•2mo 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•2mo 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•2mo ago

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

Filip•2mo 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•2mo 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.

Gaming

Programming

Is there a way automatically navigate to another page