Integrate authentication into Next.js

This guide shows how to create a simple Next.js application and secure it with authentication powered by Ory. The guide provides the setup for using Ory Network, but the code can be used with both Ory Network and self-hosted Ory software.

This guide is perfect for you if:

1. You have Next.js installed.
2. You want to build an app using Next.js.
3. You want to give access to your application to signed-in users only.

Before you start, watch this video to see the user flow you're going to implement:

info

You can find the code of the sample application here.

Create Next.js app

First, create a new Next.js project. Run:

npx create-next-app@latest
cd app-name

When prompted, select the following options:

• Use TypeScript: Yes
• Use ESLint: Yes
• Use Tailwind CSS: Yes
• Use src/ directory: No
• Use App Router: Yes
• Customize the default import alias: No

Install Ory SDK

To interact with Ory's APIs, install the Ory SDK:

npm i @ory/client-fetch

Create a new Ory project

1. Create an Ory account at https://console.ory.sh
2. Create a new project at https://console.ory.sh/projects/create
3. Go to your project settings

https://console.ory.sh/projects/<id>/settings

4. Note down your project credentials (ID, slug, endpoint)

https://console.ory.sh/projects/<id>/settings

Install Ory CLI

Follow this guide to install the Ory CLI on your machine.

Why do I need the Ory CLI

The Ory security model uses HTTP cookies to manage sessions, tokens, and cookies. Because of browser security measures like CORS, Ory APIs must be exposed on the same domain as your application. In the case of this example the application runs on your local machine. The cookie domain is localhost.

info

Use either localhost or 127.0.0.1 consistently. Although technically they refer to the same machine, browsers treat them as different cookie domains.

Ory CLI provides a convenient way to configure and manage projects. Additionally, the CLI provides Ory Tunnel - a tool that ensures cookies match the domain your application is currently on.

To make Ory APIs and your application available on the same domain, Ory Tunnel mirrors Ory endpoints and rewrites cookies to match the correct domain. As a result, the domain of the cookies is set correctly to the domain you run the app on instead of <your-project-slug>.projects.oryapis.com.

By using the Tunnel, you can easily connect the application you're developing locally to Ory Network and consume the APIs without additional configuration or self-hosting any Ory services.

tip

To learn more about the Ory Tunnel, read the dedicated section of the Ory CLI documentation.

Run Ory APIs on localhost

In a new terminal window, run the Ory Tunnel:

ory tunnel --project <project-id> http://localhost:3000

This command mirrors Ory APIs on http://localhost:4000. Use that URL as the basePath for the @ory/client-fetch SDK.

Validate and login

To implement authentication, modify the existing app/page.tsx component to include the following:

app/page.tsx

"use client"

import { useEffect, useState } from "react"
import { FrontendApi, Configuration, Session } from "@ory/client-fetch"

const basePath = process.env.NEXT_PUBLIC_ORY_SDK_URL || "http://localhost:4000"
const ory = new FrontendApi(
  new Configuration({
    basePath,
    credentials: "include",
  }),
)

export default function Page() {
  const [session, setSession] = useState<Session | null>(null)
  const [logoutUrl, setLogoutUrl] = useState<string | null>(null)

  useEffect(() => {
    // Check if the user is authenticated
    const checkSession = async () => {
      try {
        const session = await ory.toSession()
        setSession(session)

        // Get the logout URL once we have a session
        try {
          const { logout_url } = await ory.createBrowserLogoutFlow()
          setLogoutUrl(logout_url)
        } catch (logoutError) {
          console.error("Error creating logout flow:", logoutError)
        }
      } catch (error) {
        // No valid session found, redirect to Ory login
        window.location.href = `${basePath}/ui/login`
      }
    }

    checkSession()
  }, [])

  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <div className="w-full max-w-3xl">
        <div className="flex justify-between items-center mb-8">
          <h1 className="text-2xl font-bold">Welcome to Protected Page</h1>

          {/* Logout button */}
          {logoutUrl && (
            <a
              href={logoutUrl}
              className="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700 transition-colors"
            >
              Logout
            </a>
          )}
        </div>

        <div className="p-4 rounded-lg overflow-auto">
          <h2 className="text-lg font-semibold mb-2">Session Information:</h2>
          <pre className="text-sm">{JSON.stringify(session, null, 2)}</pre>
        </div>
      </div>
    </main>
  )
}

The component checks whether a user is signed in and if so, shows a logout link and the user's session information. Otherwise, it shows a login and registration link.

Run your Next.js app

Now that your app is ready, it's time to run it! Start the Next.js development server:

npm run dev

Go to localhost:3000 to access your application.

Test your application

Access your Next.js app at localhost:3000. Since there is no active session you will be redirected to the login screen. Then click the link to Sign up and create a new account.

Go to production

You can use many different approaches to go to production with your application. You can deploy it on Kubernetes, AWS, a VM, a RaspberryPi - the choice is yours! To connect the application to your Ory project, the app and Ory APIs must be available under the same common domain, for example https://ory.example.com and https://www.example.com.

You can easily connect Ory to your subdomain. To do that, add a Custom Domain to your Ory Network project.

With the custom domain set up, you don't need to use Ory Tunnel to interact with Ory APIs. Instead, use the configured custom domain in your SDK calls.