Next.js (NextAuth.js)

Quick and easily add authentication to your Next.js application using NextAuth.js.

Prerequisites

This guide assumes you’ve already set up your application in the Kenni developer portal.

Add NextAuth.js to your application

Follow this example guide to add NextAuth.js to your application.

💡

Important: Don’t forget to register the redirect url in the Kenni Developer Portal for your application after setting up NextAuth.js, otherwise your authorization request will fail with invalid_redirect_uri

Register Kenni as a custom OAuth provider

Add the following code to your global NextAuth.js configuration:

javascript
providers: [
    {
      id: "kenni",
      name: "Kenni NextJs Example",
      type: "oauth",
      wellKnown: `${issuer}/.well-known/openid-configuration`,
      authorization: {
        params: {
          scope: `${scope} ${apiScope}`,
          redirect_uri: redirectUri,
          ui_locales: "is", // Optional. Valid options, "is" or "en"
          appearance: undefined, // Optional. Valid options, "light" or "dark"
        },
      },
      clientId,
      clientSecret,
      idToken: true,
      checks: ["pkce", "state", "nonce"],
      profile: (
        profile: Record<string, string>,
        tokens: TokenSetParameters
      ) => {
        return {
          id: profile.sub,
          sub: profile.sub,
          name: profile.name,
          accessToken: tokens.access_token ?? "",
          idToken: tokens.id_token ?? "",
          refreshToken: tokens.refresh_token ?? "",
        };
      },
    },
  ],

💡

All required values in this section can be found in the overview tab of your application in the Kenni Developer Portal.

Replace redirectUrl with the appropriate url created during the setup phase of NextAuth.js. This url will look something like https//your-app-domain.is/api/auth/callback/some-identifier. More information can be found in the NextAuth.js documentation.

Replace issuer with the name of your issuer. This can be copied from the overview tab of your application, and would look something like https://idp.kenni.is/your-domain.

Replace scope in the authorization params with identity scopes you which to receive from Kenni. All available identity scopes are listed in the overview tab.

If the issuing of access_tokens as JWT’s is desired, replace apiScope with the particular API scope your application requires. For more information regarding API scopes, see Authorizing API scopes.

Replace clientId and clientSecret with the appropriate values.

You should now be able to sign in:

javascript
import { signIn } from "next-auth/react";

export const SignInButton = () => {
  return <button onClick={() => signIn("kenni")}>Continue with Kenni</button>;
};

RP-Initiated logout

In order to end the user’s authenticated session at Kenni, redirect the user to the end_session_endpoint as defined within your teams discovery endpoint. It’s required to add a valid post_logout_redirect_uri and optionally pass an id_token_hint which is the id_token of the current logged in user.

This sample code applies in the case that your application has SSO enabled, and assumes your NextJs application uses the app router. More information can be found in under Single Sign-on.

typescript
import { Issuer } from "openid-client";

export const GET = async (req: Request) => {
  const { searchParams } = new URL(req.url);
  const issuer = process.env.KENNI_ISSUER;

  if (!issuer) {
    throw new Error("Issuer is not set");
  }

  const hint = searchParams.get("hint");
  const postLogoutRedirectUri =
    searchParams.get("post_logout_redirect_uri") ?? "http://localhost:3000";

  const { metadata } = await Issuer.discover(issuer);
  const url = `${metadata.end_session_endpoint}?id_token_hint=${hint}&post_logout_redirect_uri=${postLogoutRedirectUri}`;

  return Response.redirect(url);
};

app/api/sign-out/route.ts

Assuming the route above is defined as /api/sign-out, redirect your user to this page in order to end their session at Kenni.

View complete integration

Visit our Github repository for a complete NextAuth.js integration sample.