Next.js - Middleware for Kinde & Redirect to login page

Hi, I'm coming from a Kinde competitor, I love Kinde. It has many more advantage for me also how it already includes the 2FA.

I am using Next.js 14 I want to redirect user to login page directly. Docs says

💡 As of right now the middleware in the app router does not work when trying to redirect to api/auth/login. This is because of Next.js caching which causes issues during authentication.

💡 As of right now the middleware in the app router does not work when trying to redirect to api/auth/login. This is because of Next.js caching which causes issues during authentication.

. So do I have to put

    const { isAuthenticated, isLoading } = useKindeBrowserClient();

    if (isLoading)
    return (
      <div>Loading...</div>
      )
    return isAuthenticated ? (
    <div>You can see this page.</div>
  ) : ( 
    <div>
        You have to <LoginLink>Login</LoginLink> to see this page.
    </div>

    const { isAuthenticated, isLoading } = useKindeBrowserClient();

    if (isLoading)
    return (
      <div>Loading...</div>
      )
    return isAuthenticated ? (
    <div>You can see this page.</div>
  ) : ( 
    <div>
        You have to <LoginLink>Login</LoginLink> to see this page.
    </div>

every

page.tsx

page.tsx

? Also redirect to sign in would be better UX for. So isn't that possible to use Middleware for my situation?

Kinde•3y ago•

15 replies

zor

Next.js - Middleware for Kinde & Redirect to login page

💡 As of right now the middleware in the app router does not work when trying to redirect to api/auth/login. This is because of Next.js caching which causes issues during authentication.

💡 As of right now the middleware in the app router does not work when trying to redirect to api/auth/login. This is because of Next.js caching which causes issues during authentication.

. So do I have to put

    const { isAuthenticated, isLoading } = useKindeBrowserClient();

    if (isLoading)
    return (
      <div>Loading...</div>
      )
    return isAuthenticated ? (
    <div>You can see this page.</div>
  ) : ( 
    <div>
        You have to <LoginLink>Login</LoginLink> to see this page.
    </div>

    const { isAuthenticated, isLoading } = useKindeBrowserClient();

    if (isLoading)
    return (
      <div>Loading...</div>
      )
    return isAuthenticated ? (
    <div>You can see this page.</div>
  ) : ( 
    <div>
        You have to <LoginLink>Login</LoginLink> to see this page.
    </div>

every

page.tsx

page.tsx

? Also redirect to sign in would be better UX for. So isn't that possible to use Middleware for my situation?

Next.js - Middleware for Kinde & Redirect to login page

Similar Threads

Next.js - Middleware for Kinde & Redirect to login page

Similar Threads

Similar Threads

Similar Threads