March 9, 2026

How to Add Auth, Email, and Surveys to Next.js in 10 Minutes

A practical Next.js walkthrough for adding Google and GitHub auth, a welcome email, and an NPS survey with AscendKit from the CLI and MCP.

If you are building a SaaS app in Next.js, the first infrastructure milestone is usually authentication. The second milestone arrives right behind it: welcome emails, onboarding nudges, and some way to collect feedback once users start moving through the product.

The usual route is to integrate those one at a time. That works, but it also means separate vendors, separate dashboards, and separate user records that have to be kept synchronized.

This tutorial takes the faster route. You will add auth, transactional email, and surveys to a Next.js App Router app with AscendKit in roughly ten minutes using the SDK and CLI-first workflow.

What you will set up

By the end, you will have:

This assumes you already have a Next.js app running locally.

1. Install the SDK

Start in your project directory:

npm install @ascendkit/nextjs

Then install and initialize the CLI if you have not already:

npm install -g ascendkit
ascendkit init

The CLI links your local app to an AscendKit project and writes the required environment variables into .env.local. The important difference from a stitched setup is that you are not collecting keys from separate dashboards for auth, email, and surveys. You are setting up one platform.

2. Add the auth runtime

Create a small server helper:

// lib/auth.ts
import { createAscendKitAuthRuntime } from "@ascendkit/nextjs/server";

export const authRuntime = createAscendKitAuthRuntime();

Then add the route handlers:

// app/api/auth/[...all]/route.ts
import { authRuntime } from "@/lib/auth";
import { createAuthRouteHandlers } from "@ascendkit/nextjs/server";

export const { GET, POST } = createAuthRouteHandlers(authRuntime);

Wrap your app with the provider:

// app/layout.tsx
import { AscendKitProvider } from "@ascendkit/nextjs";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <AscendKitProvider>{children}</AscendKitProvider>
      </body>
    </html>
  );
}

Now create login and signup pages:

// app/login/page.tsx
import { Login } from "@ascendkit/nextjs";

export default function LoginPage() {
  return <Login onSuccess={() => (window.location.href = "/dashboard")} />;
}

// app/signup/page.tsx
import { SignUp } from "@ascendkit/nextjs";

export default function SignupPage() {
  return <SignUp onSuccess={() => (window.location.href = "/dashboard")} />;
}

At this point email-password auth is live.

3. Enable Google and GitHub OAuth

The fastest way to turn on social login is from the CLI or MCP workflow rather than hand-editing app code.

From the terminal:

ascendkit auth provider enable google
ascendkit auth provider enable github

If you are using MCP in your editor, the same change can be applied through the AscendKit project configuration without leaving your coding workflow.

For development, AscendKit can get you moving quickly. For production, you should register your own Google and GitHub OAuth apps so you control branding, callback settings, and provider-level limits.

Once enabled, the prebuilt auth UI will automatically offer those providers. You do not need to bolt separate OAuth wiring onto your app.

4. Create the welcome email template

The next thing most SaaS products need after signup is a welcome sequence. Start with the first email:

ascendkit templates create welcome-email

Open the generated template and make it specific to your product:

Then connect it to the signup event from the journey layer:

ascendkit journeys attach onboarding --trigger user.created --template welcome-email

This is where a unified platform pays off. You are not sending a webhook from auth into another email vendor and then hoping the contact sync stays healthy. The user already exists in the same system the journey uses.

5. Create an NPS survey

Once users have enough time to experience the product, you want feedback. Create a starter NPS survey:

ascendkit surveys create nps

From there you can edit the prompt, follow-up questions, and audience rules. A common pattern is to send the survey after a user completes activation milestones or after a set amount of product usage.

For example:

ascendkit journeys attach nps-request --trigger user.activated --survey nps

Now your app can collect structured feedback without exporting users into another survey tool and then trying to map responses back into product accounts manually.

6. Test the full flow

Run the app locally and validate the path:

  1. Sign up with Google or GitHub
  2. Confirm the user lands in your app
  3. Verify the welcome email template is configured and ready to send
  4. Check that the NPS survey exists and is associated with the same user lifecycle

In a stitched setup, this is the point where teams often find the first broken edge: an auth user exists but the messaging system lacks the right profile data, or the survey platform cannot tell which account the response belongs to. With AscendKit, the test is simpler because the surfaces share the same identity model.

7. Why this is faster than stitching vendors together

The obvious speed win is fewer installs and dashboards. The less obvious win is fewer future migration points.

When auth, email, and surveys come from separate tools, the first implementation still looks manageable. The pain shows up later:

By setting up the broader application-services layer at the same time as auth, you avoid turning every new lifecycle need into a new integration project.

Common questions

Do I need to use every feature on day one?

No. The point is not to activate every workflow immediately. The point is to choose a platform where auth, email, and surveys are already aligned when you need them.

Does this only work with Next.js?

The setup here is tailored to Next.js App Router because that is a common starting point for SaaS products. AscendKit also supports adjacent backend workflows, including token verification and webhook handling for Python services.

What if I already have a database?

Keep it. AscendKit is the application-services layer, not a database replacement. It sits alongside your app and removes the glue code that normally accumulates around auth, messaging, and surveys.

The practical takeaway

If you are already in Next.js, adding auth is easy. Adding auth in a way that does not force future email, journey, and survey decisions into separate systems is the more important move.

AscendKit lets you start with auth and keep the rest ready:

That is what makes "ten-minute setup" meaningful. It is not just fewer steps today. It is fewer integration problems three weeks from now when your roadmap stops being only about login.