PPR + Authentication
Unanswered
American Crocodile posted this in #help-forum
American CrocodileOP
I'm trying to enable and understand PPR on my project.
All my <Link> clicks are redirecting me to my /sign-in page, I have no idea why, I could use some guidance to debug this.
I only check and redirect to sign-in in 2 places:
1. Middlware using supabase SSR (from the guide)
2. At the start of each page I have the following guard
All my <Link> clicks are redirecting me to my /sign-in page, I have no idea why, I could use some guidance to debug this.
I only check and redirect to sign-in in 2 places:
1. Middlware using supabase SSR (from the guide)
2. At the start of each page I have the following guard
... await checkPageAcess() //start of every page.tsx
export async function checkPageAccess(permissions: PagePermissions = {}): Promise<PageAccessResult> {
const user = await getUserAuth();
// Basic authentication check
if (permissions.requiresAuth !== false && !user) {
redirect("/sign-in");
}
// Team existence check - every user must have a team
if (!user.team) {
// User without team is an invalid state - redirect to sign-in
redirect("/sign-in");
}
and
export async function getUserAuth(): Promise<UserAuth | null> {
try {
const session = await verifySession();
if (!session) {
return null;
}
// Get cached user data
const userData = await getCachedUserData(session.sub);
if (!userData || !userData.team_members || userData.team_members.length === 0) {
return null;
}
// Get subdomain and tenant cookie for team resolution
const subdomain = (await headers()).get("X-Subdomain");
const cookieStore = await cookies();
const tenantCookie = cookieStore.get("tenant")?.value;
// Transform to UserAuth
return await transformToUserAuth(userData, subdomain, tenantCookie);
} catch (error) {
captureError(error, {
operation: "getUserAuth",
extra: {
error: error instanceof Error ? error.message : String(error),
},
});
return null;
}
}
export const verifySession = cache(async () => {
const supabase = await createClient();
const { data } = await supabase.auth.getClaims();
const claims = data?.claims;
if (!claims || !claims.sub) {
return null;
}
return claims;
});
2 Replies
Chub mackerel
With PPR, client-side <Link> navigation doesn’t run middleware, so page-level guards that check the session on the client may temporarily see null and trigger redirects. Use useSession with conditional rendering or check session on the server to avoid this.
American CrocodileOP
@Chub mackerel Thanks, that is at least what I think i'm doing. On the server I'm checking session on verifySession, it uses getClaims (new method to check session from supabase) and I'm calling checkPageAccess that calls the checkPageAccess the verifySession at the top of each page.