Ory integration in Next.js

Last Update : 15 August, 2023 | Published : 25 May, 2023 | 4 Min Read

To secure your Next.js application with Ory authentication - basically adding a login page so that only authorized users can view your page or to atleast know who your users are. To get started all you need is a Next.js application. So, lets jump right in:

Creating a Next.js application

If you don’t already have a Next.js application, you can create one with the help of Next.js 101 - Introduction and Tutorial blog.

Step 1: Installing Ory

Once you have your application ready. Install Ory’s SDK - to make API calls to Ory and Ory’s integration tools for JavaScript frameworks. Ory provides all the integration tools that you’ll need to combine Ory with Next.js

1.1: Install Ory SDK

//This step is the same for both TypeScript and JavaScript appication.
npm i --save @ory/integrations @ory/client

1.2: Create [...paths].js in pages/api/.ory/

Add this in […paths].js to connect your Next.js application with Ory’s APIs. This also ensures that all credentials and cookies are set up properly.

//reference: https://www.ory.sh/docs/getting-started/integrate-auth/nextjs
// @ory/integrations offers a package for integrating with Next.js in development which is not required in production.
import { config, createApiHandler } from "@ory/integrations/next-edge"

export { config }

// We need to create the Ory Network API which acts like a bridge.
export default createApiHandler({
  fallbackToPlayground: true,
  dontUseTldForCookieDomain: true
})

This is to add session check to your Next.js application homepage. Add the code snippets to your existing code in index.js

—Code snippets that you need to : #1, #2, #3—

Code #1: Below existing import statements

// import Router and configurations
import { useEffect, useState } from "react"
import { useRouter } from "next/router"
import { Configuration, FrontendApi } from "@ory/client"
import { edgeConfig } from "@ory/integrations/next"

const ory = new FrontendApi(new Configuration(edgeConfig))

// Returns either the email or the username depending on the user's Identity Schema
const getUserName = identity =>
  identity.traits.email || identity.traits.username

Code #2: Inside export{} statement

  // To access router, session and URL objects inside function
  const router = useRouter()
  const [session, setSession] = useState()
  const [logoutUrl, setLogoutUrl] = useState()

  useEffect(() => {
    ory
      .toSession()
      .then(({ data }) => {
        // User has a session!
        setSession(data)
        // Create a logout URL
        ory.createBrowserLogoutFlow().then(({ data }) => {
          setLogoutUrl(data.logout_url)
        })
      })
      .catch(() => {
        // Redirect to login page
        return router.push(edgeConfig.basePath + "/ui/login")
      })
  }, [router])

  if (!session) {
    return null
  }

Code #3: Inside return statement

// Get user identity - it can be username or emailID
   <p>Hello, {getUserName(session?.identity)}</p>
   <a href={logoutUrl}>Log out</a>

If you followed the Next.js 101 blog you can directly add the complete code block to your index.js

Complete code

//Reference for ORY code: https://www.ory.sh/docs/getting-started/integrate-auth/nextjs
import Head from 'next/head';
import Layout, { siteTitle } from '../components/layout';
import utilStyles from '../styles/utils.module.css';

// Added Code #1 start
import { useEffect, useState } from "react"
import { useRouter } from "next/router"

import { Configuration, FrontendApi } from "@ory/client"
import { edgeConfig } from "@ory/integrations/next"

const ory = new FrontendApi(new Configuration(edgeConfig))

// Returns either the email or the username depending on the user's Identity Schema
const getUserName = identity =>
  identity.traits.email || identity.traits.username
// Added Code #1 end

export default function Home() {

  // Added Code #2 start
  const router = useRouter()
  const [session, setSession] = useState()
  const [logoutUrl, setLogoutUrl] = useState()

  useEffect(() => {
    ory
      .toSession()
      .then(({ data }) => {
        // User has a session!
        setSession(data)
        // Create a logout url
        ory.createBrowserLogoutFlow().then(({ data }) => {
          setLogoutUrl(data.logout_url)
        })
      })
      .catch(() => {
        // Redirect to login page
        return router.push(edgeConfig.basePath + "/ui/login")
      })
  }, [router])

  if (!session) {
    // Still loading
    return null
  }
  // Added Code #2 end

  return (
    <Layout home>
                   {/* Added Code #3 start*/}
                   <p>Hello, {getUserName(session?.identity)}</p>
                   <a href={logoutUrl}>Log out</a>
                   {/* Added Code #3 end*/}
              <Head>
        <title>{siteTitle}</title>
      </Head>
      <section className={utilStyles.headingMd}>
        <p>Your Webpage</p>
        <p>
          This is just a sample you can build more websites like this refer to {' '}
          <a href="https://nextjs.org/learn"> 
          Next.js tutorial {''}
          </a>for more clear and detailed explanation on why you have to add certain things.
        </p>
      </section>
    </Layout>
  );
}

Run your application

Start server

npm run dev

Now open the default browser which is almost always http://localhost:3000, you’ll be seeing Ory’s Sign in page.

NOTE: Here, we are using a javascript application, if your application is in typescript you’ll have to make some changes in the ory code that you added. For typescript code you can follow the official ORY documentation

Looking for Cloud-Native Implementation?

Finding the right talent is pain. More so, keeping up with concepts, culture, technology and tools. We all have been there. Our AI-based automated solutions helps eliminate these issues, making your teams lives easy.