If you need your component to be client-side in a Next.js app using Ory, you should use the Ory SDK directly in your React component and perform session checks or API calls inside React hooks like

useEffect

. This approach is shown in the Ory documentation, where the session is checked on the client side and the user is redirected if not authenticated. Here’s an example pattern from the docs for a client-side component:

javascript import { useEffect, useState } from "react" import { useRouter } from "next/router" import { Configuration, FrontendApi, Session, Identity } from "@ory/client" import { edgeConfig } from "@ory/integrations/next"  const ory = new FrontendApi(new Configuration(edgeConfig))  const getUserName = (identity: Identity | undefined) =>   identity?.traits.email || identity?.traits.username || "user"  export default function Home() {   const router = useRouter()   const [session, setSession] = useState<Session | undefined>()   const [logoutUrl, setLogoutUrl] = useState<string | undefined>()    useEffect(() => {     ory       .toSession()       .then(({ data }) => {         setSession(data)         ory.createBrowserLogoutFlow().then(({ data }) => {           setLogoutUrl(data.logout_url)         })       })       .catch(() => {         // Redirect to login page if not authenticated         return router.push(edgeConfig.basePath + "/ui/login")       })   }, [router])    if (!session) {     // Still loading     return null   }    return (     <div>       <p>Hello, {getUserName(session.identity)}</p>       <a href={logoutUrl}>Log out</a>     </div>   ) }

This code runs entirely on the client side, using React state and effects. The Ory SDK (

@ory/client

) is safe to use in the browser, and this pattern is recommended for client-side rendered components in Next.js when using Ory for authentication. Just make sure you do not use server-only APIs or environment variables that are not exposed to the browser in your client-side code [Require login to access the home page](https://www.ory.sh/docs/getting-started/integrate-auth/nextjs#require-login-to-access-the-home-page). If you move to production and use a custom domain, you should update your Ory SDK configuration as described in the docs [Go to production](https://www.ory.sh/docs/getting-started/integrate-auth/nextjs#go-to-production).

Sorry @witty-noon-28853, I'm currently experiencing some technical difficulties. Please try again in a few minutes. If this issue persists, please reach out to the administrators of this Slack workspace.

Sorry @witty-noon-28853, I am experiencing especially high traffic right now, please try again. 🧑‍💻

@chilly-king-10285 I'm trying to render a login page, not show user details

Sorry @witty-noon-28853, I'm currently experiencing some technical difficulties. Please try again in a few minutes. If this issue persists, please reach out to the administrators of this Slack workspace.