In this tutorial we will create a NextJs app and connect it to Entrypage.io with the help of the NextAuth library. info We are going to create a NextJs app that uses a custom API route (/api/auth) with handlers that run server side. Therefor we consider this a confidential client and can provide the client id and client secret through environment variables with the help of a .env file. For more information on the different types of clients, please see: [todo] Create Next App linkThe quickest way to create a new Next.js app is using create-next-app, which sets up everything automatically for you. To create a project and add the NextAuth library, run: # make sure to pick the App Router if you want to follow along npx create-next-app@latest my-entrypage-demo cd my-entrypage-demo pnpm add next-auth After a series of prompts (be sure to select the default App Router) create-next-app will create a folder with your projectname, install dependencies and add NextAuth. The route to handle the auth linkCreate a route for NextAuth to handle our callbacks etc. This file has all our configuration, but relies on a couple of environment settings for the Entrypage.io client configuration. Create the file /app/api/auth/[…nextauth]/route.ts with this contents: import NextAuth from "next-auth" const handler = NextAuth({ providers: [ { id: "entrypage", name: "Entrypage.io", issuer: process.env.OAUTH_ISSUER, type: "oauth", clientId: process.env.OAUTH_CLIENT_ID, clientSecret: process.env.OAUTH_CLIENT_SECRET, wellKnown: process.env.OAUTH_WELL_KNOWN, idToken: true, checks: ["pkce","state"], authorization: { params: { scope: "openid profile", } }, profile(profile) { return { id: profile.sub, name: profile.name } } } ] }) export { handler as GET, handler as POST } Environment file linkCreate a .env.local file in the root of the project. NEXTAUTH_URL=https://localhost:3000 NEXTAUTH_SECRET=some_super_secret # Replace with your actual values OAUTH_CLIENT_ID= OAUTH_CLIENT_SECRET= OAUTH_ISSUER= OAUTH_WELL_KNOWN=/.well-known/openid-configuration In this file we need to replace a couple of placeholders with the actual values. In this demo we will setup a confidential client with GitHub as external identity provider, but the proces is the same for all supported providers. Our Client configuration linkNavigate to your Realm and add a Client in the Clients section. Now we can copy the client id and client secret from this page and replace the placeholders. The final piece of information is our Realm Uri and it is located on the top right corner of the Entrypage app. Clicking this link will take you to the well-known OpenID Connect configuration json document. Page and layout linkNext, a page that needs to work with a NextAuth session. Replace the demo code in app/page.tsx with the following: 'use client'; import { useSession, signIn, signOut } from "next-auth/react"; export default function Home() { const { data: session } = useSession(); return (

{session ? ( <>

Welcome, {session.user?.name}

) : ( <>

Not signed in

)}

); } To provide this session functionality, we finally update the app/layout.tsx 'use client'; import "./globals.css"; import { SessionProvider } from "next-auth/react"; export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { return ( {children} ); } Run the dev server linkRun the dev server on https (this is currently the only configuration supported by entrypage.io). If this is the first run, you will need to answer some questions regarding the self-signed certificates. pnpm nextjs dev --experimental-https

Protocols & general concepts