Weird behavior hard landing verses navigating
Unanswered
American posted this in #help-forum
AmericanOP
I have a '/admin' route that has an authentication check if a user is unauthenticated a redirect will occur. When clicking a link that has '/admin' on the homepage we get a 200 for '/admin' route and then redirected the page also flashes with the dashboard. When we hard land though we get a 307 for '/admin' and there is no flashing here is the code. "next": "15.1.6"
page.tsx
import { protectedRoute } from "@/auth/request";
export default async function Page() {
await protectedRoute();
return <div>Secret Data</div>;
}
request.ts
export const protectedRoute = cache(async () => {
const { user, session } = await validateRequest();
if (!user || !session) {
redirect("/sign-in");
}
if (!user.emailVerified) {
redirect("/verify-email");
}
if (!user.onboardingComplete) {
redirect("/onboarding");
}
return { user, session };
});4 Replies
@American I have a '/admin' route that has an authentication check if a user is unauthenticated a redirect will occur. When clicking a link that has '/admin' on the homepage we get a 200 for '/admin' route and then redirected the page also flashes with the dashboard. When we hard land though we get a 307 for '/admin' and there is no flashing here is the code. "next": "15.1.6"
typescript
page.tsx
import { protectedRoute } from "@/auth/request";
export default async function Page() {
await protectedRoute();
return <div>Secret Data</div>;
}
request.ts
export const protectedRoute = cache(async () => {
const { user, session } = await validateRequest();
if (!user || !session) {
redirect("/sign-in");
}
if (!user.emailVerified) {
redirect("/verify-email");
}
if (!user.onboardingComplete) {
redirect("/onboarding");
}
return { user, session };
});
Orange-crowned Warbler
It occurred due to difference between clicking a link and a hard landing.
When you click a link to /admin:
Next.js client-side router fetches the page
The page loads (200 OK), runs protectedRoute()
Since unauthenticated, it triggers a client-side redirect
You briefly see the dashboard before the redirect completes (the "flashing")
When you directly request /admin:
Next.js renders the page on the server
protectedRoute() runs on the server
Server recognizes unauthenticated state and sends a 307 Temporary Redirect
Browser immediately follows the redirect without showing the dashboard
When you click a link to /admin:
Next.js client-side router fetches the page
The page loads (200 OK), runs protectedRoute()
Since unauthenticated, it triggers a client-side redirect
You briefly see the dashboard before the redirect completes (the "flashing")
When you directly request /admin:
Next.js renders the page on the server
protectedRoute() runs on the server
Server recognizes unauthenticated state and sends a 307 Temporary Redirect
Browser immediately follows the redirect without showing the dashboard
@Orange-crowned Warbler It occurred due to difference between clicking a link and a hard landing.
When you click a link to /admin:
Next.js client-side router fetches the page
The page loads (200 OK), runs protectedRoute()
Since unauthenticated, it triggers a client-side redirect
You briefly see the dashboard before the redirect completes (the "flashing")
When you directly request /admin:
Next.js renders the page on the server
protectedRoute() runs on the server
Server recognizes unauthenticated state and sends a 307 Temporary Redirect
Browser immediately follows the redirect without showing the dashboard
AmericanOP
Thank you for the response is there anyway to remove the 'flashing' from occuring?
@American Thank you for the response is there anyway to remove the 'flashing' from occuring?
Orange-crowned Warbler
What about using middleware?
AmericanOP
@Orange-crowned Warbler I'm using redis and drizzle x postrgres which isn't supported on the edge runtime. I see that there is a canary version that allows a node.js runtime for the middleware but I'd rather wait until it's fully fleshed out before going that route