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.
Create an ApplicationAdd 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:
javascriptproviders: [ { 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:
javascriptimport { 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.
typescriptimport { 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); };
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.