Merge branch 'main' into ndom91/fix-minor-jsdoc-copy-upadte

README.md

@@ -25,10 +25,10 @@
     Auth.js is a set of open-source packages that are built on standard Web APIs for authentication in modern applications with any framework on any platform in any JS runtime.
   </p>
   <p align="center">
-    See <a href="https://authjs.dev">authjs.dev</a> for our framework-specific libraries, or check out <a href="https://next-auth.js.org">next-auth.js.org</a> for next-auth (Next.js).
+    See <a href="https://authjs.dev">authjs.dev</a> for our documentation and more information.
   </p>
   <p align="center">
-    Don't want to manage auth yourself? <a href="https://clerk.com?utm_source=sponsorship&utm_medium=github&utm_campaign=authjs&utm_content=cta" target="_blank">Check out Clerk →</a>
+     <kbd>Sponsored</kbd> Don't want to manage auth yourself? <a href="https://clerk.com?utm_source=sponsorship&utm_medium=github&utm_campaign=authjs&utm_content=cta" target="_blank">Check out Clerk →</a>
   </p>
 </p>
 
@@ -96,13 +96,6 @@ We have an [OpenCollective](https://opencollective.com/nextauth) for companies a
         <div>Clerk</div>
         <sub>💵</sub>
       </td>
-      <td align="center" valign="top">
-        <a href="https://workos.com" target="_blank">
-          <img width="108" src="https://avatars.githubusercontent.com/u/47638084?s=200&v=4" alt="WorkOS Logo" />
-        </a><br />
-        <div>WorkOS</div>
-        <sub>💵</sub>
-      </td>
       <td align="center" valign="top">
         <a href="https://fusionauth.io" target="_blank">
           <img width="108" src="https://avatars.githubusercontent.com/u/41974756?s=200&v=4" alt="FusionAuth Logo" />
@@ -183,6 +176,9 @@ We have an [OpenCollective](https://opencollective.com/nextauth) for companies a
 We're open to all community contributions! If you'd like to contribute in any way, please first read
 our [Contributing Guide](https://github.com/nextauthjs/.github/blob/main/CONTRIBUTING.md).
 
+> [!NOTE]
+> The Auth.js/NextAuth.js project is not provided by, nor otherwise affiliated with Vercel Inc. or its subsidiaries. Any contributions to this project by individuals affiliated with Vercel are made in their personal capacity.
+
 ## License
 
 ISC

docs/docs/contributors.md

@@ -43,3 +43,7 @@ More information can be found at: https://opencollective.com/nextauth
 - In 2021, efforts have started to move NextAuth.js to other frameworks and to support as many databases and providers as possible.
 
 - In 2022, <a href="https://github.com/balazsorban44">Balázs Orbán</a> created Auth.js based on NextAuth.js, a runtime/framework independent core library that is the base of all Auth.js libraries going forward. 
+
+## Notes
+
+The Auth.js/NextAuth.js project is not provided by, nor otherwise affiliated with Vercel Inc. or its subsidiaries. Any contributions to this project by individuals affiliated with Vercel are made in their personal capacity.

docs/docs/getting-started/adapters.mdx

@@ -17,11 +17,11 @@ Below you can see a list of official adapters that are distributed as their own
 If you don't find an adapter for the database or service you use, you can always create one yourself (and optionally open a PR so anyone can make use of it). Have a look at our guide on [how to create a database adapter](/guides/adapters/creating-a-database-adapter).
 :::
 
-<div class="card-list">
+<div className="card-list">
   {manifest.adapters.map(({ id, name, img }) => (
-    <a href={`/reference/adapter/${id}`} class="card">
+    <a href={`/reference/adapter/${id}`} key={id} className="card">
       <img src={`/img/adapters/${img || `${id}.svg`}`} width="40" />
-      <h4 class="card__title">{name} Adapter</h4>
+      <h4 className="card__title">{name} Adapter</h4>
     </a>
   ))}
 </div>

docs/docs/getting-started/introduction.mdx

@@ -9,14 +9,14 @@ import manifest from "../../manifest.mjs"
 
 Auth.js is a complete open-source authentication solution for web applications. Check out the live demos of Auth.js in action:
 
-<div class="card-list">
+<div className="card-list">
   {manifest.frameworks
     // TODO: Add Auth.js Core example
     .filter((f) => f.id !== "core")
     .map(({ id, name, url, logo }) => (
-      <a href={`https://${url}.vercel.app`} class="card">
+      <a href={`https://${url}.vercel.app`} key={id} className="card">
         <img src={`/img/frameworks/${id}.svg`} width="40" />
-        <h4 class="card__title">{name}</h4>
+        <h4 className="card__title">{name}</h4>
       </a>
     ))}
 </div>

docs/docs/getting-started/providers/oauth-tutorial.mdx

@@ -113,7 +113,7 @@ export default function App({
 Instances of `useSession` (more on it in the next section) will have access to the session data and status. The `<SessionProvider />` also keep the session updated and synced between browser tabs and windows. 💪🏽
 
 :::tip
-Check our [client docs](reference/nextjs/react/) to learn all the available options for handling sessions on the browser.
+Check our [client docs](/reference/nextjs/react) to learn all the available options for handling sessions on the browser.
 :::
 
 ### Consuming the session via hooks

docs/docs/sponsors.mdx

@@ -20,16 +20,7 @@ It would not be possible without the generous support of our sponsors.
 
 ## Gold Sponsors 🥇
 
-<div style={{display: "flex", gap: "2em"}}>
-{[
-  ["https://workos.com", "https://avatars.githubusercontent.com/u/47638084?s=200&v=4", "WorkOS"]
-].map(([href, src, name]) => (
-  <a key={name} href={href} target="_blank" style={{maxWidth: 164, textAlign: "center"}}>
-    <img width={132} src={src} alt={`${name} Logo`} />
-    {name}
-  </a>
-))}
-</div>
+[Become](#become-a-sponsor) a Gold Sponsor!
 
 ## Silver Sponsors 🥈
 

docs/docusaurus.config.ts

@@ -222,7 +222,7 @@ export default {
   ],
   scripts: [
     {
-      src: "js/clerk.js",
+      src: "/js/clerk.js",
       async: true,
     },
   ],

docs/package.json

@@ -26,16 +26,16 @@
     "styled-components": "5.3.6"
   },
   "devDependencies": {
-    "@docusaurus/core": "3.0.0",
-    "@docusaurus/eslint-plugin": "3.0.0",
-    "@docusaurus/module-type-aliases": "3.0.0",
-    "@docusaurus/preset-classic": "3.0.0",
-    "@docusaurus/remark-plugin-npm2yarn": "3.0.0",
-    "@docusaurus/theme-classic": "3.0.0",
-    "@docusaurus/theme-common": "3.0.0",
-    "@docusaurus/theme-mermaid": "3.0.0",
-    "@docusaurus/tsconfig": "3.0.0",
-    "@docusaurus/types": "3.0.0",
+    "@docusaurus/core": "3.1.1",
+    "@docusaurus/eslint-plugin": "3.1.1",
+    "@docusaurus/module-type-aliases": "3.1.1",
+    "@docusaurus/preset-classic": "3.1.1",
+    "@docusaurus/remark-plugin-npm2yarn": "3.1.1",
+    "@docusaurus/theme-classic": "3.1.1",
+    "@docusaurus/theme-common": "3.1.1",
+    "@docusaurus/theme-mermaid": "3.1.1",
+    "@docusaurus/tsconfig": "3.1.1",
+    "@docusaurus/types": "3.1.1",
     "docusaurus-plugin-typedoc": "1.0.0-next.22",
     "typedoc": "0.25.3",
     "typedoc-plugin-markdown": "4.0.0-next.29",

docs/sidebars.ts

@@ -6,9 +6,10 @@ import manifest from "./manifest.mjs"
 import { existsSync } from "fs"
 
 const clerk: PropSidebarItemLink = {
-  type: "link",
-  href: "https://clerk.com?utm_source=sponsorship&utm_medium=docs&utm_campaign=authjs&utm_content=nav",
-  label: "Hosted Auth (Clerk)",
+  type: "html",
+  value:
+    '<span style="display: flex; flex-direction: column;align-items:baseline;"><a href="https://clerk.com?utm_source=sponsorship&utm_medium=docs&utm_campaign=authjs&utm_content=nav" target="_blank">Hosted Auth (Clerk)</a><div class="sponsoredBadge">Sponsored</div></span>',
+  defaultStyle: true,
 }
 
 export default {

docs/src/css/index.css

@@ -259,6 +259,7 @@ html[data-theme="dark"] hr {
   line-height: 1.5;
   text-align: left;
 }
+
 #carbonads .carbon-poweredby {
   display: block;
   padding: 6px 8px;
@@ -279,6 +280,11 @@ html[data-theme="dark"] #carbonads .carbon-text {
   color: #ddd;
 }
 
+html[data-theme="dark"] #carbonads .carbon-poweredby {
+  color: #aaa;
+  background: #1e2021;
+}
+
 html[data-theme="dark"] #carbonads > span {
   background: #1a1a1a;
   box-shadow:
@@ -288,18 +294,18 @@ html[data-theme="dark"] #carbonads > span {
     0 0 8px hsl(0deg 0% 0% / 9%);
 }
 
-html[data-theme="dark"] #carbonads .carbon-poweredby {
-  color: #aaa;
-  background: #1e2021;
+div.sponsoredBadge {
+  display: block;
+  font-size: 0.6rem !important;
+  line-height: 1rem;
+  border-radius: 2rem;
+  padding-inline: 0.5rem;
+  padding-block: 0.25rem;
+  background-color: rgb(229 231 235 / 0.5) !important;
+  color: #a1a1a1;
 }
 
-.theme-doc-markdown.markdown {
-  > p:first-of-type {
-    :last-child {
-      img {
-        width: 48px;
-        height: 48px;
-      }
-    }
-  }
+html[data-theme="dark"] .sponsoredBadge {
+  background-color: #242526 !important;
+  color: #696969;
 }

docs/src/pages/index.js

@@ -168,13 +168,16 @@ export default function Home() {
               </div>
             </div>
             <div className={styles.heroClerk}>
-              Looking for a hosted alternative?
-              <a
-                href="https://clerk.com?utm_source=sponsorship&utm_medium=website&utm_campaign=authjs&utm_content=cta"
-                target="_blank"
-              >
-                Try Clerk →
-              </a>
+              <div>
+                Looking for a hosted alternative?
+                <a
+                  href="https://clerk.com?utm_source=sponsorship&utm_medium=website&utm_campaign=authjs&utm_content=cta"
+                  target="_blank"
+                >
+                  Try Clerk →
+                </a>
+              </div>
+              <div className={styles.sponsoredBadge}>Sponsored</div>
             </div>
             <div className="hero-marquee">
               <ProviderMarquee />

docs/src/pages/index.module.css

@@ -122,10 +122,37 @@
 
 .heroClerk {
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 0.5rem;
   font-size: 1.2rem;
   position: relative;
-  z-index: 1000;
+  z-index: 2;
+}
+
+.heroClerk div {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+@media screen and (max-width: 689px) {
+  .heroClerk div {
+    flex-direction: column;
+  }
+}
+
+.sponsoredBadge {
+  font-size: 0.6rem;
+  line-height: 1rem;
+  border-radius: 2rem;
+  padding-inline: 0.5rem;
+  padding-block: 0.25rem;
+  background-color: rgb(229 231 235 / 0.5) !important;
+  color: #696969;
+}
+
+[data-theme="dark"] .sponsoredBadge {
+  background-color: #242526 !important;
 }

packages/core/src/lib/utils/env.ts

@@ -1,4 +1,5 @@
 import type { AuthAction, AuthConfig } from "../../types.js"
+import { logger } from "./logger.js"
 
 /** Set default env variables on the config object */
 export function setEnvDefaults(envObject: any, config: AuthConfig) {
@@ -51,13 +52,34 @@ export function createActionURL(
   envObject: any,
   basePath?: string
 ): URL {
-  let url = envObject.AUTH_URL ?? envObject.NEXTAUTH_URL
-  if (!url) {
-    const host = headers.get("x-forwarded-host") ?? headers.get("host")
-    if (!host) throw new TypeError("Missing host")
-    const proto = headers.get("x-forwarded-proto") ?? protocol
-    url = `${proto === "http" ? "http" : "https"}://${host}${basePath}`
+  let envUrl = envObject.AUTH_URL ?? envObject.NEXTAUTH_URL
+
+  let url: URL
+  if (envUrl) {
+    url = new URL(envUrl)
+    if (basePath && basePath !== "/" && url.pathname !== "/") {
+      logger.warn(
+        url.pathname === basePath
+          ? "env-url-basepath-redundant"
+          : "env-url-basepath-mismatch"
+      )
+      url.pathname = "/"
+    }
+  } else {
+    const detectedHost = headers.get("x-forwarded-host") ?? headers.get("host")
+    const detectedProtocol =
+      headers.get("x-forwarded-proto") ?? protocol ?? "https"
+
+    url = new URL(`${detectedProtocol}://${detectedHost}`)
   }
 
-  return new URL(`${url.replace(/\/$/, "")}/${action}`)
+  // remove trailing slash
+  const sanitizedUrl = url.toString().replace(/\/$/, "")
+
+  if (basePath) {
+    // remove leading and trailing slash
+    const sanitizedBasePath = basePath?.replace(/(^\/|\/$)/g, "") ?? ""
+    return new URL(`${sanitizedUrl}/${sanitizedBasePath}/${action}`)
+  }
+  return new URL(`${sanitizedUrl}/${action}`)
 }

packages/core/src/lib/utils/logger.ts

@@ -1,6 +1,12 @@
 import { AuthError } from "../../errors.js"
 
-export type WarningCode = "debug-enabled" | "csrf-disabled" | "experimental-webauthn"
+export type WarningCode =
+  | "debug-enabled"
+  | "csrf-disabled"
+  | "experimental-webauthn"
+  | "env-url-basepath-redundant"
+  | "env-url-basepath-mismatch"
+
 
 /**
  * Override any of the methods, and the rest will use the default logger.

packages/core/src/lib/utils/webauthn-utils.ts

@@ -218,7 +218,7 @@ export async function verifyAuthenticate(
     !("id" in data) ||
     typeof data.id !== "string"
   ) {
-    throw new AuthError("Invalid WebAuthn Authentication response.")
+    throw new AuthError("Invalid WebAuthn Authentication response")
   }
 
   // Reset the ID so we smooth out implementation differences
@@ -335,15 +335,15 @@ export async function verifyRegister(
     !("id" in data) ||
     typeof data.id !== "string"
   ) {
-    throw new AuthError("Invalid WebAuthn Registration response.")
+    throw new AuthError("Invalid WebAuthn Registration response")
   }
 
   // Get challenge from request cookies
   const { challenge: expectedChallenge, registerData: user } =
     await webauthnChallenge.use(options, request.cookies, resCookies)
   if (!user) {
     throw new AuthError(
-      "Missing user registration data in WebAuthn challenge cookie."
+      "Missing user registration data in WebAuthn challenge cookie"
     )
   }
 
@@ -365,7 +365,7 @@ export async function verifyRegister(
   // Make sure the response was verified
   if (!verification.verified || !verification.registrationInfo) {
     throw new WebAuthnVerificationError(
-      "WebAuthn registration response could not be verified."
+      "WebAuthn registration response could not be verified"
     )
   }