Skip to main content

Next.js App Router Quickstart

This quickstart will guide you through the process of setting up Ory Elements with the App Router in a Next.js application.

info

The code used in the following quickstart is available in the App Router example GitHub repository

Prerequisites​

note

This quickstart assumes you're using the alias configuration and not using a src/ directory. If your project uses src/, place all files referenced as being in the root directory inside src/ instead.

  1. Create a new Next.js application using your preferred package manager. You can use the following commands to create a new Next.js app:

    npm create next-app@latest

  2. Install the @ory/elements-react and @ory/nextjs package in your Next.js application.

    npm install @ory/elements-react @ory/nextjs

  3. Add the configuration for Ory Elements in your Next.js application. Create a new file named ory.config.ts in the root of your project and add the following code:

    ory.config.ts

    See full code on GitHub

  4. Add the middleware to your Next.js application. Create a new file named middleware.ts in the root of your project and add the following code:

    middleware.ts

    See full code on GitHub

  5. Configure browser redirects in your Ory Console. Navigate to Branding > Browser redirects and set the Global redirect URL to /ui/welcome. This ensures users are redirected to the correct page after completing authentication flows.

    Browser Redirects Configuration

  6. Create a new folder named components in the root of your project. Inside the components folder, create a new file named custom-card-header.tsx and add the following code:

    components/custom-card-header.tsx

    See full code on GitHub

    This component is used by the Verification and Settings pages to customize the card header.

  7. Create a new folder named app in the root of your project. Inside the app folder, create a new folder named auth. Inside the auth folder, create the following files:

    • login/page.tsx
    • registration/page.tsx
    • recovery/page.tsx
    • verification/page.tsx

    Additionally, create a settings folder in the app directory:

    • settings/page.tsx

    Each of these files will contain the respective Ory Elements component for the self-service flow.

    app/auth/login/page.tsx

    See full code on GitHub

  8. Use your own Ory Network project by setting the ORY_SDK_URL environment variable in your .env file:

    .env

    See full code on GitHub

    You can find your Ory Network project URL in the Get started section of the Ory Console.

  9. Run the application and create your first user by navigating to /auth/registration. After registration, you can log in at /auth/login. You can also access the other self-service flows at the following URLs:

    • Recovery: /auth/recovery
    • Verification: /auth/verification
    • Settings: /settings
    npm run dev

    Open your browser and navigate to http://localhost:3000/auth/registration to create your first user.

Next steps​

Now that you have set up Ory Elements with the App Router in your Next.js application, you can further customize the components, add your own styles, and integrate them into your application as needed. You can also explore the Ory Elements documentation for more information on how to use the components and customize them to fit your needs. See Theming for more details on how to customize look and feel of the components.