How to Save $150 with NextAuth on Vercel

Welcome to the world of 2025 where Vercel whacks you with the low low price of $150 to add a password around your site. Well today this one is going to be straight to the point. We are going to go through whats needed to add this same functionality to your Next.js application using NextAuth.

The GitHub Repo can be found: JackDevAU/next-auth-credentials-example

Install NextAuth.js

Add the NextAuth.js library to your project:

npm install next-auth

Setting Up Your auth.ts

This file doesn't technically need to be here - it can be in the api route (we add this next), but, this makes everything a bit neater, we like smaller files! All we are doing is setting up our NextAuth configuration, in particular a credentials-based authentication flow.

Create a file called auth.ts in your project (e.g., in the src directory) and add the following code:

// auth.ts
import type {
  GetServerSidePropsContext,
  NextApiRequest,
  NextApiResponse,
} from "next";
import type { NextAuthOptions, User } from "next-auth";
import { getServerSession } from "next-auth";
import CredentialsProvider from "next-auth/providers/credentials";

// You'll need to import and pass this
// to `NextAuth` in `app/api/auth/[...nextauth]/route.ts`
export const config = {
  providers: [
    CredentialsProvider({
      // The name to display on the sign-in form
      name: "Credentials",
      // Define credentials input fields for the form
      credentials: {
        password: { label: "Password", type: "password" },
      },
      async authorize(credentials, req) {

        //? Note: The check is against a password from the environment. 
        if (credentials?.password === process.env.PASSWORD) {
          const user: User = { id: "0", name: "Local Dev", email: "dev@email.com" };
          return user;
        }

        // Return null if the credentials are invalid
        return null;
      },
    }),
  ],
} satisfies NextAuthOptions;

// Utility function to use the authentication config in server contexts
export function auth(
  ...args:
    | [GetServerSidePropsContext["req"], GetServerSidePropsContext["res"]]
    | [NextApiRequest, NextApiResponse]
    | []
) {
  return getServerSession(...args, config);
}

This file sets up a credentials provider where the password is validated against an environment variable (PASSWORD). If the password matches, the user is authenticated ✅

Creating the API Route

Next, create the API route to handle authentication requests. Add a file at app/api/auth/[...nextauth]/route.ts:

// app/api/auth/[...nextauth]/route.ts
import { config } from "@/auth";
import NextAuth from "next-auth";

const handler = NextAuth(config);

export { handler as GET, handler as POST };

This route leverages the configuration defined in auth.ts and handles both GET and POST requests for authentication.

Environment Variable

Lets now see if its all working! Locally we can test this by setting your password in a .env file in your project root. In Vercel Its under Environment Variables and just copy and paste the below there as well!

#.env
PASSWORD="your-secure-password"

Now when you go to your site, you should be greeted by a password input box that when entering the above password, will allow you entry to your site!

Nice work saving $150!!