K
Kinde•4w ago
Pranay

NextJS PWA app gets stuck at this screen

I have a project which I've converted to a PWA. We use Kinde for the auth of course. However, sometimes, when I open the app, it gets stuck at this screen. There is no button I can click and nothing I can do. It is stuck indefinitely. It feels like a auth page cause that is the only page that doesn't have the look and feel of our app. From the logs I can see it opens up the base file "/". And that page uses this code: const { isAuthenticated } = getKindeServerSession(); if (await isAuthenticated()) { redirect("/welcome"); } return ( <div className="flex flex-col md:flex-row h-dvh font-helvetica"> Home Page </div> ) There is no routing that happens after that so I'm guessing it is stuck at the isAuthenticated lines. The funny thing is, if I give it sometime, the auth resolves itself and I get led straight into the app with my auth credentials correctly in place. Any idea or thoughts on how to debug this?
No description
3 Replies
Pranay
PranayOP•4w ago
Okay did some testing by adding some logs: const { isAuthenticated } = getKindeServerSession(); console.log("crossed the getKinderSerevrAction line"); if (await isAuthenticated()) { console.log("in the if block of is auth on home"); redirect("/welcome"); } It seems like it gets stuck at the redirect block. @KindeAI
Ask Inkeep
Ask Inkeep•4w ago
Hmmm.. it seems I’m not enabled to reply in this channel. Please contact a team member for help.
Oli - Kinde
Oli - Kinde•4w ago
Hey @Pranay, Based on your description, this appears to be an authentication flow state issue that can occur in PWAs. Here are a few potential solutions: 1. Use Middleware Instead Instead of checking authentication in the page component, consider using Next.js middleware for authentication checks : 
import { authMiddleware } from "@kinde-oss/kinde-auth-nextjs/server";

export const config = {
    matcher: [
      "/((?!api|_next/static|_next/image|favicon.ico).*)"
    ]
};

export default authMiddleware;
import { authMiddleware } from "@kinde-oss/kinde-auth-nextjs/server";

export const config = {
    matcher: [
      "/((?!api|_next/static|_next/image|favicon.ico).*)"
    ]
};

export default authMiddleware;
2. Handle Loading State In your current implementation, consider adding a loading state while authentication is being checked : 
const { isAuthenticated, isLoading } = getKindeServerSession();

if (isLoading) {
    return <div>Loading...</div>;
}

if (await isAuthenticated()) {
    redirect("/welcome");
}
const { isAuthenticated, isLoading } = getKindeServerSession();

if (isLoading) {
    return <div>Loading...</div>;
}

if (await isAuthenticated()) {
    redirect("/welcome");
}
3. Client-Side Authentication Check For PWAs, you might want to handle authentication checks on the client side : 
"use client";

import { useKindeBrowserClient } from "@kinde-oss/kinde-auth-nextjs";

export default function Home() {
    const { isAuthenticated, isLoading } = useKindeBrowserClient();

    if (isLoading) return <div>Loading...</div>;

    if (isAuthenticated) {
        window.location.href = "/welcome";
        return null;
    }

    return (
        <div className="flex flex-col md:flex-row h-dvh font-helvetica">
            Home Page
        </div>
    );
}
"use client";

import { useKindeBrowserClient } from "@kinde-oss/kinde-auth-nextjs";

export default function Home() {
    const { isAuthenticated, isLoading } = useKindeBrowserClient();

    if (isLoading) return <div>Loading...</div>;

    if (isAuthenticated) {
        window.location.href = "/welcome";
        return null;
    }

    return (
        <div className="flex flex-col md:flex-row h-dvh font-helvetica">
            Home Page
        </div>
    );
}
4. Check Environment Variables There's a known issue with authentication flow state in preview environments . Make sure your environment variables are correctly set, especially: - KINDE_SITE_URL - KINDE_POST_LOGIN_REDIRECT_URL - KINDE_POST_LOGOUT_REDIRECT_URL If you're still experiencing issues - let me know.

Did you find this page helpful?