brief-mechanic-56794
09/03/2024, 1:15 PMchilly-king-10285
09/03/2024, 1:15 PMchilly-king-10285
09/03/2024, 1:15 PMbash npx create-next-app@latest --typescript cd <your-project-directory>
2. Set up your environment variables to connect with Ory's APIs: bash export NEXT_PUBLIC_ORY_SDK_URL=https://$<http://PROJECT_SLUG.projects.oryapis.com|PROJECT_SLUG.projects.oryapis.com>
3. Start the Next.js development server: bash npm run dev
4. Add a session check to the default home page of the Next.js example application to check whether the user is signed in, and redirect them to the login page if not: javascript 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) => identity.traits.email || identity.traits.username const 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(() => { return router.push(edgeConfig.basePath + "/ui/login") }) }, [router]) if (!session) { return null } // Rest of your component }
You can find more details in the [Ory documentation](https://www.ory.sh/docs/getting-started/integrate-auth/nextjs). When upgrading to production, you need to set up a custom domain and configure your Next.js app to use it. You can find more details on how to do this in the [Ory documentation](https://www.ory.sh/docs/getting-started/integrate-auth/nextjs#go-to-production).brief-mechanic-56794
09/03/2024, 1:18 PMchilly-king-10285
09/03/2024, 1:18 PMchilly-king-10285
09/03/2024, 1:19 PM