simm-next-auth

Simple Next Auth

Missing ECMAScript module utils for Node.js

Next auth for next@14

Features

✅ Nextjs middleware

✅ Nextjs auth routing

✅ Nextjs credentials provider

❯ Nextjs email provider

❯ Nextjs github provider

❯ Nextjs facebook provider

Usage

Install npm package:

# using yarn
yarn add @techbasejs/simm-next-auth

# using npm
npm install @techbasejs/simm-next-auth

# using pnpm
pnpm install @techbasejs/simm-next-auth

Note: Node.js 18+ is recommended.

Import utils:

// ESM
import {} from "@techbasejs/simple-next-auth";

// CommonJS
const {} = require("@techbasejs/simple-next-auth");

Resolving ESM modules

Several utilities to make ESM resolution easier:

• Respecting ECMAScript Resolver algorithm
• Exposed from Node.js implementation
• Windows paths normalized
• Supporting custom extensions and /index resolution
• Supporting custom conditions
• Support resolving from multiple paths or urls

Setup middleware

import { NextResponse } from "next/server";
import { withAuth } from "simple-next-auth";

const auth = withAuth(function middleware(request) {
  const pathname = request.nextUrl.pathname;
  if (pathname === "/") {
    return NextResponse.redirect(new URL("/login", request.url));
  }
  return NextResponse.next();
});

export default auth;

// See "Matching Paths" below to learn more
export const config = {
  matcher: [
    // "/:path*",
    "/((?!api|login|_next/static|_next/image|favicon.ico).*)",
  ],
};

Setup provider

"use client";

import { SessionProvider } from "@techbasejs/next-simple-auth/dist/react";

export default function App({ children }: { children: React.ReactNode }) {
  return <SessionProvider>{children}</SessionProvider>;
}

Setup auth api routes

Create file /api/[...auth]/route.ts

import { auth, Provider, AuthRequestType } from "@techbasejs/simple-next-auth";
import { NextRequest } from "next/server";

const loginProvider = new Provider("credentials", {
  name: "login",
  handler: async (
    request: AuthRequestType<{
      email?: string;
      password?: string;
      enable_2fa?: boolean;
    }>,
  ) => {
    const body = await request.json();
    return {
      authorized: !body.enable_2fa,
      session: body,
      jwt: {},
    };
  },
});

const twoFactorProvider = new Provider("credentials", {
  name: "2fa",
  handler: async (request: AuthRequestType<{ name?: string }>, { session }) => {
    const body = await request.json();
    return {
      session: session,
      jwt: {
        // Jwt options
      },
    };
  },
});

const h = auth({
  providers: [loginProvider, twoFactorProvider],
});

export { h as GET, h as POST };

Provider response params

Field	Default value	Type	Description
session	{}	object	auth session data
authorized	true	boolean	if authorized is false, skipped generate token
jwt	object	{}	jwt config

Usage

signIn

import { signIn } from "@techbasejs/next-simple-auth/dist/react";

signIn("login", {
  email: "EMAIL",
  password: "PASSWORD",
});

signOut

import { signOut } from "@techbasejs/next-simple-auth/dist/react";

signout();

Use and update session

import { useSession } from "@techbasejs/next-simple-auth/dist/react";

export default function Login() {
    const { user, update } = useSession()

    return <div>
        {{ user.email }}
    </div>
}

License

MIT - Made with 💛