OpenPass next.js quickstart guide

This guide explains how to configure OpenPass as an authentication provider using the NextAuth.js plugin for the Next.js web framework. This option uses the web-based redirect flow where the client initiates the authentication flow by directing the user to the authorize URL on a browser with a full-page redirect. A common approach is to generate the authorize URL and link an OpenPass-branded Sign In with OpenPass button to it.

This guide is for using the NextAuth.js plugin within the Next.js framework. If you are using a Next.js website with the OpenPass JavaScript SDK, see OpenPass JavaScript quickstart guides.

IMPORTANT: For the plugin and web framework to receive the client ID and client secret, you must first set up your OpenPass account.

To use this option, install Next.js and the NextAuth.js plugin, then configure NextAuth.js.

Install next.js and the NextAuth.js plugin

Use the following instructions from external sources to install Next.js and enable NextAuth.js as the authentication layer for the application:

Configure NextAuth.js

To configure OpenPass with NextAuth.js, add OpenPass as an OIDC authentication provider in NextAuth.js by providing information as shown in the following code example.

[...]
 {
      id: "openpass",
      name: "OpenPass",
      type: "oidc",
      wellKnown: "https://auth.myopenpass.com/.well-known/openid-configuration",
      clientId: process.env.AUTH_OPENPASS_CLIENT_ID,
      clientSecret: process.env.AUTH_OPENPASS_SECRET,
      issuer: "https://auth.myopenpass.com",
      authorization: {
        params: { scope: "openid", state: randomstring.generate() },
      },
    } satisfies OIDCConfig<Profile>
[...]

For the full configuration, see the auth.ts file in GitHub.

For an example of an OpenPass application using NextAuth.js for Next.js, see the sample application in GitHub.

A successful configuration will use OpenPass to authenticate users in your Next.js application. For example, as shown in the following screenshot.

Additional resources

For more information, see the following pages: