feat(client): improved basepath detection

src/client/__tests__/parse-url.test.js

@@ -0,0 +1,59 @@
+import parseUrl from "../../lib/parse-url"
+
+// https://stackoverflow.com/questions/48033841/test-process-env-with-jest
+describe("parseUrl() tests", () => {
+  const OLD_ENV = process.env
+
+  beforeEach(() => {
+    jest.resetModules() // Most important - it clears the cache
+    process.env = { ...OLD_ENV } // Make a copy
+  })
+
+  afterAll(() => {
+    process.env = OLD_ENV // Restore old environment
+  })
+
+  test("when on client side and NEXT_PUBLIC_NEXTAUTH_URL is defined, correctly returns baseUrl and basePath", () => {
+    process.env.NEXT_PUBLIC_NEXTAUTH_URL = "http://localhost:3000/api/v1/auth"
+
+    const { baseUrl, basePath } = parseUrl()
+
+    expect(baseUrl).toBe("http://localhost:3000")
+    expect(basePath).toBe("/api/v1/auth")
+  })
+
+  test("when on client side and NEXT_PUBLIC_NEXTAUTH_URL is not defined, falls back to default values", () => {
+    const { baseUrl, basePath } = parseUrl()
+
+    expect(baseUrl).toBe("http://localhost:3000")
+    expect(basePath).toBe("/api/auth")
+  })
+
+  test("when on server side, correctly parses any given URL", () => {
+    let url = "http://localhost:3000"
+    let { baseUrl, basePath } = parseUrl(url)
+
+    expect(baseUrl).toBe("http://localhost:3000")
+    expect(basePath).toBe("/api/auth")
+
+    url = "http://localhost:3000/api/v1/authentication/"
+    // this semi-colon is needed, otherwise js thinks the string
+    // above is a function
+    ;({ baseUrl, basePath } = parseUrl(url))
+
+    expect(baseUrl).toBe("http://localhost:3000")
+    expect(basePath).toBe("/api/v1/authentication")
+
+    url = "https://www.mydomain.com"
+    ;({ baseUrl, basePath } = parseUrl(url))
+
+    expect(baseUrl).toBe("https://www.mydomain.com")
+    expect(basePath).toBe("/api/auth")
+
+    url = "https://www.mydomain.com/api/v3/auth"
+    ;({ baseUrl, basePath } = parseUrl(url))
+
+    expect(baseUrl).toBe("https://www.mydomain.com")
+    expect(basePath).toBe("/api/v3/auth")
+  })
+})

src/client/react.js

