How to configure Resend provider

[Goldziher]

Hi,

I setup auth using drizzle and Google. I encountered issues due to missing cloudflare:sockets etc., which you can read on here:

vercel/next.js#50177

I managed to bypass this by following the guidelines for using edge functions - although I am just using Node (I am not using edge at all, but it seems these dependencies find their way nonetheless due to how auth.js is packaged).

What I got working for oAuth with Google is the following-

I have an ´auth.config.ts´ file with the following content:

/*
 * see: https://authjs.dev/getting-started/migrating-to-v5#edge-compatibility
 * */

import Google from "next-auth/providers/google";
import type { NextAuthConfig } from "next-auth";

export const authConfig = { providers: [Google] } satisfies NextAuthConfig;

An helpers.ts file with the following content:

import NextAuth, { DefaultSession } from "next-auth";
import { authConfig } from "@/auth/config";
import { DrizzleAdapter } from "@auth/drizzle-adapter";
import { getDatabaseClient } from "db/connection";
import { accounts, sessions, users, verificationTokens } from "db/schema";
import { User } from "@/types/database-types";
import { eq } from "drizzle-orm";

declare module "next-auth" {
	/**
	 * Returned by `auth`, `useSession`, `getSession` and received as a prop on the `SessionProvider` React Context
	 */
	interface Session {
		user: User & DefaultSession["user"];
	}
}

export const { handlers, signIn, signOut, auth } = NextAuth({
	adapter: DrizzleAdapter(getDatabaseClient(), {
		usersTable: users,
		accountsTable: accounts,
		sessionsTable: sessions,
		verificationTokensTable: verificationTokens,
	}),
	session: { strategy: "jwt" },
	callbacks: {
		session: async ({ session }) => {
			const db = getDatabaseClient();
			const user = await db.query.users.findFirst({
				where: eq(users.email, session.user.email),
			});

			session.user = { ...user, ...session.user };
			return session;
		},
	},
	...authConfig,
});

And the following middleware.ts file:

import { MiddlewareConfig, NextResponse } from "next/server";

import NextAuth from "next-auth";
import { authConfig } from "@/auth/config";
import { PagePath } from "@/enums";

const { auth } = NextAuth(authConfig);

export const middleware = auth(async (req) => {
	const path = new URL(req.url).pathname;

	const session = await auth();

	const isSigninPage = path === PagePath.SIGNIN.toString();
	const isRootPage = path === PagePath.ROOT.toString();
	const isAPIRoute = path.startsWith("/api");

	if (session && isSigninPage) {
		return NextResponse.redirect(new URL(PagePath.ROOT, req.url));
	}

	if (!session && !(isRootPage || isSigninPage || isAPIRoute)) {
		return NextResponse.redirect(new URL(PagePath.SIGNIN, req.url));
	}
});

export const config: MiddlewareConfig = {
	matcher: ["/((?!api|_next/static|_next/image\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)"],
};

This works for google. But the moment i add Resend into the mix, like so:

/*
 * see: https://authjs.dev/getting-started/migrating-to-v5#edge-compatibility
 * */

import Google from "next-auth/providers/google";
import type { NextAuthConfig } from "next-auth";
import Resend from "next-auth/providers/resend";

export const authConfig = { providers: [Google, Resend] } satisfies NextAuthConfig;

I am getting an error:

[auth][error] MissingAdapter: Email login requires an adapter. Read more at https://errors.authjs.dev#missingadapter
    at assertConfig (webpack-internal:///(middleware)/./node_modules/.pnpm/@[email protected]/node_modules/@auth/core/lib/utils/assert.js:141:24)
    at Auth (webpack-internal:///(middleware)/./node_modules/.pnpm/@[email protected]/node_modules/@auth/core/index.js:88:95)
[auth][error] MissingAdapter: Email login requires an adapter. Read more at https://errors.authjs.dev#missingadapter
    at assertConfig (webpack-internal:///(middleware)/./node_modules/.pnpm/@[email protected]/node_modules/@auth/core/lib/utils/assert.js:141:24)
    at Auth (webpack-internal:///(middleware)/./node_modules/.pnpm/@[email protected]/node_modules/@auth/core/index.js:88:95)

I understand that resend requires a config of a DB, but this cannot work because if I actually update the initialization of the auth middleware in ´middleware.ts´ to include an adapter, I am getting the following:

cloudflare:sockets
Module build failed: UnhandledSchemeError: Reading from "cloudflare:sockets" is not handled by plugins (Unhandled scheme).
Webpack supports "data:" and "file:" URIs by default.
You may need an additional plugin to handle "cloudflare:" URIs.

Please help

[Goldziher]

I solved this,

the solution is to cheat in the middleware:

import { MiddlewareConfig, NextResponse } from "next/server";
import { PagePath } from "@/enums";
import NextAuth from "next-auth";

const { auth } = NextAuth({ providers: [] });

export const middleware = auth(async (req) => {
	const path = new URL(req.url).pathname;

	const session = await auth();

	const isSigninPage = path === PagePath.SIGNIN.toString();
	const isRootPage = path === PagePath.ROOT.toString();
	const isAPIRoute = path.startsWith("/api");

	if (session && isSigninPage) {
		return NextResponse.redirect(new URL(PagePath.ROOT, req.url));
	}

	if (!session && !(isRootPage || isSigninPage || isAPIRoute)) {
		return NextResponse.redirect(new URL(PagePath.SIGNIN, req.url));
	}
});

export const config: MiddlewareConfig = {
	matcher: ["/((?!api|_next/static|_next/image\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)"],
};