From 1de1f622cbbd26ac67b866d125c2e2a9ffedf1b4 Mon Sep 17 00:00:00 2001 From: Aman Meherally Date: Mon, 25 Aug 2025 20:59:27 -0400 Subject: [PATCH 01/23] hero section and social proof --- docs/pages/index.mdx | 326 ++++++++++++++++++++++++++----------------- 1 file changed, 200 insertions(+), 126 deletions(-) diff --git a/docs/pages/index.mdx b/docs/pages/index.mdx index d06f6f31f3..1d8af62681 100644 --- a/docs/pages/index.mdx +++ b/docs/pages/index.mdx @@ -13,120 +13,85 @@ import Qwik from "../public/img/etc/qwik.svg" import { CaretRight } from "@/icons"
-
-
-
- Auth.js -
-
Authentication for the Web.
-
Free and open source.
-
+
+ {/* Left Column: Headline and CTAs */} +
+
+

+ Authentication for the Modern Web. +

+
+ Simple, open-source authentication for Next.js, SvelteKit, and beyond. Own your data and get started in minutes.
-
- - Get Started - +
+
+ + Get Started + + + + + + Source + +
+
+ +{/* Right Column: Interactive Code Block */} + + + +
+ {[ + { value: "express", src: Express, name: "Express", darkInvert: true }, + { value: "nextjs", src: Next, name: "Next.js", darkInvert: true }, + { value: "qwik", src: Qwik, name: "Qwik", darkInvert: false }, + { value: "sveltekit", src: SvelteKit, name: "SvelteKit", darkInvert: false }, + ].map((trigger) => ( + + {`${trigger.name} + + ))} - - - - - - - Source + More +
- - - -
- {[ - { value: "express", src: Express, name: "Express", darkInvert: true }, - { value: "nextjs", src: Next, name: "Next.js", darkInvert: true }, - { value: "qwik", src: Qwik, name: "Qwik", darkInvert: false }, - { value: "sveltekit", src: SvelteKit, name: "SvelteKit", darkInvert: false }, - ].map((trigger) => ( - - {`${trigger.name} - - ))} - - More - - -
-
-
-
-
-
- -
- {Object.entries({ - nextjs: `\ + +
+ {Object.entries({ + nextjs: `\ // auth.ts import NextAuth from "next-auth" import GitHub from "next-auth/providers/github" @@ -139,7 +104,7 @@ export { auth as middleware } from "@/auth" import { handlers } from "@/auth" export const { GET, POST } = handlers `, - sveltekit: `\ + sveltekit: `\ // src/auth.ts import { SvelteKitAuth } from "@auth/sveltekit" import GitHub from '@auth/sveltekit/providers/github' @@ -151,7 +116,7 @@ export const { handle } = SvelteKitAuth({ // src/hooks.server.ts export { handle } from "./auth" `, - express: `\ + express: `\ // server.ts import { express } from "express" import { ExpressAuth } from "@auth/express" @@ -161,7 +126,7 @@ const app = express() app.use("/auth/\*", ExpressAuth({ providers: [GitHub] })) `, - qwik: `\ + qwik: `\ // src/routes/plugin@auth.ts import { QwikAuth } from "@auth/qwik" import GitHub from "@auth/qwik/providers/github" @@ -169,25 +134,134 @@ export const { onRequest, useSession } = QwikAuth$(() => ({ providers: [GitHub] ` }).map(([key, code]) => - - 
-      
-        {code}
-      
-
- + + 
+    
+      {code}
+    
+
+ )}
+
+ +
+
+
+

+ Trusted by the best in the business +

+
+ {/* ChatGPT Card */} +
+
+ + +
+
+

ChatGPT

+
+ The category-defining generative AI platform from OpenAI, enabling developers to build intelligent applications. +
+
+
+ + {/* Cal.com Card */} +
+
+ + + + + + + + + +
+
+

Cal.com

+
+ Open-source scheduling infrastructure for everyone, from individuals to enterprise scale. +
+
+
+ + {/* Vercel Card */} +
+
+ Vercel +
+
+

Vercel

+
+ The platform for frontend developers, providing the speed and reliability innovators need to create at the moment of inspiration. +
+
+
+ + {/* Dub.co Card */} +
+
+ +
+
+

Dub.co

+
+ An open-source link management tool for modern marketing teams to create, share, and track short links. +
+
+
+ + {/* T3 Stack Card */} +
+
+ + + + + + +
+
+

The T3 Stack

+
+ An opinionated, modular stack focused on simplicity, and type safety, recommending Auth.js as its primary auth solution. +
+
+
+ + {/* Artlist Card */} +
+
+ +
+
+

Artlist

+
+ A creative powerhouse providing creators with royalty-free music, SFX, stock footage, and video editing software. +
+
+
+ +
+
+ +
+
-
-
Date: Mon, 25 Aug 2025 21:48:02 -0400 Subject: [PATCH 02/23] styled rest of the page --- docs/pages/animated-stars.css | 8 +- docs/pages/index.mdx | 338 ++++++++++++++++++++++++++++++++-- 2 files changed, 330 insertions(+), 16 deletions(-) diff --git a/docs/pages/animated-stars.css b/docs/pages/animated-stars.css index 24eda72ace..5e2d89b65c 100644 --- a/docs/pages/animated-stars.css +++ b/docs/pages/animated-stars.css @@ -9,6 +9,7 @@ #stars { width: 1px; height: 1px; + border-radius: 50%; background: transparent; box-shadow: 117px 1613px #ce93d8, @@ -1427,6 +1428,7 @@ #stars2 { width: 2px; height: 2px; + border-radius: 50%; background: transparent; box-shadow: 1117px 1306px #ce93d8, @@ -1845,6 +1847,7 @@ #stars3 { width: 3px; height: 3px; + border-radius: 50%; background: transparent; box-shadow: 940px 1360px #ce93d8, @@ -2061,8 +2064,9 @@ } #stars4 { - width: 1px; - height: 1px; + width: 4px; + height: 4px; + border-radius: 50%; background: transparent; box-shadow: 233px 1976px #ce93d8, diff --git a/docs/pages/index.mdx b/docs/pages/index.mdx index 1d8af62681..c99bc5756e 100644 --- a/docs/pages/index.mdx +++ b/docs/pages/index.mdx @@ -262,26 +262,336 @@ export const { onRequest, useSession } = QwikAuth$(() => ({ providers: [GitHub]
-
-
-
- Supports all these providers and more! +
+ {/* Background Glow Effect */} +
+ +
+
+
+

+ Everything you need, nothing you don’t +

+
+ Auth.js is a complete, open-source authentication solution, designed to be flexible and secure, giving you full control over your user data. +
+
+ + {/* Pillar Container */} +
+ + {/* Pillar 1 & 2 Container */} +
+ {/* Pillar 1: Use Any Framework */} +
+
+ + + +
+

Use Any Framework

+
+ Built for the edge with first-class support for Next.js, SvelteKit, SolidStart, and more. +
+
+ + {/* Pillar 2: Own Your Data */} +
+
+ + + +
+

Own Your Data

+
+ Connect to your own database with our adapter system. Never get locked into a vendor's user table again. +
+
+
+ + {/* Pillar 3: Fully Extensible with Code Example */} +
+
+ + + +
+

Fully Extensible

+
+ Choose from 50+ pre-configured providers or add your own. Customize everything from UI to session handling with callbacks. +
+
+ 

+
+{`...
+export const { handlers, auth } = NextAuth({
+  providers: [ GitHub, Apple, Auth0 ],
+  callbacks: {
+    jwt({ token, user }) {
+      if (user) token.id = user.id
+      return token
+    }
+  }
+})`}
+
+
+
+
+ +
+
+ +
+
+ +{" "} + +
+
+

+ Sign in with anything. +

+
+ With over 50 popular providers, you can let your users sign in with the + services they already use and trust. +
+
+ {/* This is where you would place your LogosMarquee component */} + {/* For now, here is a placeholder for the visual effect */} +
+
+ {/* Repeat this block for a seamless loop */} +
+ + Google + + + GitHub + + + Apple + + + Twitter + + + Auth0 + + + Okta + + + Discord + + + Twitch + +
+
+ + Google + + + GitHub + + + Apple + + + Twitter + + + Auth0 + + + Okta + + + Discord + + + Twitch +
- -
-
- +
+ {/* Add this to your CSS for the animation */} + +
+ +
+ {/* Background Glow Effect */} +
+ +
+
+
+

+ Built by developers, for developers +

+
+ Auth.js is a community-driven project, backed by a transparent, open-source philosophy. Your data is yours, and the code is open to everyone. +
+
+ + {/* Stats Grid */} +
+ {/* GitHub Stars Card */} +
+

30k+

+
GitHub Stars
+
+ A testament to the community's trust and love for the project. +
+
+ + {/* NPM Downloads Card */} +
+

5M+

+
NPM Downloads
+
+ Powering millions of applications every month, from side projects to enterprise. +
+
+ + {/* Contributors Card */} +
+

700+

+
Contributors
+
+ A massive thank you to everyone who has contributed to the project. +
+
+
+ + {/* CTA Buttons */} + +
+ +
+
+ +{" "} + +
+
+
+

+ Ready to secure your app? +

+
+ Get started in minutes with our quickstart guide or dive into the + documentation to see everything Auth.js has to offer. +
+
+ + Get started + + + See all integrations + +
+ +
+
+
+ +
+
From 7f327a98d764173a8c1476c80e4c6ce2ba0933ff Mon Sep 17 00:00:00 2001 From: Aman Meherally Date: Mon, 25 Aug 2025 22:11:49 -0400 Subject: [PATCH 03/23] dark mode compatibility --- docs/pages/index.mdx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/pages/index.mdx b/docs/pages/index.mdx index c99bc5756e..49db63500b 100644 --- a/docs/pages/index.mdx +++ b/docs/pages/index.mdx @@ -284,7 +284,7 @@ export const { onRequest, useSession } = QwikAuth$(() => ({ providers: [GitHub]
{/* Pillar 1: Use Any Framework */}
-
+
@@ -297,7 +297,7 @@ export const { onRequest, useSession } = QwikAuth$(() => ({ providers: [GitHub] {/* Pillar 2: Own Your Data */}
-
+
@@ -311,7 +311,7 @@ export const { onRequest, useSession } = QwikAuth$(() => ({ providers: [GitHub] {/* Pillar 3: Fully Extensible with Code Example */}
-
+
@@ -346,7 +346,7 @@ export const { handlers, auth } = NextAuth({ {" "} -
+

Sign in with anything. @@ -546,7 +546,7 @@ export const { handlers, auth } = NextAuth({

-
+
{/* Column 1: About */}
@@ -592,6 +592,6 @@ export const { handlers, auth } = NextAuth({
From 11f19ac6546af7fcc203bcb0015fffb9a4ac5c69 Mon Sep 17 00:00:00 2001 From: Aman Meherally Date: Mon, 25 Aug 2025 22:59:38 -0400 Subject: [PATCH 04/23] fixed testimonials --- docs/components/Icons/Artlist.tsx | 16 +++ docs/components/Icons/CalIcon.tsx | 40 +++++++ docs/components/Icons/ChatGPTIcon.tsx | 16 +++ docs/components/Icons/DubIcon.tsx | 21 ++++ docs/components/Icons/T3Icon.tsx | 35 ++++++ docs/components/Icons/VercelIcon.tsx | 18 +++ docs/components/TestimonialCard/index.tsx | 18 +++ docs/pages/index.mdx | 131 ++++++---------------- 8 files changed, 197 insertions(+), 98 deletions(-) create mode 100644 docs/components/Icons/Artlist.tsx create mode 100644 docs/components/Icons/CalIcon.tsx create mode 100644 docs/components/Icons/ChatGPTIcon.tsx create mode 100644 docs/components/Icons/DubIcon.tsx create mode 100644 docs/components/Icons/T3Icon.tsx create mode 100644 docs/components/Icons/VercelIcon.tsx create mode 100644 docs/components/TestimonialCard/index.tsx diff --git a/docs/components/Icons/Artlist.tsx b/docs/components/Icons/Artlist.tsx new file mode 100644 index 0000000000..733b25c91c --- /dev/null +++ b/docs/components/Icons/Artlist.tsx @@ -0,0 +1,16 @@ +type Props = { + className?: string +} + +export function ArtlistIcon({ className }: Props) { + return ( + + + + ) +} diff --git a/docs/components/Icons/CalIcon.tsx b/docs/components/Icons/CalIcon.tsx new file mode 100644 index 0000000000..30136fcc3d --- /dev/null +++ b/docs/components/Icons/CalIcon.tsx @@ -0,0 +1,40 @@ +type Props = { + className?: string +} + +export function CalIcon({ className }: Props) { + return ( + + + + + + + + + + ) +} diff --git a/docs/components/Icons/ChatGPTIcon.tsx b/docs/components/Icons/ChatGPTIcon.tsx new file mode 100644 index 0000000000..f9330f5d74 --- /dev/null +++ b/docs/components/Icons/ChatGPTIcon.tsx @@ -0,0 +1,16 @@ +type Props = { + className?: string +} + +export function ChatGPTIcon({ className }: Props) { + return ( + + + + ) +} diff --git a/docs/components/Icons/DubIcon.tsx b/docs/components/Icons/DubIcon.tsx new file mode 100644 index 0000000000..57d743c8eb --- /dev/null +++ b/docs/components/Icons/DubIcon.tsx @@ -0,0 +1,21 @@ +type Props = { + className?: string +} + +export function DubIcon({ className }: Props) { + return ( + + + + ) +} diff --git a/docs/components/Icons/T3Icon.tsx b/docs/components/Icons/T3Icon.tsx new file mode 100644 index 0000000000..e9b7e8f51e --- /dev/null +++ b/docs/components/Icons/T3Icon.tsx @@ -0,0 +1,35 @@ +type Props = { + className?: string +} + +export function T3Icon({ className }: Props) { + return ( + + + + + + + ) +} diff --git a/docs/components/Icons/VercelIcon.tsx b/docs/components/Icons/VercelIcon.tsx new file mode 100644 index 0000000000..a250d113ea --- /dev/null +++ b/docs/components/Icons/VercelIcon.tsx @@ -0,0 +1,18 @@ +type Props = { + className?: string +} + +export function VercelIcon({ className }: Props) { + return ( + + Vercel + + + ) +} diff --git a/docs/components/TestimonialCard/index.tsx b/docs/components/TestimonialCard/index.tsx new file mode 100644 index 0000000000..4b37d97c00 --- /dev/null +++ b/docs/components/TestimonialCard/index.tsx @@ -0,0 +1,18 @@ +const TestimonialCard = ({ icon: Icon, title, children, iconClassName }) => { + return ( +
+
+ {/* The Icon component is rendered here with a standardized size */} + +
+
+

+ {title} +

+
{children}
+
+
+ ) +} + +export default TestimonialCard diff --git a/docs/pages/index.mdx b/docs/pages/index.mdx index 49db63500b..71519d0316 100644 --- a/docs/pages/index.mdx +++ b/docs/pages/index.mdx @@ -9,9 +9,18 @@ import SvelteKit from "../public/img/etc/sveltekit.svg" import Express from "../public/img/etc/express.svg" import Next from "../public/img/etc/nextjs.svg" import Qwik from "../public/img/etc/qwik.svg" - import { CaretRight } from "@/icons" +{/* Testimonials section */} +import { VercelIcon } from "@/components/Icons/VercelIcon" +import { ChatGPTIcon } from "@/components/Icons/ChatGPTIcon" +import { CalIcon } from "@/components/Icons/CalIcon" +import { T3Icon } from "@/components/Icons/T3Icon" +import { ArtlistIcon } from "@/components/Icons/Artlist" +import { DubIcon } from "@/components/Icons/DubIcon" + +import TestimonialCard from "@/components/TestimonialCard" +
{/* Left Column: Headline and CTAs */} @@ -159,103 +168,29 @@ export const { onRequest, useSession } = QwikAuth$(() => ({ providers: [GitHub] Trusted by the best in the business
- {/* ChatGPT Card */} -
-
- - -
-
-

ChatGPT

-
- The category-defining generative AI platform from OpenAI, enabling developers to build intelligent applications. -
-
-
- - {/* Cal.com Card */} -
-
- - - - - - - - - -
-
-

Cal.com

-
- Open-source scheduling infrastructure for everyone, from individuals to enterprise scale. -
-
-
- - {/* Vercel Card */} -
-
- Vercel -
-
-

Vercel

-
- The platform for frontend developers, providing the speed and reliability innovators need to create at the moment of inspiration. -
-
-
- - {/* Dub.co Card */} -
-
- -
-
-

Dub.co

-
- An open-source link management tool for modern marketing teams to create, share, and track short links. -
-
-
- - {/* T3 Stack Card */} -
-
- - - - - - -
-
-

The T3 Stack

-
- An opinionated, modular stack focused on simplicity, and type safety, recommending Auth.js as its primary auth solution. -
-
-
- - {/* Artlist Card */} -
-
- -
-
-

Artlist

-
- A creative powerhouse providing creators with royalty-free music, SFX, stock footage, and video editing software. -
-
-
- + + The category-defining generative AI platform from OpenAI, enabling developers to build intelligent applications. + + + + Open-source scheduling infrastructure for everyone, from individuals to enterprise scale. + + + + The platform for frontend developers, providing the speed and reliability innovators need to create at the moment of inspiration. + + + + An open-source link management tool for modern marketing teams to create, share, and track short links. + + + + An opinionated, modular stack focused on simplicity, and type safety, recommending Auth.js as its primary auth solution. + + + + A creative powerhouse providing creators with royalty-free music, SFX, stock footage, and video editing software. +
From 7557057999fe7f6861f68356d296b2a61c566745 Mon Sep 17 00:00:00 2001 From: Aman Meherally Date: Mon, 25 Aug 2025 22:59:52 -0400 Subject: [PATCH 05/23] fixed features --- docs/pages/index.mdx | 28 +++++++++++++--------------- 1 file changed, 13 insertions(+), 15 deletions(-) diff --git a/docs/pages/index.mdx b/docs/pages/index.mdx index 71519d0316..38674ee8e4 100644 --- a/docs/pages/index.mdx +++ b/docs/pages/index.mdx @@ -255,22 +255,20 @@ export const { onRequest, useSession } = QwikAuth$(() => ({ providers: [GitHub]
Choose from 50+ pre-configured providers or add your own. Customize everything from UI to session handling with callbacks.
-
- 

-
-{`...
-export const { handlers, auth } = NextAuth({
-  providers: [ GitHub, Apple, Auth0 ],
-  callbacks: {
-    jwt({ token, user }) {
-      if (user) token.id = user.id
-      return token
-    }
-  }
-})`}
-
-
+
+ + +```ts +import NextAuth from "next-auth" + +export const { handlers, signIn, signOut, auth } = NextAuth({ + providers: [], +}) +``` + +
+
From 81fd098525507551e24e25ae54f5f43561678053 Mon Sep 17 00:00:00 2001 From: Aman Meherally Date: Mon, 25 Aug 2025 23:28:06 -0400 Subject: [PATCH 06/23] fixed logos --- docs/components/ProvidersMarquee/index.tsx | 222 +++++++++++++++++++++ docs/pages/index.mdx | 80 +------- 2 files changed, 228 insertions(+), 74 deletions(-) create mode 100644 docs/components/ProvidersMarquee/index.tsx diff --git a/docs/components/ProvidersMarquee/index.tsx b/docs/components/ProvidersMarquee/index.tsx new file mode 100644 index 0000000000..fab6d5e119 --- /dev/null +++ b/docs/components/ProvidersMarquee/index.tsx @@ -0,0 +1,222 @@ +import React from "react" + +// --- Reusable Provider Icon Component --- +const ProviderIcon = ({ name }) => ( +
+ {name} { + ;(e.currentTarget as HTMLImageElement).style.display = "none" + }} + /> +
+) + +// --- Main ProviderMarquee Component --- +const ProviderMarquee = () => { + // The complete list of provider icons from the directory + const providers = [ + "42-school", + "apple", + "asgardeo", + "atlassian", + "auth0", + "authentik", + "azure-ad-b2c", + "azure-ad", + "azure-devops", + "azure", + "bankid-no", + "battlenet", + "beyondidentity", + "bitbucket", + "box", + "boxyhq-saml", + "bungie", + "click-up", + "cognito", + "coinbase", + "concept2", + "descope", + "discord", + "dribbble", + "dropbox", + "duende-identityserver-6", + "eventbrite", + "eveonline", + "facebook", + "faceit", + "figma", + "forwardemail", + "foursquare", + "freshbooks", + "frontegg", + "fusionauth", + "github", + "gitlab", + "google", + "hubspot", + "huggingface", + "identity-server4", + "instagram", + "kakao", + "keycloak", + "kinde", + "line", + "linkedin", + "logto", + "loops", + "mailchimp", + "mailgun", + "mailru", + "mastodon", + "mattermost", + "medium", + "microsoft-entra-id", + "naver", + "netlify", + "netsuite", + "nextcloud", + "nodemailer", + "notion", + "okta", + "onelogin", + "osso", + "osu", + "passage", + "passkey", + "patreon", + "ping-id", + "pinterest", + "pipedrive", + "postmark", + "reddit", + "resend", + "roblox", + "sailpoint", + "salesforce", + "sendgrid", + "simplelogin", + "slack", + "spotify", + "strava", + "threads", + "tiktok", + "todoist", + "trakt", + "twitch", + "twitter", + "united-effects", + "vercel", + "vipps-mobilepay", + "vipps", + "vk", + "webex", + "wechat", + "wikimedia", + "wordpress", + "workos", + "yandex", + "zitadel", + "zoho", + "zoom", + ] + + // Split providers into four rows for the marquee + const quarter = Math.ceil(providers.length / 4) + const row1 = providers.slice(0, quarter) + const row2 = providers.slice(quarter, quarter * 2) + const row3 = providers.slice(quarter * 2, quarter * 3) + const row4 = providers.slice(quarter * 3) + + return ( +
+
+ {/* Row 1, scrolling left */} +
+ {row1.map((name, i) => ( + + ))} + {/* Duplicate for infinite effect */} + {row1.map((name, i) => ( + + ))} +
+ + {/* Row 2, scrolling right */} +
+ {row2.map((name, i) => ( + + ))} + {/* Duplicate for infinite effect */} + {row2.map((name, i) => ( + + ))} +
+ + {/* Row 3, scrolling left */} +
+ {row3.map((name, i) => ( + + ))} + {/* Duplicate for infinite effect */} + {row3.map((name, i) => ( + + ))} +
+ + {/* Row 4, scrolling right */} +
+ {row4.map((name, i) => ( + + ))} + {/* Duplicate for infinite effect */} + {row4.map((name, i) => ( + + ))} +
+
+ + {/* CSS for animations and image filter */} + +
+ ) +} + +// --- Example Usage in a Page --- +const App = () => { + return ( +
+ {/* Other sections of your landing page */} + + {/* Other sections of your landing page */} +
+ ) +} + +export default ProviderMarquee diff --git a/docs/pages/index.mdx b/docs/pages/index.mdx index 38674ee8e4..e92d1bb496 100644 --- a/docs/pages/index.mdx +++ b/docs/pages/index.mdx @@ -10,6 +10,7 @@ import Express from "../public/img/etc/express.svg" import Next from "../public/img/etc/nextjs.svg" import Qwik from "../public/img/etc/qwik.svg" import { CaretRight } from "@/icons" +import ProvidersMarquee from "@/components/ProvidersMarquee" {/* Testimonials section */} import { VercelIcon } from "@/components/Icons/VercelIcon" @@ -279,87 +280,18 @@ export const { handlers, signIn, signOut, auth } = NextAuth({ {" "} -
+

- Sign in with anything. + Sign in with _\* anything \*_

- With over 50 popular providers, you can let your users sign in with the + With over 100 popular providers, you can let your users sign in with the services they already use and trust.
- {/* This is where you would place your LogosMarquee component */} - {/* For now, here is a placeholder for the visual effect */} -
-
- {/* Repeat this block for a seamless loop */} -
- - Google - - - GitHub - - - Apple - - - Twitter - - - Auth0 - - - Okta - - - Discord - - - Twitch - -
-
- - Google - - - GitHub - - - Apple - - - Twitter - - - Auth0 - - - Okta - - - Discord - - - Twitch - -
-
-
- {/* Add this to your CSS for the animation */} - + +
From 481149cec16ff46d562eca6f0f953ff55f28265f Mon Sep 17 00:00:00 2001 From: Aman Meherally Date: Mon, 25 Aug 2025 23:52:51 -0400 Subject: [PATCH 07/23] hover effect on provider icons --- docs/components/ProvidersMarquee/index.tsx | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/docs/components/ProvidersMarquee/index.tsx b/docs/components/ProvidersMarquee/index.tsx index fab6d5e119..2735276d88 100644 --- a/docs/components/ProvidersMarquee/index.tsx +++ b/docs/components/ProvidersMarquee/index.tsx @@ -2,16 +2,24 @@ import React from "react" // --- Reusable Provider Icon Component --- const ProviderIcon = ({ name }) => ( -
+
{name} { ;(e.currentTarget as HTMLImageElement).style.display = "none" }} /> + {/* Floating tag that appears on hover */} +
+
+ {name}.svg +
+ {/* Tooltip arrow */} +
+
) From d9089febe7222a5d21a8201fb0e01afa34be2710 Mon Sep 17 00:00:00 2001 From: Aman Meherally Date: Mon, 25 Aug 2025 23:52:56 -0400 Subject: [PATCH 08/23] fix: links --- docs/pages/index.mdx | 25 ++++++++++++++----------- 1 file changed, 14 insertions(+), 11 deletions(-) diff --git a/docs/pages/index.mdx b/docs/pages/index.mdx index e92d1bb496..3188483c8d 100644 --- a/docs/pages/index.mdx +++ b/docs/pages/index.mdx @@ -166,7 +166,7 @@ export const { onRequest, useSession } = QwikAuth$(() => ({ providers: [GitHub]

- Trusted by the best in the business + Trusted by the best in the game

@@ -342,7 +342,7 @@ export const { handlers, signIn, signOut, auth } = NextAuth({ {/* CTA Buttons */} @@ -416,36 +419,36 @@ export const { handlers, signIn, signOut, auth } = NextAuth({ {/* Column 1: About */} {/* Column 2: Documentation */} {/* Column 3: Community */}

Community

GitHub - Discord - Twitter / X + Discord + NPM
{/* Column 4: Acknowledgements */}

Acknowledgements

- Vercel Clerk (Sponsor) + Contributors + Sponsors
-

© {new Date().getFullYear()} Auth.js Team. All rights reserved.

+

© {new Date().getFullYear()} Auth.js Team. Balázs Orbán and Team. All rights reserved.

From eeccf2c69119aa38a5811aa09968f2510232eb7e Mon Sep 17 00:00:00 2001 From: Aman Meherally Date: Tue, 26 Aug 2025 00:00:31 -0400 Subject: [PATCH 09/23] responsive cta --- docs/pages/index.mdx | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/docs/pages/index.mdx b/docs/pages/index.mdx index 3188483c8d..dbbe2e5801 100644 --- a/docs/pages/index.mdx +++ b/docs/pages/index.mdx @@ -364,22 +364,20 @@ export const { handlers, signIn, signOut, auth } = NextAuth({
-{" "} -
-
-
-

+
+
+

Ready to secure your app?

Get started in minutes with our quickstart guide or dive into the documentation to see everything Auth.js has to offer.
-
+
Get started @@ -420,6 +418,7 @@ export const { handlers, signIn, signOut, auth } = NextAuth({ From d2f1ae641b8c7ea561a10f024e50911c0c2c5a40 Mon Sep 17 00:00:00 2001 From: Aman Meherally Date: Tue, 26 Aug 2025 01:25:58 -0400 Subject: [PATCH 10/23] fixed hero image --- docs/pages/index.mdx | 108 +++++++++++++++++++++++-------------------- 1 file changed, 59 insertions(+), 49 deletions(-) diff --git a/docs/pages/index.mdx b/docs/pages/index.mdx index dbbe2e5801..34c70409d2 100644 --- a/docs/pages/index.mdx +++ b/docs/pages/index.mdx @@ -23,95 +23,106 @@ import { DubIcon } from "@/components/Icons/DubIcon" import TestimonialCard from "@/components/TestimonialCard"
-
- {/* Left Column: Headline and CTAs */} -
-
-

- Authentication for the Modern Web. +
+ {/* Top Column: Headline and CTAs */} +
+
+

+ Auth. Free. Open Source.

-
- Simple, open-source authentication for Next.js, SvelteKit, and beyond. Own your data and get started in minutes. +
+ Own your user data. Connect to your own database with a simple adapter, any from 100+ providers, and avoid vendor lock-in forever.
-
+
Get Started - - + + Source
-{/* Right Column: Interactive Code Block */} +{/* Bottom Column: Interactive Code Block */} +
- -
+ +
{[ - { value: "express", src: Express, name: "Express", darkInvert: true }, + { value: "express", src: Express, name: "Express", darkInvert: true }, { value: "nextjs", src: Next, name: "Next.js", darkInvert: true }, - { value: "qwik", src: Qwik, name: "Qwik", darkInvert: false }, - { value: "sveltekit", src: SvelteKit, name: "SvelteKit", darkInvert: false }, + { value: "qwik", src: Qwik, name: "Qwik", darkInvert: false }, + { value: "sveltekit", src: SvelteKit, name: "SvelteKit", darkInvert: false }, ].map((trigger) => ( {`${trigger.name} ))} - More + More
-
-
-
-
+
+
+
+
-
- {Object.entries({ - nextjs: `\ +
+ {Object.entries({ + nextjs: `\ // auth.ts import NextAuth from "next-auth" import GitHub from "next-auth/providers/github" export const { auth, handlers } = NextAuth({ providers: [GitHub] }) // middleware.ts -export { auth as middleware } from "@/auth" +export { auth as middleware } from "@auth" // app/api/auth/[...nextauth]/route.ts -import { handlers } from "@/auth" +import { handlers } from "@auth" export const { GET, POST } = handlers `, sveltekit: `\ @@ -141,25 +152,24 @@ app.use("/auth/\*", ExpressAuth({ providers: [GitHub] })) import { QwikAuth } from "@auth/qwik" import GitHub from "@auth/qwik/providers/github" export const { onRequest, useSession } = QwikAuth$(() => ({ providers: [GitHub] })) -` -}).map(([key, code]) => +`, +}).map(([key, code]) => ( - 
-    
-      {code}
-    
-
+key={key} +orientation="vertical" +value={key} +className="h-full" +tabIndex={-1} > +
+{code}
+
 -)} +))} +
+ +
-
@@ -173,7 +183,7 @@ export const { onRequest, useSession } = QwikAuth$(() => ({ providers: [GitHub] The category-defining generative AI platform from OpenAI, enabling developers to build intelligent applications. - + Open-source scheduling infrastructure for everyone, from individuals to enterprise scale. From e3d2638d2ddc972f2139739a41eeea263841b876 Mon Sep 17 00:00:00 2001 From: Aman Meherally Date: Tue, 26 Aug 2025 02:35:00 -0400 Subject: [PATCH 11/23] fix: code hero section --- docs/components/CodeTabs/index.tsx | 149 +++++++++++++++++++++++++++++ docs/pages/index.mdx | 114 +--------------------- 2 files changed, 154 insertions(+), 109 deletions(-) create mode 100644 docs/components/CodeTabs/index.tsx diff --git a/docs/components/CodeTabs/index.tsx b/docs/components/CodeTabs/index.tsx new file mode 100644 index 0000000000..3fca28c7c9 --- /dev/null +++ b/docs/components/CodeTabs/index.tsx @@ -0,0 +1,149 @@ +import { Pre } from "nextra/components" +import React, { useState, useEffect } from "react" +import { type Highlighter, createHighlighter } from "shiki" + +// --- SVG Icon Components (placeholders) --- +const ExpressIcon = () => ( + Express +) +const NextIcon = () => ( + Next.js +) +const QwikIcon = () => ( + Qwik +) +const SvelteKitIcon = () => ( + SvelteKit +) +const CaretRight = () => › + +// --- Main Code Tabs Component --- +export const CodeTabs = () => { + const [activeTab, setActiveTab] = useState("nextjs") + const [highlighter, setHighlighter] = useState(null) + + // 1. Initialize the Shiki highlighter + useEffect(() => { + ;(async () => { + const hl = await createHighlighter({ + themes: ["github-dark", "github-dark"], + langs: ["ts", "tsx", "bash"], // Add any languages you need + }) + setHighlighter(hl) + })() + }, []) + + // 2. A function to convert a raw code string to highlighted HTML + const highlight = (code: string, lang: "ts" | "tsx" | "bash") => { + if (!highlighter) { + // Return raw code while highlighter is loading + return `
${code}
` + } + return highlighter.codeToHtml(code, { + lang, + themes: { + light: "github-dark", + dark: "github-dark", + }, + }) + } + + const codeSnippets = { + nextjs: `// auth.ts +import NextAuth from "next-auth" +import GitHub from "next-auth/providers/github" +export const { auth, handlers } = NextAuth({ providers: [GitHub] }) + +// middleware.ts +export { auth as middleware } from "@auth" + +// app/api/auth/[...nextauth]/route.ts +import { handlers } from "@auth" +export const { GET, POST } = handlers`, + sveltekit: `// src/auth.ts +import { SvelteKitAuth } from "@auth/sveltekit" +import GitHub from '@auth/sveltekit/providers/github' + +export const { handle } = SvelteKitAuth({ + providers: [GitHub], +}) + +// src/hooks.server.ts +export { handle } from "./auth"`, + express: `// server.ts +import express from "express" +import { ExpressAuth } from "@auth/express" +import GitHub from "@auth/express/providers/github" + +const app = express() + +app.use("/auth/*", ExpressAuth({ providers: [GitHub] }))`, + qwik: `// src/routes/plugin@auth.ts +import { QwikAuth } from "@auth/qwik" +import GitHub from "@auth/qwik/providers/github" +export const { onRequest, useSession } = QwikAuth$(() => ({ providers: [GitHub] }))`, + } + + const tabs = [ + { value: "express", Icon: ExpressIcon, name: "Express" }, + { value: "nextjs", Icon: NextIcon, name: "Next.js" }, + { value: "qwik", Icon: QwikIcon, name: "Qwik" }, + { value: "sveltekit", Icon: SvelteKitIcon, name: "SvelteKit" }, + ] + + return ( +
+ {/* Header with Tabs */} +
+
+ {tabs.map((tab) => ( + + ))} + + More + + +
+
+ + {/* Code Content */} +
+ {/* 3. Render the highlighted HTML using dangerouslySetInnerHTML */} +
+
+
+ ) +} diff --git a/docs/pages/index.mdx b/docs/pages/index.mdx index 34c70409d2..8220578198 100644 --- a/docs/pages/index.mdx +++ b/docs/pages/index.mdx @@ -10,6 +10,7 @@ import Express from "../public/img/etc/express.svg" import Next from "../public/img/etc/nextjs.svg" import Qwik from "../public/img/etc/qwik.svg" import { CaretRight } from "@/icons" +import { CodeTabs } from "@/components/CodeTabs" import ProvidersMarquee from "@/components/ProvidersMarquee" {/* Testimonials section */} @@ -63,113 +64,8 @@ import TestimonialCard from "@/components/TestimonialCard"

- -{/* Bottom Column: Interactive Code Block */} - -
- - -
- {[ - { value: "express", src: Express, name: "Express", darkInvert: true }, - { value: "nextjs", src: Next, name: "Next.js", darkInvert: true }, - { value: "qwik", src: Qwik, name: "Qwik", darkInvert: false }, - { value: "sveltekit", src: SvelteKit, name: "SvelteKit", darkInvert: false }, - ].map((trigger) => ( - - {`${trigger.name} - - ))} - - More - - -
-
-
-
-
-
- -
- {Object.entries({ - nextjs: `\ -// auth.ts -import NextAuth from "next-auth" -import GitHub from "next-auth/providers/github" -export const { auth, handlers } = NextAuth({ providers: [GitHub] }) - -// middleware.ts -export { auth as middleware } from "@auth" - -// app/api/auth/[...nextauth]/route.ts -import { handlers } from "@auth" -export const { GET, POST } = handlers -`, - sveltekit: `\ -// src/auth.ts -import { SvelteKitAuth } from "@auth/sveltekit" -import GitHub from '@auth/sveltekit/providers/github' - -export const { handle } = SvelteKitAuth({ - providers: [GitHub], -}) - -// src/hooks.server.ts -export { handle } from "./auth" -`, - express: `\ -// server.ts -import { express } from "express" -import { ExpressAuth } from "@auth/express" -import GitHub from "@auth/express/providers/github" - -const app = express() - -app.use("/auth/\*", ExpressAuth({ providers: [GitHub] })) -`, - qwik: `\ -// src/routes/plugin@auth.ts -import { QwikAuth } from "@auth/qwik" -import GitHub from "@auth/qwik/providers/github" -export const { onRequest, useSession } = QwikAuth$(() => ({ providers: [GitHub] })) -`, -}).map(([key, code]) => ( - - -
-{code}
-
- -))} -
- - -
+ +
@@ -361,9 +257,9 @@ export const { handlers, signIn, signOut, auth } = NextAuth({ - + Star on GitHub From ca01b8119505ab0795a3b3390c88e2504b4b989d Mon Sep 17 00:00:00 2001 From: Aman Meherally Date: Tue, 26 Aug 2025 02:40:58 -0400 Subject: [PATCH 12/23] fixed statistics --- docs/pages/index.mdx | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/docs/pages/index.mdx b/docs/pages/index.mdx index 8220578198..937d8feacf 100644 --- a/docs/pages/index.mdx +++ b/docs/pages/index.mdx @@ -10,6 +10,7 @@ import Express from "../public/img/etc/express.svg" import Next from "../public/img/etc/nextjs.svg" import Qwik from "../public/img/etc/qwik.svg" import { CaretRight } from "@/icons" +import { GithubLogo } from "@/components/Icons/GithubLogo" import { CodeTabs } from "@/components/CodeTabs" import ProvidersMarquee from "@/components/ProvidersMarquee" @@ -219,7 +220,7 @@ export const { handlers, signIn, signOut, auth } = NextAuth({
{/* GitHub Stars Card */}
-

30k+

+

25k+

GitHub Stars
A testament to the community's trust and love for the project. @@ -228,7 +229,7 @@ export const { handlers, signIn, signOut, auth } = NextAuth({ {/* NPM Downloads Card */}
-

5M+

+

60M+

NPM Downloads
Powering millions of applications every month, from side projects to enterprise. @@ -237,7 +238,7 @@ export const { handlers, signIn, signOut, auth } = NextAuth({ {/* Contributors Card */} From b0574f32df13c3138baebea5a68022a168f86897 Mon Sep 17 00:00:00 2001 From: Aman Meherally Date: Tue, 26 Aug 2025 03:21:23 -0400 Subject: [PATCH 13/23] responsive provider logos --- docs/components/ProvidersMarquee/index.tsx | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/docs/components/ProvidersMarquee/index.tsx b/docs/components/ProvidersMarquee/index.tsx index 2735276d88..2fd02ea95e 100644 --- a/docs/components/ProvidersMarquee/index.tsx +++ b/docs/components/ProvidersMarquee/index.tsx @@ -2,11 +2,11 @@ import React from "react" // --- Reusable Provider Icon Component --- const ProviderIcon = ({ name }) => ( -
+
{name} { ;(e.currentTarget as HTMLImageElement).style.display = "none" @@ -196,7 +196,7 @@ const ProviderMarquee = () => { 100% { transform: translateX(-50%); } } .animate-scroll-left { - animation: scroll-left 90s linear infinite; + animation: scroll-left 15s linear infinite; } @keyframes scroll-right { @@ -204,7 +204,16 @@ const ProviderMarquee = () => { 100% { transform: translateX(0); } } .animate-scroll-right { - animation: scroll-right 90s linear infinite; + animation: scroll-right 15s linear infinite; + } + + @media (min-width: 1024px) { + .animate-scroll-left { + animation-duration: 75s; + } + .animate-scroll-right { + animation-duration: 75s; + } } .filter-white { From bb095497a2762690b63b33c4de40053bfb31526d Mon Sep 17 00:00:00 2001 From: Aman Meherally Date: Tue, 26 Aug 2025 03:24:21 -0400 Subject: [PATCH 14/23] fix: github icon --- docs/pages/index.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/pages/index.mdx b/docs/pages/index.mdx index 937d8feacf..83460caacd 100644 --- a/docs/pages/index.mdx +++ b/docs/pages/index.mdx @@ -247,7 +247,7 @@ export const { handlers, signIn, signOut, auth } = NextAuth({
{/* CTA Buttons */} -
+
From 14613f36f96ef42206b5e96e4fb38b3a4e205a11 Mon Sep 17 00:00:00 2001 From: Aman Meherally Date: Tue, 26 Aug 2025 03:32:33 -0400 Subject: [PATCH 15/23] hero code theming --- docs/components/CodeTabs/index.tsx | 38 ++++++++++++++++++++++++------ 1 file changed, 31 insertions(+), 7 deletions(-) diff --git a/docs/components/CodeTabs/index.tsx b/docs/components/CodeTabs/index.tsx index 3fca28c7c9..a643fe90ba 100644 --- a/docs/components/CodeTabs/index.tsx +++ b/docs/components/CodeTabs/index.tsx @@ -36,26 +36,44 @@ const CaretRight = () => › // --- Main Code Tabs Component --- export const CodeTabs = () => { const [activeTab, setActiveTab] = useState("nextjs") - const [highlighter, setHighlighter] = useState(null) + const [highlighter, setHighlighter] = useState([]) // 1. Initialize the Shiki highlighter useEffect(() => { ;(async () => { const hl = await createHighlighter({ + themes: ["github-light-default", "github-light-default"], + langs: ["ts", "tsx", "bash"], // Add any languages you need + }) + const h2 = await createHighlighter({ themes: ["github-dark", "github-dark"], langs: ["ts", "tsx", "bash"], // Add any languages you need }) - setHighlighter(hl) + setHighlighter([hl, h2]) })() }, []) // 2. A function to convert a raw code string to highlighted HTML - const highlight = (code: string, lang: "ts" | "tsx" | "bash") => { - if (!highlighter) { + const highlightLight = (code: string, lang: "ts" | "tsx" | "bash") => { + if (!highlighter || highlighter.length !== 2) { // Return raw code while highlighter is loading return `
${code}
` } - return highlighter.codeToHtml(code, { + return highlighter[0].codeToHtml(code, { + lang, + themes: { + light: "github-light-default", + dark: "github-light-default", + }, + }) + } + + const highlightDark = (code: string, lang: "ts" | "tsx" | "bash") => { + if (!highlighter || highlighter.length !== 2) { + // Return raw code while highlighter is loading + return `
${code}
` + } + return highlighter[1].codeToHtml(code, { lang, themes: { light: "github-dark", @@ -138,9 +156,15 @@ export const { onRequest, useSession } = QwikAuth$(() => ({ providers: [GitHub]
{/* 3. Render the highlighted HTML using dangerouslySetInnerHTML */}
+
From e5ddbb021243d71b1d9716d9f9c0a966af4cbb15 Mon Sep 17 00:00:00 2001 From: Aman Meherally Date: Tue, 26 Aug 2025 09:23:31 -0400 Subject: [PATCH 16/23] minor text and theming fixes --- docs/components/CodeTabs/index.tsx | 3 +-- docs/pages/index.mdx | 8 ++++---- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/docs/components/CodeTabs/index.tsx b/docs/components/CodeTabs/index.tsx index a643fe90ba..9fb33a0968 100644 --- a/docs/components/CodeTabs/index.tsx +++ b/docs/components/CodeTabs/index.tsx @@ -1,4 +1,3 @@ -import { Pre } from "nextra/components" import React, { useState, useEffect } from "react" import { type Highlighter, createHighlighter } from "shiki" @@ -7,7 +6,7 @@ const ExpressIcon = () => ( Express ) const NextIcon = () => ( diff --git a/docs/pages/index.mdx b/docs/pages/index.mdx index 83460caacd..0fabcb7acc 100644 --- a/docs/pages/index.mdx +++ b/docs/pages/index.mdx @@ -85,7 +85,7 @@ import TestimonialCard from "@/components/TestimonialCard" - The platform for frontend developers, providing the speed and reliability innovators need to create at the moment of inspiration. + Vercel provides the developer tools and cloud infrastructure to build, scale, and secure a faster, more personalized web. @@ -161,7 +161,7 @@ import TestimonialCard from "@/components/TestimonialCard"

Fully Extensible

- Choose from 50+ pre-configured providers or add your own. Customize everything from UI to session handling with callbacks. + Choose from 100+ pre-configured providers or add your own. Customize everything from UI to session handling with callbacks.
@@ -206,7 +206,7 @@ export const { handlers, signIn, signOut, auth } = NextAuth({
-
+

Built by developers, for developers @@ -260,7 +260,7 @@ export const { handlers, signIn, signOut, auth } = NextAuth({ target="_blank" className="p-4 text-center rounded-lg font-semibold flex items-center max-lg:justify-center gap-2 text-black dark:text-white transition bg-[#FFF4] dark:bg-[#FFFFFF03] border border-neutral-200 dark:border-neutral-800 backdrop-blur-sm" > - +

From f9410a09b66c6a9ec555797e23905a52555aa9b7 Mon Sep 17 00:00:00 2001 From: Aman Meherally Date: Tue, 26 Aug 2025 10:10:47 -0400 Subject: [PATCH 17/23] refactoring --- docs/components/Advantages/index.tsx | 172 ++++++++ docs/components/CTA/index.tsx | 50 +++ docs/components/Footer/index.tsx | 153 ++++---- .../{CodeTabs/index.tsx => Hero/CodeTabs.tsx} | 40 +- docs/components/Hero/index.tsx | 50 +++ .../index.tsx => Providers/Marquee.tsx} | 245 ++++++------ docs/components/Providers/index.tsx | 19 + docs/components/Stats/index.tsx | 81 ++++ .../index.tsx => Testimonials/Card.tsx} | 0 docs/components/Testimonials/index.tsx | 78 ++++ docs/pages/index.mdx | 367 +----------------- 11 files changed, 653 insertions(+), 602 deletions(-) create mode 100644 docs/components/Advantages/index.tsx create mode 100644 docs/components/CTA/index.tsx rename docs/components/{CodeTabs/index.tsx => Hero/CodeTabs.tsx} (79%) create mode 100644 docs/components/Hero/index.tsx rename docs/components/{ProvidersMarquee/index.tsx => Providers/Marquee.tsx} (54%) create mode 100644 docs/components/Providers/index.tsx create mode 100644 docs/components/Stats/index.tsx rename docs/components/{TestimonialCard/index.tsx => Testimonials/Card.tsx} (100%) create mode 100644 docs/components/Testimonials/index.tsx diff --git a/docs/components/Advantages/index.tsx b/docs/components/Advantages/index.tsx new file mode 100644 index 0000000000..ecf543071c --- /dev/null +++ b/docs/components/Advantages/index.tsx @@ -0,0 +1,172 @@ +import { useEffect, useState } from "react" +import { createHighlighter, Highlighter } from "shiki/index.mjs" + +const codeSnippet = `import NextAuth from "next-auth" + +export const { handlers, signIn, signOut, auth } = NextAuth({ + providers: [], +})` + +export default function Advantages() { + const [highlighter, setHighlighter] = useState([]) + + useEffect(() => { + ;(async () => { + const hl = await createHighlighter({ + themes: ["github-light-default", "github-light-default"], + langs: ["ts", "tsx", "bash"], + }) + const h2 = await createHighlighter({ + themes: ["github-dark", "github-dark"], + langs: ["ts", "tsx", "bash"], + }) + setHighlighter([hl, h2]) + })() + }, []) + + const highlightLight = (code: string, lang: "ts" | "tsx" | "bash") => { + if (!highlighter || highlighter.length !== 2) { + return `
${code}
` + } + + return highlighter[0].codeToHtml(code, { + lang, + themes: { + light: "github-light-default", + dark: "github-light-default", + }, + }) + } + + const highlightDark = (code: string, lang: "ts" | "tsx" | "bash") => { + if (!highlighter || highlighter.length !== 2) { + return `
${code}
` + } + return highlighter[1].codeToHtml(code, { + lang, + themes: { + light: "github-dark", + dark: "github-dark", + }, + }) + } + + return ( +
+
+
+
+
+

+ Everything you need, nothing you don’t +

+
+ Auth.js is a complete, open-source authentication solution, + designed to be flexible and secure, giving you full control over + your user data. +
+
+ +
+
+
+
+ + + +
+

+ Use Any Framework +

+
+ Built for the edge with first-class support for Next.js, + SvelteKit, SolidStart, and more. +
+
+ +
+
+ + + +
+

+ Own Your Data +

+
+ Connect to your own database with our adapter system. Never + get locked into a vendor's user table again. +
+
+
+ +
+
+ + + +
+

+ Fully Extensible +

+
+ Choose from 100+ pre-configured providers or add your own. + Customize everything from UI to session handling with callbacks. +
+
+
+ {/* 3. Render the highlighted HTML using dangerouslySetInnerHTML */} +
+
+
+
+
+
+
+
+
+ ) +} diff --git a/docs/components/CTA/index.tsx b/docs/components/CTA/index.tsx new file mode 100644 index 0000000000..becee6ab10 --- /dev/null +++ b/docs/components/CTA/index.tsx @@ -0,0 +1,50 @@ +export default function CTA() { + return ( +
+
+
+

+ Ready to secure your app? +

+
+ Get started in minutes with our quickstart guide or dive into the + documentation to see everything Auth.js has to offer. +
+ + +
+
+
+ ) +} diff --git a/docs/components/Footer/index.tsx b/docs/components/Footer/index.tsx index 3978a4ab8e..61dc609563 100644 --- a/docs/components/Footer/index.tsx +++ b/docs/components/Footer/index.tsx @@ -1,97 +1,82 @@ -import { useEffect } from "react" -import { useRouter } from "next/router" -import cx from "classnames" +import React from "react" -function kFormatter(num: number) { - return (Math.sign(num) * (Math.abs(num) / 1000)).toFixed(1) + "k" +function FooterSection({ children }) { + return
{children}
} -export function Footer({ className = "" }) { - const router = useRouter() - - useEffect(() => { - fetch("https://api.github.com/repos/nextauthjs/next-auth") - .then((res) => res.json()) - .then((data) => { - const githubStat = document.querySelector(".github-counter")! - if (!githubStat) return - githubStat.innerHTML = kFormatter(data.stargazers_count ?? 21100) - }) - - // CarbonAds hydration error workaround hack - const carbonAdsEl = - document.querySelector("#_carbonads_js") - if (carbonAdsEl) { - carbonAdsEl.src = - "https://cdn.carbonads.com/carbon.js?serve=CWYD42JY&placement=authjsdev&format=cover" +function FooterHeading({ children }) { + return ( +

+ {children} +

+ ) +} - router.events.on("routeChangeComplete", () => { - window._carbonads?.refresh() - }) - } - }, []) +function FooterLink({ href, children }) { return ( -
-
-
-

About Auth.js

- -
-
-

Download

-
    - + {children} + + ) +} + +export default function Footer() { + return ( +
    +
    +
    + + About Auth.js + Introduction + Security + + Migrating to v5 + + + + + Documentation + Get Started + + Providers + + + Adapters + + + + + Community + GitHub - - + + + Discord + + NPM - -
+ + + + + Acknowledgements + Clerk (Sponsor) + + Contributors + + Sponsors +
-
-

Acknowledgements

- +
+

+ © {new Date().getFullYear()} Auth.js Team. Balázs Orbán and + Team. All rights reserved. +

-
- Auth.js © Balázs Orbán and Team - {new Date().getFullYear()} -
-
+

) } - -export default Footer diff --git a/docs/components/CodeTabs/index.tsx b/docs/components/Hero/CodeTabs.tsx similarity index 79% rename from docs/components/CodeTabs/index.tsx rename to docs/components/Hero/CodeTabs.tsx index 9fb33a0968..e0ef66fec1 100644 --- a/docs/components/CodeTabs/index.tsx +++ b/docs/components/Hero/CodeTabs.tsx @@ -1,61 +1,47 @@ import React, { useState, useEffect } from "react" import { type Highlighter, createHighlighter } from "shiki" -// --- SVG Icon Components (placeholders) --- +import expressIcon from "../../public/img/etc/express.svg" +import nextIcon from "../../public/img/etc/nextjs.svg" +import qwikIcon from "../../public/img/etc/qwik.svg" +import sveltekitIcon from "../../public/img/etc/sveltekit.svg" + const ExpressIcon = () => ( - Express + Express ) const NextIcon = () => ( Next.js ) -const QwikIcon = () => ( - Qwik -) +const QwikIcon = () => Qwik const SvelteKitIcon = () => ( - SvelteKit + SvelteKit ) const CaretRight = () => › -// --- Main Code Tabs Component --- export const CodeTabs = () => { const [activeTab, setActiveTab] = useState("nextjs") const [highlighter, setHighlighter] = useState([]) - // 1. Initialize the Shiki highlighter useEffect(() => { ;(async () => { const hl = await createHighlighter({ themes: ["github-light-default", "github-light-default"], - langs: ["ts", "tsx", "bash"], // Add any languages you need + langs: ["ts", "tsx", "bash"], }) const h2 = await createHighlighter({ themes: ["github-dark", "github-dark"], - langs: ["ts", "tsx", "bash"], // Add any languages you need + langs: ["ts", "tsx", "bash"], }) setHighlighter([hl, h2]) })() }, []) - // 2. A function to convert a raw code string to highlighted HTML const highlightLight = (code: string, lang: "ts" | "tsx" | "bash") => { if (!highlighter || highlighter.length !== 2) { - // Return raw code while highlighter is loading return `
${code}
` } return highlighter[0].codeToHtml(code, { @@ -69,7 +55,6 @@ export const CodeTabs = () => { const highlightDark = (code: string, lang: "ts" | "tsx" | "bash") => { if (!highlighter || highlighter.length !== 2) { - // Return raw code while highlighter is loading return `
${code}
` } return highlighter[1].codeToHtml(code, { @@ -126,7 +111,6 @@ export const { onRequest, useSession } = QwikAuth$(() => ({ providers: [GitHub] return (
- {/* Header with Tabs */}
{tabs.map((tab) => ( @@ -151,9 +135,7 @@ export const { onRequest, useSession } = QwikAuth$(() => ({ providers: [GitHub]
- {/* Code Content */}
- {/* 3. Render the highlighted HTML using dangerouslySetInnerHTML */}
+
+
+

+ Auth. Free. Open Source. +

+
+ Own your user data. Connect to your own database with a simple + adapter, any from 100+ providers, and avoid vendor lock-in forever. +
+
+
+ + Get Started + + + + + + Source + +
+
+ +
+ ) +} diff --git a/docs/components/ProvidersMarquee/index.tsx b/docs/components/Providers/Marquee.tsx similarity index 54% rename from docs/components/ProvidersMarquee/index.tsx rename to docs/components/Providers/Marquee.tsx index 2fd02ea95e..c0271fe312 100644 --- a/docs/components/ProvidersMarquee/index.tsx +++ b/docs/components/Providers/Marquee.tsx @@ -1,139 +1,132 @@ import React from "react" -// --- Reusable Provider Icon Component --- +const providers = [ + "42-school", + "apple", + "asgardeo", + "atlassian", + "auth0", + "authentik", + "azure-ad-b2c", + "azure-ad", + "azure-devops", + "azure", + "bankid-no", + "battlenet", + "beyondidentity", + "bitbucket", + "box", + "boxyhq-saml", + "bungie", + "click-up", + "cognito", + "coinbase", + "concept2", + "descope", + "discord", + "dribbble", + "dropbox", + "duende-identityserver-6", + "eventbrite", + "eveonline", + "facebook", + "faceit", + "figma", + "forwardemail", + "foursquare", + "freshbooks", + "frontegg", + "fusionauth", + "github", + "gitlab", + "google", + "hubspot", + "huggingface", + "identity-server4", + "instagram", + "kakao", + "keycloak", + "kinde", + "line", + "linkedin", + "logto", + "loops", + "mailchimp", + "mailgun", + "mailru", + "mastodon", + "mattermost", + "medium", + "microsoft-entra-id", + "naver", + "netlify", + "netsuite", + "nextcloud", + "nodemailer", + "notion", + "okta", + "onelogin", + "osso", + "osu", + "passage", + "passkey", + "patreon", + "ping-id", + "pinterest", + "pipedrive", + "postmark", + "reddit", + "resend", + "roblox", + "sailpoint", + "salesforce", + "sendgrid", + "simplelogin", + "slack", + "spotify", + "strava", + "threads", + "tiktok", + "todoist", + "trakt", + "twitch", + "twitter", + "united-effects", + "vercel", + "vipps-mobilepay", + "vipps", + "vk", + "webex", + "wechat", + "wikimedia", + "wordpress", + "workos", + "yandex", + "zitadel", + "zoho", + "zoom", +] + const ProviderIcon = ({ name }) => ( -
+
{name} { ;(e.currentTarget as HTMLImageElement).style.display = "none" }} /> - {/* Floating tag that appears on hover */}
{name}.svg
- {/* Tooltip arrow */}
) -// --- Main ProviderMarquee Component --- const ProviderMarquee = () => { - // The complete list of provider icons from the directory - const providers = [ - "42-school", - "apple", - "asgardeo", - "atlassian", - "auth0", - "authentik", - "azure-ad-b2c", - "azure-ad", - "azure-devops", - "azure", - "bankid-no", - "battlenet", - "beyondidentity", - "bitbucket", - "box", - "boxyhq-saml", - "bungie", - "click-up", - "cognito", - "coinbase", - "concept2", - "descope", - "discord", - "dribbble", - "dropbox", - "duende-identityserver-6", - "eventbrite", - "eveonline", - "facebook", - "faceit", - "figma", - "forwardemail", - "foursquare", - "freshbooks", - "frontegg", - "fusionauth", - "github", - "gitlab", - "google", - "hubspot", - "huggingface", - "identity-server4", - "instagram", - "kakao", - "keycloak", - "kinde", - "line", - "linkedin", - "logto", - "loops", - "mailchimp", - "mailgun", - "mailru", - "mastodon", - "mattermost", - "medium", - "microsoft-entra-id", - "naver", - "netlify", - "netsuite", - "nextcloud", - "nodemailer", - "notion", - "okta", - "onelogin", - "osso", - "osu", - "passage", - "passkey", - "patreon", - "ping-id", - "pinterest", - "pipedrive", - "postmark", - "reddit", - "resend", - "roblox", - "sailpoint", - "salesforce", - "sendgrid", - "simplelogin", - "slack", - "spotify", - "strava", - "threads", - "tiktok", - "todoist", - "trakt", - "twitch", - "twitter", - "united-effects", - "vercel", - "vipps-mobilepay", - "vipps", - "vk", - "webex", - "wechat", - "wikimedia", - "wordpress", - "workos", - "yandex", - "zitadel", - "zoho", - "zoom", - ] - - // Split providers into four rows for the marquee const quarter = Math.ceil(providers.length / 4) const row1 = providers.slice(0, quarter) const row2 = providers.slice(quarter, quarter * 2) @@ -142,53 +135,44 @@ const ProviderMarquee = () => { return (
-
- {/* Row 1, scrolling left */} +
{row1.map((name, i) => ( ))} - {/* Duplicate for infinite effect */} {row1.map((name, i) => ( ))}
- {/* Row 2, scrolling right */}
{row2.map((name, i) => ( ))} - {/* Duplicate for infinite effect */} {row2.map((name, i) => ( ))}
- {/* Row 3, scrolling left */}
{row3.map((name, i) => ( ))} - {/* Duplicate for infinite effect */} {row3.map((name, i) => ( ))}
- {/* Row 4, scrolling right */}
{row4.map((name, i) => ( ))} - {/* Duplicate for infinite effect */} {row4.map((name, i) => ( ))}
- {/* CSS for animations and image filter */}
) } diff --git a/docs/pages/global.css b/docs/pages/global.css index 4de5a19375..7ac73ec623 100644 --- a/docs/pages/global.css +++ b/docs/pages/global.css @@ -289,3 +289,40 @@ html > head:has(meta[content*="reference/core/providers"]) + body .provider { @apply hidden; } } + +@keyframes scroll-left { + 0% { + transform: translateX(0); + } + 100% { + transform: translateX(-50%); + } +} +.animate-scroll-left { + animation: scroll-left 15s linear infinite; +} + +@keyframes scroll-right { + 0% { + transform: translateX(-50%); + } + 100% { + transform: translateX(0); + } +} +.animate-scroll-right { + animation: scroll-right 15s linear infinite; +} + +@media (min-width: 1024px) { + .animate-scroll-left { + animation-duration: 75s; + } + .animate-scroll-right { + animation-duration: 75s; + } +} + +.filter-white { + filter: brightness(0) invert(1); +} From ef8a3393cae86083a482aed9e53b5baa8b969f0a Mon Sep 17 00:00:00 2001 From: Aman Meherally Date: Tue, 26 Aug 2025 19:05:47 -0400 Subject: [PATCH 21/23] fix: migrated to RichTabs --- docs/components/Hero/CodeTabs.tsx | 174 ++++++++++++++++------------- docs/components/RichTabs/index.tsx | 2 +- 2 files changed, 99 insertions(+), 77 deletions(-) diff --git a/docs/components/Hero/CodeTabs.tsx b/docs/components/Hero/CodeTabs.tsx index e45a3dd72b..f74b90d062 100644 --- a/docs/components/Hero/CodeTabs.tsx +++ b/docs/components/Hero/CodeTabs.tsx @@ -2,11 +2,51 @@ import React, { useState, useEffect } from "react" import { type Highlighter, createHighlighter } from "shiki" import Image from "next/image" +import { RichTabs } from "@/components/RichTabs" +import { CaretRight } from "../Icons" + +// Icons import expressIcon from "../../public/img/etc/express.svg" import nextIcon from "../../public/img/etc/nextjs.svg" import qwikIcon from "../../public/img/etc/qwik.svg" import sveltekitIcon from "../../public/img/etc/sveltekit.svg" +const codeSnippets = { + nextjs: `// auth.ts +import NextAuth from "next-auth" +import GitHub from "next-auth/providers/github" +export const { auth, handlers } = NextAuth({ providers: [GitHub] }) + +// middleware.ts +export { auth as middleware } from "@auth" + +// app/api/auth/[...nextauth]/route.ts +import { handlers } from "@auth" +export const { GET, POST } = handlers`, + sveltekit: `// src/auth.ts +import { SvelteKitAuth } from "@auth/sveltekit" +import GitHub from '@auth/sveltekit/providers/github' + +export const { handle } = SvelteKitAuth({ + providers: [GitHub], +}) + +// src/hooks.server.ts +export { handle } from "./auth"`, + express: `// server.ts +import express from "express" +import { ExpressAuth } from "@auth/express" +import GitHub from "@auth/express/providers/github" + +const app = express() + +app.use("/auth/*", ExpressAuth({ providers: [GitHub] }))`, + qwik: `// src/routes/plugin@auth.ts +import { QwikAuth } from "@auth/qwik" +import GitHub from "@auth/qwik/providers/github" +export const { onRequest, useSession } = QwikAuth$(() => ({ providers: [GitHub] }))`, +} + const ExpressIcon = () => ( ( className="dark:invert" /> ) + const NextIcon = () => ( ( className="filter dark:invert" /> ) + const QwikIcon = () => ( Qwik ) + const SvelteKitIcon = () => ( SvelteKit ) -const CaretRight = () => › export const CodeTabs = () => { const [activeTab, setActiveTab] = useState("nextjs") const [highlighter, setHighlighter] = useState([]) + const tabs = [ + { value: "express", Icon: ExpressIcon, name: "Express" }, + { value: "nextjs", Icon: NextIcon, name: "Next.js" }, + { value: "qwik", Icon: QwikIcon, name: "Qwik" }, + { value: "sveltekit", Icon: SvelteKitIcon, name: "SvelteKit" }, + ] + useEffect(() => { ;(async () => { const hl = await createHighlighter({ @@ -77,89 +126,62 @@ export const CodeTabs = () => { }) } - const codeSnippets = { - nextjs: `// auth.ts -import NextAuth from "next-auth" -import GitHub from "next-auth/providers/github" -export const { auth, handlers } = NextAuth({ providers: [GitHub] }) - -// middleware.ts -export { auth as middleware } from "@auth" - -// app/api/auth/[...nextauth]/route.ts -import { handlers } from "@auth" -export const { GET, POST } = handlers`, - sveltekit: `// src/auth.ts -import { SvelteKitAuth } from "@auth/sveltekit" -import GitHub from '@auth/sveltekit/providers/github' - -export const { handle } = SvelteKitAuth({ - providers: [GitHub], -}) - -// src/hooks.server.ts -export { handle } from "./auth"`, - express: `// server.ts -import express from "express" -import { ExpressAuth } from "@auth/express" -import GitHub from "@auth/express/providers/github" - -const app = express() - -app.use("/auth/*", ExpressAuth({ providers: [GitHub] }))`, - qwik: `// src/routes/plugin@auth.ts -import { QwikAuth } from "@auth/qwik" -import GitHub from "@auth/qwik/providers/github" -export const { onRequest, useSession } = QwikAuth$(() => ({ providers: [GitHub] }))`, - } - - const tabs = [ - { value: "express", Icon: ExpressIcon, name: "Express" }, - { value: "nextjs", Icon: NextIcon, name: "Next.js" }, - { value: "qwik", Icon: QwikIcon, name: "Qwik" }, - { value: "sveltekit", Icon: SvelteKitIcon, name: "SvelteKit" }, - ] - return (
-
-
- {tabs.map((tab) => ( - - ))} + +
+ + {tabs.map((tab) => ( + + + + ))} + More - +
-
- -
-
-
-
+ + {tabs.map((tab) => ( + +
+
+ + ))} +
) } diff --git a/docs/components/RichTabs/index.tsx b/docs/components/RichTabs/index.tsx index 08fd79759e..f5756b121f 100644 --- a/docs/components/RichTabs/index.tsx +++ b/docs/components/RichTabs/index.tsx @@ -27,7 +27,7 @@ RichTabs.Trigger = function TabsTrigger({ Date: Wed, 27 Aug 2025 06:04:51 -0400 Subject: [PATCH 22/23] Updated index.tsx to remove asterisks --- docs/components/Providers/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/components/Providers/index.tsx b/docs/components/Providers/index.tsx index f37867bda0..29c14223ef 100644 --- a/docs/components/Providers/index.tsx +++ b/docs/components/Providers/index.tsx @@ -5,7 +5,7 @@ export default function Providers() {

- Sign in with * anything * + Sign in with anything

With over 100 popular providers, you can let your users sign in with From 91054fd3dc1b0d1fc9ba784722d09b56dd04d69a Mon Sep 17 00:00:00 2001 From: Aman Meherally Date: Wed, 10 Sep 2025 18:51:38 -0400 Subject: [PATCH 23/23] fix: text sizing --- docs/components/Hero/CodeTabs.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/components/Hero/CodeTabs.tsx b/docs/components/Hero/CodeTabs.tsx index f74b90d062..7f0aad5818 100644 --- a/docs/components/Hero/CodeTabs.tsx +++ b/docs/components/Hero/CodeTabs.tsx @@ -134,7 +134,7 @@ export const CodeTabs = () => { tabKey="framework" className="mt-0 pt-0" > -
+
{tabs.map((tab) => ( { }} />