Theo's Typesafe Cult•2y ago

Next 13 + NextAuth - Redirect on the server

So... I was wondering if anyone has this figured out. I want a protected dashboard page that gets the session and redirects if not authed. Buttt... I wanted this on a server component. Instead of rendering the page then redirecting if session is null.

import { authOptions } from "@/src/pages/api/auth/[...nextauth]";
import { unstable_getServerSession } from "next-auth/next";

export default async function DashboardPage() {
  const session = await unstable_getServerSession(authOptions);
  if (!session) {
    // return redirect to login or whatever
  }
  return (
    <>
      <main className=" z-10 flex h-screen w-screen flex-col items-center justify-center">
        <h1>we have session</h1>
      </main>
    </>
  );
}

import { authOptions } from "@/src/pages/api/auth/[...nextauth]";
import { unstable_getServerSession } from "next-auth/next";

export default async function DashboardPage() {
  const session = await unstable_getServerSession(authOptions);
  if (!session) {
    // return redirect to login or whatever
  }
  return (
    <>
      <main className=" z-10 flex h-screen w-screen flex-col items-center justify-center">
        <h1>we have session</h1>
      </main>
    </>
  );
}

with this I get the following error lmao

error - ./node_modules/@mapbox/node-pre-gyp/lib/clean.js:8:0
Module not found: Can't resolve 'fs'

Import trace for requested module:
./node_modules/@mapbox/node-pre-gyp/lib/ sync ^\.\/.*$
./node_modules/@mapbox/node-pre-gyp/lib/node-pre-gyp.js
./node_modules/bcrypt/bcrypt.js
./src/pages/api/auth/[...nextauth].ts
./app/(app)/dashboard/page.tsx

https://nextjs.org/docs/messages/module-not-found

error - ./node_modules/@mapbox/node-pre-gyp/lib/clean.js:8:0
Module not found: Can't resolve 'fs'

Import trace for requested module:
./node_modules/@mapbox/node-pre-gyp/lib/ sync ^\.\/.*$
./node_modules/@mapbox/node-pre-gyp/lib/node-pre-gyp.js
./node_modules/bcrypt/bcrypt.js
./src/pages/api/auth/[...nextauth].ts
./app/(app)/dashboard/page.tsx

https://nextjs.org/docs/messages/module-not-found

And yes, I wish I could solve this without "use client";

3 Replies

adomaitis•2y ago

Trying to follow NextAuth documentation:

import getServerSession from "next-auth/next";
import { authOptions } from "@/src/pages/api/auth/[...nextauth]";

export default async function DashboardPage() {
  const session = await getServerSession(authOptions);
  console.log(session);
  return (
    <>
      <main className=" z-10 flex h-screen w-screen flex-col items-center justify-center">
        <h1>we have session</h1>
      </main>
    </>
  );
}

import getServerSession from "next-auth/next";
import { authOptions } from "@/src/pages/api/auth/[...nextauth]";

export default async function DashboardPage() {
  const session = await getServerSession(authOptions);
  console.log(session);
  return (
    <>
      <main className=" z-10 flex h-screen w-screen flex-col items-center justify-center">
        <h1>we have session</h1>
      </main>
    </>
  );
}

error:

error - ./node_modules/@mapbox/node-pre-gyp/lib/util/nw-pre-gyp/index.html
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <!doctype html>
| <html>
| <head>

Import trace for requested module:
./node_modules/@mapbox/node-pre-gyp/lib/util/nw-pre-gyp/index.html
./node_modules/@mapbox/node-pre-gyp/lib/ sync ^\.\/.*$
./node_modules/@mapbox/node-pre-gyp/lib/node-pre-gyp.js
./node_modules/bcrypt/bcrypt.js
./src/pages/api/auth/[...nextauth].ts
./app/(app)/dashboard/page.tsx

error - ./node_modules/@mapbox/node-pre-gyp/lib/util/nw-pre-gyp/index.html
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <!doctype html>
| <html>
| <head>

Import trace for requested module:
./node_modules/@mapbox/node-pre-gyp/lib/util/nw-pre-gyp/index.html
./node_modules/@mapbox/node-pre-gyp/lib/ sync ^\.\/.*$
./node_modules/@mapbox/node-pre-gyp/lib/node-pre-gyp.js
./node_modules/bcrypt/bcrypt.js
./src/pages/api/auth/[...nextauth].ts
./app/(app)/dashboard/page.tsx

adomaitis•2y ago

found a workaround: https://github.com/vercel/next.js/issues/46493

GitHub

Route Handlers Crash with bcrypt · Issue #46493 · vercel/next.js

Verify canary release I verified that the issue exists in the latest Next.js canary release Provide environment information Operating System: Platform: linux Arch: x64 Version: Ubuntu 20.04.0 LTS M...

adomaitis•2y ago

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    appDir: true,
+   serverComponentsExternalPackages: ['bcrypt'],
  },
};

module.exports = nextConfig;

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    appDir: true,
+   serverComponentsExternalPackages: ['bcrypt'],
  },
};

module.exports = nextConfig;

Gaming

Programming

Next 13 + NextAuth - Redirect on the server