Page navigation not working as desired

Answered

i_lost_to_loba_kreygasm posted this in #help-forum

2024-03-23T18:56:00.000Z

So I have a google sign in button , I used router.push to navigate to home page but it returns to 'sign page' again . How to fix this?

Answered by Ray

"use client";
import { Container, TextInput, Button } from "@mantine/core";
import { signIn } from "next-auth/react";
import { useSession, getSession } from "next-auth/react";
import { useRouter } from "next/navigation";
import { useEffect } from 'react'

function Login() {
  const { data, status } = useSession();
  const router = useRouter();

  useEffect(() => {
    if (status === "authenticated") {
      setTimeout(() => {
        router.push("/")
      }, 6000)
    }
  }, [status])

  return (
    <Container>
      {status === "authenticated" ? (
        <h1>You are logged in</h1>
      ) : (
        <>
          <TextInput w={320} mt={16} />
          <TextInput w={320} mt={16} />
          <Button
            mt={16}
            onClick={ () => {
               signIn("google");
            }}
          >
            Sign In
          </Button>
        </>
      )}
    </Container>
  );
}
export default Login;

View full answer

34 Replies

i_lost_to_loba_kreygasmOP

2024-03-23T18:56:15.000Z

<Button mt={16} onClick={async ()=>{
          await signIn('google');
          setTimeout(()=>{
            router.push("/"),
            12000
          })

}}>Sign In</Button>

Arinji

2024-03-23T19:17:01.000Z

This looks normal, are you sure nothing else routes you back?

i_lost_to_loba_kreygasmOP

2024-03-23T19:21:25.000Z

yeah I am sure ðŸ˜¦

@i_lost_to_loba_kreygasm js <Button mt={16} onClick={async ()=>{ await signIn('google'); setTimeout(()=>{ router.push("/"), 12000 }) }}>Sign In</Button>

Ray

2024-03-23T19:25:56.000Z

setTimeout(()=>{
            router.push("/")
},12000)

@Ray ts setTimeout(()=>{ router.push("/") },12000)

i_lost_to_loba_kreygasmOP

2024-03-23T19:33:58.000Z

thank you , i realized my mistake

but now it doesnt navigate at all ðŸ˜¦

        <Button mt={16} onClick={async ()=>{
          await signIn('google');
          setTimeout(()=>{
            router.push("/")
            },6000)

}}>Sign In</Button>

@i_lost_to_loba_kreygasm but now it doesnt navigate at all ðŸ˜¦

Ray

2024-03-23T19:35:03.000Z

why you need setTimeout?

@i_lost_to_loba_kreygasm js <Button mt={16} onClick={async ()=>{ await signIn('google'); setTimeout(()=>{ router.push("/") },6000) }}>Sign In</Button>

Ray

2024-03-23T19:35:59.000Z

try this

 <Button mt={16} onClick={async ()=>{
    await signIn('google');
    await new Promise(res => setTimeout(res,6000))
    router.push("/")
}}>Sign In</Button>

i_lost_to_loba_kreygasmOP

2024-03-23T19:36:47.000Z

wait whats res?

a function ?

Ray

2024-03-23T19:37:11.000Z

resolve

yes

you can call it whatever you like

i_lost_to_loba_kreygasmOP

2024-03-23T19:39:04.000Z

still doesnt navigate ,where am I doing wrong ?

Ray

2024-03-23T19:39:47.000Z

could you show the full code

or do you see any error

DEV_2.0

2024-03-23T19:41:05.000Z

@i_lost_to_loba_kreygasm are you importing
useRouter();
and using
const router = useRouter();?

i_lost_to_loba_kreygasmOP

2024-03-23T19:41:20.000Z

'use client';
import { Container,TextInput,Button } from "@mantine/core";
 import {signIn} from 'next-auth/react';
 import { useSession, getSession } from "next-auth/react";
 import { useRouter } from 'next/navigation'
function Login(){
    const { data, status } = useSession();
    const router = useRouter();
    
    return <Container>
        {status==='authenticated'?<h1>You are logged in</h1>: <><TextInput w={320}mt={16}/>
        <TextInput w={320} mt={16}/>
        <Button mt={16} onClick={async ()=>{
         await signIn('google');
         await new Promise(res => setTimeout(res,6000))
         router.push("/")

}}>Sign In</Button>
  </>}
  </Container>
}
export default Login;

this is my whole code

@i_lost_to_loba_kreygasm js 'use client'; import { Container,TextInput,Button } from "@mantine/core"; import {signIn} from 'next-auth/react'; import { useSession, getSession } from "next-auth/react"; import { useRouter } from 'next/navigation' function Login(){ const { data, status } = useSession(); const router = useRouter(); return <Container> {status==='authenticated'?<h1>You are logged in</h1>: <><TextInput w={320}mt={16}/> <TextInput w={320} mt={16}/> <Button mt={16} onClick={async ()=>{ await signIn('google'); await new Promise(res => setTimeout(res,6000)) router.push("/") }}>Sign In</Button> </>} </Container> } export default Login;

Ray

2024-03-23T19:42:24.000Z

do you see error in the browser or server

i_lost_to_loba_kreygasmOP

2024-03-23T19:44:00.000Z

dont see any

DEV_2.0

2024-03-23T19:45:17.000Z

It seems correct and I suggest try it with import { useRouter } from 'next/router';
I know use for page routing

@DEV_2.0 It seems correct and I suggest try it with import { useRouter } from 'next/router'; I know use for page routing

Ray

2024-03-23T19:45:38.000Z

this doesn't work for app router

i_lost_to_loba_kreygasmOP

2024-03-23T19:46:05.000Z

i used next/router and it showed smth like router not mounted o.O

@i_lost_to_loba_kreygasm dont see any

Ray

2024-03-23T19:46:08.000Z

are you using next-auth v4?

i_lost_to_loba_kreygasmOP

2024-03-23T19:46:52.000Z

  "next-auth": "^4.24.7",

looks like it

@i_lost_to_loba_kreygasm looks like it

Ray

2024-03-23T19:47:52.000Z

"use client";
import { Container, TextInput, Button } from "@mantine/core";
import { signIn } from "next-auth/react";
import { useSession, getSession } from "next-auth/react";
import { useRouter } from "next/navigation";
import { useEffect } from 'react'

function Login() {
  const { data, status } = useSession();
  const router = useRouter();

  useEffect(() => {
    if (status === "authenticated") {
      setTimeout(() => {
        router.push("/")
      }, 6000)
    }
  }, [status])

  return (
    <Container>
      {status === "authenticated" ? (
        <h1>You are logged in</h1>
      ) : (
        <>
          <TextInput w={320} mt={16} />
          <TextInput w={320} mt={16} />
          <Button
            mt={16}
            onClick={ () => {
               signIn("google");
            }}
          >
            Sign In
          </Button>
        </>
      )}
    </Container>
  );
}
export default Login;