VPS: ReferenceError: process is not defined

[iMrDJAi]

Environment

  Binaries:
    Node: 16.15.0 - /usr/bin/node
    npm: 8.5.5 - /usr/bin/npm
  Browsers:
    Firefox: 99.0
  npmPackages:
    next-auth: ^4.3.4 => 4.3.4 
    react: ^17.0.2 => 17.0.2
    vite-plugin-ssr: ^0.4.0-beta.16 => 0.4.0-beta.16

Reproduction URL

null

Describe the issue

I'm using vite-plugin-ssr with NextAuth.js, I'm facing the error ReferenceError: process is not defined whenever I import anything from next-auth/react into my client side code (index.page.tsx), this prevents me from using the client API.

It looks like that NextAuth is directly using process.env from the client side: https://github.com/nextauthjs/next-auth/blob/main/packages/next-auth/src/react/index.tsx#L49. As we know, process.env is not available on browser, this is what causes this error.

Next.js does indeed expose a process.env object (https://nextjs.org/docs/basic-features/environment-variables). However, this is not the case for VPS and other frameworks that may work with NextAuth.

As a workaround, add this line to your HTML:

<script>self.process = { env: {} }</script>

How to reproduce

null

Expected behavior

null

[balazsorban44]

process is polyfilled by Next.js, this should work. vite-plugin-ssr is not officially supported by NextAuth.js currently. We welcome PRs though. 👍

[brillout]

It does work though :-).

Many use vite-plugin-ssr together with NextAuth.js.

FYI the vite-plugin-ssr docs for it: https://vite-plugin-ssr.com/NextAuth.js — in case you'd want to add a link to it in NextAuth.js's docs. (I can also do a PR if you want. Just checked: I'd add a guide, and an entry to FAQ > Compatibility > Can I use NextAuth.js with Vite?.)

[iMrDJAi]

@balazsorban44 It's unclear to me how Next.js is exposing environment variables to the client like process.env.NEXTAUTH_URL even though they are not prefixed by NEXT_PUBLIC_. Am I missing something?

[Sajad-Sharhani]

install dotenv and add this to vite.config

define: {
    "process.env": process.env,
  }

[brillout]

I'm surprised this works. Is that exactly what you are doing?

Also, be careful with such wildcard solutions. If you inadvertently have a process.env.NEXTAUTH_SECRET somewhere in a **/*.page.js dependency then you'll leak it. (E.g. if you inadvertently import a serve-side NextAuth.js module.)

[iMrDJAi]

@Sajad-Sharhani Defining the process.env object itself is not the issue. The issue is how to manage to pass process.env.NEXTAUTH_URL_INTERNAL, process.env.NEXTAUTH_URL, process.env.VERCEL_URL to the client side? (https://github.com/nextauthjs/next-auth/blob/main/packages/next-auth/src/react/index.tsx#L49)

What I don't understand is that these variables are not prefixed by NEXT_PUBLIC_. What's going on under the hood?

[brillout]

You can configure Vite to make these available on the client-side, see https://vite-plugin-ssr.com/NextAuth.js.

[brillout]

Check the official NextAuth.js vite-plugin-ssr docs at https://vite-plugin-ssr.com/NextAuth.js.

[iMrDJAi]

@brillout Man that's awesome! So exposing environment variables with custom prefixes to the client is possible in Vite!

Since you've updated the docs, consider mentioning that a fetch polyfill in node is needed in order to use getSession() and other related functions on server side (I recommend cross-fetch). Next.js provides a fetch polyfill by default.

import fetch, { Headers, Request, Response } from 'cross-fetch'

if (!globalThis.fetch) {
  globalThis.fetch = fetch
  globalThis.Headers = Headers
  globalThis.Request = Request
  globalThis.Response = Response
}

[brillout]

👍 Let's use cross-fetch in the official example then.

[haftav]

Following up on this discussion, I believe if you stay on a v2 node-fetch version that should work as well. Looks like node-fetch v3 is ESM only.

[brillout]

@haftav Yes I can confirm that.

[iMrDJAi]

@brillout My example is done, please have a look: https://github.com/iMrDJAi/vps-nextauth-example

[brillout]

@iMrDJAi That's great! I've added your example to https://vite-plugin-ssr.com/NextAuth.js#examples.