@@ -56,7 +56,7 @@ export function useSession(options = {}) {
 
   React.useEffect(() => {
     if (requiredAndNotLoading) {
-      const url = `/api/auth/signin?${new URLSearchParams({
+      const url = `${_apiBaseUrl()}/signin?${new URLSearchParams({
         error: "SessionRequired",
         callbackUrl: window.location.href,
       })}`
@@ -339,6 +339,17 @@ function _apiBaseUrl() {
       logger.warn("NEXTAUTH_URL", "NEXTAUTH_URL environment variable not set")
     }
 
+    if (
+      process.env.NODE_ENV === "development" &&
+      !/^http:\/\/localhost:\d+$/.test(process.env.NEXTAUTH_URL) &&
+      !process.env.NEXT_PUBLIC_NEXTAUTH_URL
+    ) {
+      logger.warn(
+        "NEXT_PUBLIC_NEXTAUTH_URL",
+        `NEXTAUTH_URL is set to "${process.env.NEXTAUTH_URL}" instead of the default "http://localhost:3000", and NEXT_PUBLIC_NEXTAUTH_URL is not set. Client side path detections will fail.`
+      )
+    }
+
     // Return absolute path when called server side
     return `${__NEXTAUTH.baseUrlServer}${__NEXTAUTH.basePathServer}`
   }

src/lib/parse-url.js

@@ -5,23 +5,36 @@
  * supporting a default value, so a simple split is sufficent.
  * @param {string} url
  */
-export default function parseUrl (url) {
+export default function parseUrl(url) {
   // Default values
-  const defaultHost = 'http://localhost:3000'
-  const defaultPath = '/api/auth'
-
-  if (!url) { url = `${defaultHost}${defaultPath}` }
+  const defaultHost = "http://localhost:3000"
+  const defaultPath = "/api/auth"
 
+  if (!url) {
+    if (process.env.NEXT_PUBLIC_NEXTAUTH_URL) {
+      /* 
+        if the user has defined NEXT_PUBLIC_NEXTAUTH_URL, which should be mandatory
+        if they are using a different path other than 'http://localhost:3000'
+        in NEXTAUTH_URL variable in their .env file, use that variable instead, 
+        otherwise, the clientside path detection will fail.
+      */
+      url = process.env.NEXT_PUBLIC_NEXTAUTH_URL
+    } else {
+      // fallback to default values, user should see a warning if NEXTAUTH_URL is different
+      // and NEXT_PUBLIC_NEXTAUTH_URL is not set
+      url = `${defaultHost}${defaultPath}`
+    }
+  }
   // Default to HTTPS if no protocol explictly specified
-  const protocol = url.startsWith('http:') ? 'http' : 'https'
+  const protocol = url.startsWith("http:") ? "http" : "https"
 
   // Normalize URLs by stripping protocol and no trailing slash
-  url = url.replace(/^https?:\/\//, '').replace(/\/$/, '')
+  url = url.replace(/^https?:\/\//, "").replace(/\/$/, "")
 
   // Simple split based on first /
-  const [_host, ..._path] = url.split('/')
+  const [_host, ..._path] = url.split("/")
   const baseUrl = _host ? `${protocol}://${_host}` : defaultHost
-  const basePath = _path.length > 0 ? `/${_path.join('/')}` : defaultPath
+  const basePath = _path.length > 0 ? `/${_path.join("/")}` : defaultPath
 
   return { baseUrl, basePath }
 }

src/server/index.js

@@ -20,6 +20,17 @@ if (!process.env.NEXTAUTH_URL) {
   logger.warn("NEXTAUTH_URL", "NEXTAUTH_URL environment variable not set")
 }
 
+if (
+  process.env.NODE_ENV === "development" &&
+  !/^http:\/\/localhost:\d+$/.test(process.env.NEXTAUTH_URL) &&
+  !process.env.NEXT_PUBLIC_NEXTAUTH_URL
+) {
+  logger.warn(
+    "NEXT_PUBLIC_NEXTAUTH_URL",
+    `NEXTAUTH_URL is set to "${process.env.NEXTAUTH_URL}" instead of the default "http://localhost:\${PORT}", and NEXT_PUBLIC_NEXTAUTH_URL is not set. Client side path detections will fail.`
+  )
+}
+
 /**
  * @param {import("next").NextApiRequest} req
  * @param {import("next").NextApiResponse} res

www/docs/getting-started/example.md

@@ -103,6 +103,21 @@ When deploying your site set the `NEXTAUTH_URL` environment variable to the cano
 NEXTAUTH_URL=https://example.com
 ```
 
+If you are using a URL for the API endpoints that is different than this (hence, a different folder structure as well), for example `NEXTAUTH_URL=https://example.com/api/v1/auth`, you also need to set a second environment variable with the key `NEXT_PUBLIC_NEXTAUTH_URL` and point it to the same URL. Otherwise, client side path detections will fail.
+
+```
+NEXTAUTH_URL=https://example.com/api/v1/auth
+NEXT_PUBLIC_NEXTAUTH_URL=https://example.com/api/v1/auth
+```
+
+This assumes that `[...nextauth].js` is inside `/pages/api/v1/auth/`.
+
+You can use a [Next.js feature](https://nextjs.org/docs/basic-features/environment-variables) to refer to environment variables by their names within the file.
+```
+NEXTAUTH_URL=https://example.com/api/v1/auth
+NEXT_PUBLIC_NEXTAUTH_URL=$NEXTAUTH_URL
+```
+
 :::tip
 In production, this needs to be set as an environment variable on the service you use to deploy your app.
 

www/docs/getting-started/rest-api.md

@@ -59,4 +59,17 @@ e.g.
  `NEXTAUTH_URL=https://example.com/myapp/api/authentication`
 
 `/api/auth/signin` -> `/myapp/api/authentication/signin`
+
+However, you need to do two things:
+1. You must declare a `NEXT_PUBLIC_NEXTAUTH_URL` environment variable that points to the same URL as above.
+2. Your folder structure must match what's set on `NEXT_PUBLIC_NEXTAUTH_URL`, for instance, if it's set to `https://mywebsite.com/api/authentication`, your folder structure should be:
+
+```
+.
+└── pages
+    └── api
+        └── authentication
+            └── [...nextauth].js
+
+```
 :::

www/docs/warnings.md

@@ -5,7 +5,7 @@ title: Warnings
 
 This is a list of warning output from NextAuth.js.
 
-All warnings indicate things which you should take a look at, but do not inhibit normal operation.
+All warnings indicate things which you should take a look at, but in most cases do not inhibit normal operation.
 
 ---
 
@@ -15,6 +15,10 @@ All warnings indicate things which you should take a look at, but do not inhibit
 
 Environment variable `NEXTAUTH_URL` missing. Please set it in your `.env` file.
 
+#### NEXT_PUBLIC_NEXTAUTH_URL
+
+You are using a folder structure and `NEXTAUTH_URL` other than the default one, but you haven't set `NEXT_PUBLIC_NEXTAUTH_URL` or `NEXT_PUBLIC_NEXTAUTH_URL` points to a different endpoint. This will make client side path detections fail if not addressed.
+
 ---
 
 ## Server