awangardajazz•7mo ago

<Authenticated> <Unauthenticated> + NextJS 14

Hello, I am using NextJs 14 with App Router, and need to display redirection to sign-in / sign-up page for unauthorised users, later also landing page, otherwise I am showing dashboard. I've set it up with Clerk/Convex provider if I use: <Authenticated> {children} </Authenticated> on redirection, the sign-in / sign-out pages are blank, because of the authorisation. In alternative, I add <Unauthenticated> component, but how do I then do redirection to children, only for public routes ? Code as image, for easier reading. Thanks, WK

1 Reply

winsoroaks•7mo ago

redirect only works for server components, Authenticated only works for client components here's what i do for the src/app/page.tsx

import { redirect } from "next/navigation"
import { currentUser } from "@clerk/nextjs/server"

export default async function HomePage() {
  const user = await currentUser()
  if (user) {
    return redirect("/")
  }
  return redirect("/sign-in")
}

import { redirect } from "next/navigation"
import { currentUser } from "@clerk/nextjs/server"

export default async function HomePage() {
  const user = await currentUser()
  if (user) {
    return redirect("/")
  }
  return redirect("/sign-in")
}

also it's better to paste code using backticks (`) x3 than pasting images 🙂

<Authenticated> <Unauthenticated> + NextJS 14

Did you find this page helpful?