Next-Auth client functionality on Vite

[leo-petrucci]

I've been using @auth/core to implement authentication in our Serverless Framework/React Vite stack.

From the API side, everything was pretty smooth. However when attempting to use the next-auth components and hooks I was met with the process is not defined error.

This is because Vite uses import.meta.env instead of process.env (https://vitejs.dev/guide/env-and-mode.html).

I ended up copying over the SessionProvider, useSession and the signin/signout functions into our codebase, but I think it would pretty easy to internally support both Webpack and Vite. For example:

// next-auth/react/index.ts
const getEnv = () => {
  if (typeof process === "undefined") {
    // @ts-expect-error
    return import.meta.env;
  }
  return process.env;
};

const __NEXTAUTH: AuthClientConfig = {
  baseUrl: parseUrl(getEnv().NEXTAUTH_URL ?? getEnv()VERCEL_URL).origin,
  basePath: parseUrl(getEnv().NEXTAUTH_URL).path,
  baseUrlServer: parseUrl(
    getEnv().NEXTAUTH_URL_INTERNAL ??
      getEnv().NEXTAUTH_URL ??
      getEnv().VERCEL_URL
  ).origin,
  basePathServer: parseUrl(
    getEnv().NEXTAUTH_URL_INTERNAL ?? getEnv().NEXTAUTH_URL
  ).path,
  _lastSync: 0,
  _session: undefined,
  _getSession: () => {},
}

Would allow both bundlers to access getEnv().NEXTAUTH_URL without breaking the current implementation.

Vite then needs some extra config to pass the Env correctly, since Vite only exposes variables that are prefixed with VITE_ to the client:

import { defineConfig, loadEnv } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), "");
  return {
    plugins: [react()],
    define: {
      "import.meta.env.NEXTAUTH_URL": JSON.stringify(env.NEXTAUTH_URL),
    },
  };
});

And it should just work. Thoughts? Worth doing?

[rbozan]

Doing something similar in my project now as workaround, but should be fixed in this lib I think.

[leo-petrucci]

So, much better solution, kind of, would require minimal changes to next-auth.
Instead of using import.meta Vite can just define process.env on build:

import { defineConfig, loadEnv } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), "");
  return {
    plugins: [react()],
    define: {
      "process.env.NEXTAUTH_URL": JSON.stringify(env.NEXTAUTH_URL),
    },
  };
});

This would quite literally get auth to work out of the box if it wasn't for this line in _utils.ts.

I understand the want to be lean with writing code, but even when using next-auth with Next.js I've found situations in which my auth doesn't run on the same domain, requiring rewrites to get it working.

Is there any reason why this can't be the following?

return ${__NEXTAUTH.baseUrl}${__NEXTAUTH.basePath}`

Using this with patch-package and haven't encountered any issues so far.

[toby-j]

Got it working quite nicely with this elegant solution.

export default defineConfig({
    plugins: [react()],
    define: {
        "process.env": process.env,
    }
})

Just make sure you have dotenv installed