Open ks4na opened 1 month ago
I got a few errors lately that Canary is using the new async server component props... So.... just a suggestion:
// ...
type PageProps = {
searchParams?: Promise<{
callbackUrl?: string;
}>;
};
export default async function LoginPage(props: PageProps) {
const searchParams = await props.searchParams;
const redirectTo = searchParams?.callbackUrl || "/dashboard"; // <============== get `redirectTo` from search param `callbackUrl`
return (
<main className="flex items-center justify-center md:h-screen">
{/* ... */}
<LoginForm redirectTo={redirectTo} /> {/* <============== pass `redirectTo` to LoginForm */}
</div>
</main>
);
}
currently,The implementation of
next-auth
Credentials authentication flow in Chapter 15 of the official tutorial works, but it has some flaws that cause several confusion for me and also some other learners. such asExisting Issues
Based on my observations, the following issues exist with the tutorial's implementation (which can be reproduced in the official live demo):
/dashboard
page, but the browser's URL does not change and remains as/login
. Additionally, theSign Out
button does not work until the page is refreshed, after which the URL displays correctly as.../dashboard
and theSign Out
button works as expected.https://github.com/user-attachments/assets/bfa5979d-05d6-41ab-9b81-bde9a07a4466
/dashboard/customers
), the page content updates to the/login
page, but the browser's URL does not change. After refreshing the page, the browser URL updates to.../login?callbackUrl=https%3A%2F%2Fnext-learn-dashboard.vercel.sh%2Fdashboard%2Fcustomers
.https://github.com/user-attachments/assets/e0153cee-1b0d-400b-9306-321428283e1a
callbackUrl=...
query parameter (e.g., when accessinghttps://next-learn-dashboard.vercel.sh/dashboard/customers
while not logged in, which redirects to the/login
page with thecallbackUrl
), the expected behavior is to be redirected to thecallbackUrl
page after a successful login. However, after logging in, the user is still redirected to the/dashboard
page, and the same issue from point 1 occurs: the browser's URL does not update and remains as.../login?callbackUrl=https%3A%2F%2Fnext-learn-dashboard.vercel.sh%2Fdashboard%2Fcustomers
, and theSign Out
button does not work. Refreshing the page resolves the issue.https://github.com/user-attachments/assets/4dd22877-1e4b-42f8-a471-08b99ff87959
Suggested Improvements
During SignIn
As mentioned in this comment Redirect URL not updating correctly in browser after successful redirect, pass the
redirectTo
parameter to thesignIn()
function, and ensure it aligns with the logic inauth.config.ts -> authorized
.The logic in
auth.config.ts -> authorized
:To keep the same logic, the login form should include the
redirectTo
field, defaulting to/dashboard
. If the URL contains acallbackUrl
, the field should be set to that value.modify
app/login/page.tsx
:modify
app/ui/login-form.tsx
:During SignOut
In the
sidenav.tsx
, theredirectTo
parameter should be specified. Typically, when signing out, the user should be redirected to the homepage or the login page.modify
app/ui/dashboard/sidenav.tsx
:Verification After the Fixes
minimal reproducible repo: https://github.com/ks4na/nextjs-dashboard/tree/chapter15-improvements
vercel.app preview link
Additional Information
next-auth documentation
For more details on
signIn()
,signOut()
, andredirectTo
, see the documentation: signIn(), signOut().