Skip to main content

Integrate authentication into Auth.js and NextAuth

This guide explains how to integrate Ory with Auth.js, a flexible authentication library for Next.js applications. Auth.js supports multiple providers, including Ory Network.

Auth.js is the successor to NextAuth.js. The Ory provider works with both libraries.

Follow these steps to integrate Ory:

  • Clone an example Next.js application
  • Create and configure an OAuth2 client in Ory
  • Configure Auth.js to use Ory
  • Test the authentication flow
  • Move the integration to production

Clone Next.js app​

To set up the example application:

  1. Open a terminal window.

  2. Run the following commands:

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

  3. Open the auth.ts file.

  4. Check the providers array which uses Ory:

    auth.ts

    See full code on GitHub

Create and configure an OAuth2 client​

You must know your application's redirect URL. When running locally, the redirect URL is:

http://localhost:3000/api/auth/callback/ory

To create the client using the Ory Console:

  1. Sign in to your Ory Network account.

  2. Create or select a project.

  3. Go to OAuth 2, select OAuth2 Clients, and select Create OAuth 2.0 Client.

  4. Select Server App.

  5. Enter a client name, for example, "NextAuth / Auth.js Example."

  6. Ensure the following scopes are selected:

    • openid
    • offline_access
    • email
    • profile

  7. Add the following to Redirect URIs:

    http://localhost:3000/api/auth/callback/ory

  8. Add the following to Post Logout Redirect URIs:

    http://localhost:3000/

  9. Select Create Client.

  10. Save the Client Secret as ORY_CLIENT_SECRET in your .env.local file.

  11. Save the Client ID as ORY_CLIENT_ID in your .env.local file.

Configure Auth.js to use Ory​

Update your .env.local file to match the example:

.env.local.example

See full code on GitHub

Also add your Ory SDK URL. You can find it in the Get started section of the Ory Console.

Test your application​

To run the application:

  1. Open a terminal window.
  2. Run the following command:
npm run dev
  1. Open your browser and go to http://localhost:3000.
  2. Select Sign in to start the authentication flow.

Configure user sign-out with Ory​

To sign out users, use the OpenID Connect logout flow:

components/auth-components.tsx

See full code on GitHub

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.

Troubleshoot common integration errors​

Resolve redirect URL mismatch errors​

If you receive the following error:

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.

Make sure that the redirect URL exactly matches the one registered in Ory. Use the browser’s network tab to inspect requests made to /oauth2/auth.