When attempting to access a /Dashboard page after logging in through Gmail or GitHub on the client side using callbackUrl, I am encountering a 404 error stating that the page could not be found.
The project directory structure for the relevant files is as follows: pages.tsx renders the buttons.tsx buttons.
ProjectName
/app
pages.tsx
/components
buttons.tsx
/pages
dashboard.tsx
Below is the code for the sign-in button located in the buttons.tsx file:
return <button className="btn btn-secondary" onClick={() => signIn('google', { callbackUrl: '/Dashboard' })}>Sign in</button>;;
And here is the dashboard.tsx code:
import './Dashboard.css'
import DashBoardNavbar from "../components/DashboardNavbar"
interface Props {
children: any
}
export default function Dashboard(props: Props) {
return (
<div>
<div className="navbar-container">
<DashBoardNavbar title="Medical Reports" description="View your medical reports"></DashBoardNavbar>
<DashBoardNavbar title="Prescriptions" description="View your past and current prescriptions"></DashBoardNavbar>
<DashBoardNavbar title="Appointments" description="View your past and future appointments"></DashBoardNavbar>
</div>
</div>
)
}
I have attempted changing the provider (Google, undefined, etc.) but this did not resolve the issue. Is there something I might be overlooking?