Skip to main content

Integrate authentication into Auth.js and NextAuth

This guide covers integrating Ory with Auth.js, a popular authentication library for Next.js applications. Auth.js is a flexible authentication library that supports multiple authentication providers, including Ory Network out of the box.

Auth.js is the successor to NextAuth.js, which is a popular authentication library for Next.js applications. The Ory provider works with both Auth.js and NextAuth.js, so you can use either library to integrate Ory with your Next.js application.

To connect your Next.js application with Ory we:

  1. Clone an example Next.js application with Auth.js
  2. Create an OAuth2 client in Ory and configure Auth.js to use it
  3. Perform a demo flow to see the integration in action

Let's get started!

Clone the example Next.js application​

First, clone the example Next.js application with Auth.js:

git clone https://github.com/nextauthjs/next-auth-example.git
cd next-auth-example
npm i
cp .env.local.example .env.local
npx auth secret

In the auth.ts file, replace the providers array with just Ory:

auth.ts

See full code on GitHub

Create OAuth2 Client in Ory Network​

To create the OAuth2 client, you need to know the redirect URL of your Next.js application. The redirect URL is the URL where Ory will send the user after they log in. When running NextJS locally, the redirect URL for Auth.js is usually http://localhost:3000/auth/callback/ory.

  1. Log into your Ory Network account.
  2. Create a new project or select an existing one.
  3. Go to OAuth 2, select OAuth2 Clients, and click Create OAuth 2.0 Client.
  4. Select Server App.
  5. Choose a client name, e.g. "NextAuth / Auth.js Example".
  6. Scopes openid and offline_access are preselected. Add to the list:
    • email
    • profile
  7. Add to Redirect URIs value http://localhost:3000/api/auth/callback/ory.
  8. Add to Post Logout Redirect URIs value http://localhost:3000/.
  9. Scroll to the bottom and click Create Client.
  10. Copy the Client Secret save it as ORY_CLIENT_SECRET your .env.local file. Click Done.
  11. Copy the Client ID from the client list and save it as ORY_CLIENT_ID your .env.local file.

Configure Auth.js to use Ory​

Your .env.local file should now look like this:

env.local.example

See full code on GitHub

Next, add the Ory SDK URL to your .env.local file. The Ory SDK URL can be taken from the Get started section in the Ory Console.

Test the flow​

Now everything is set up, and you can run

npm run dev

to start the app and click on the top left "Sign in" button to start the login flow.

Logout​

Logout is performed using OpenID Connect Logout:

components/auth-components.tsx

See full code on GitHub

Go to production​

When you are ready to go to production, you need to update the redirect and post-logout redirect URL in the OAuth2 client settings to the production URL of your Next.js application.

Trouble Shooting​

Incorrect redirect_uri​

If the server responds with

The request is missing a required parameter, includes an invalid parameter value, includes a parameter more than once, or is otherwise malformed.
The 'redirect_uri' parameter does not match any of the OAuth 2.0 Client's pre-registered redirect urls.

please ensure that the redirect URL is correct. You can find the redirect URL you are sending to Ory by checking the network tab of your browser and look for calls to /oauth2/auth.