Skip to content

Commit ad14406

Browse files
balazsorban44balazsorban44
committed
docs: improve hero, integrations, mention Qwik
1 parent cfcdeb0 commit ad14406

File tree

5 files changed

+138
-187
lines changed

5 files changed

+138
-187
lines changed

‎docs/components/HeroCode/index.tsx‎

Lines changed: 0 additions & 117 deletions
This file was deleted.

‎docs/pages/getting-started/integrations.mdx‎

Lines changed: 17 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -17,18 +17,23 @@ Here are the state of planned and released integrations under the `@auth/*` and
1717
the years has evolved](/contributors#history) to be framework agnostic.
1818
</Callout>
1919

20-
| Feature | Status |
21-
| ---------------------- | -------------------------------------------------------------------------------- |
22-
| `next-auth` | Released (stable) - [docs](https://nextjs.authjs.dev) |
23-
| `@auth/*-adapter` | Released (stable). Fully compatible with `next-auth` and all `@auth/*` libraries |
24-
| `@next-auth/*-adapter` | Maintenance has stopped. Update to `@auth/*-adapter` |
25-
| `@auth/core` | Released (experimental) |
26-
| `@auth/sveltekit` | Released (experimental) - [docs](https://sveltekit.authjs.dev) |
27-
| `@auth/express` | Released (experimental) - [docs](https://express.authjs.dev) |
28-
| `@auth/solid-start` | Released (experimental) |
29-
| `@auth/remix` | Planned |
30-
| `@auth/astro` | Planned |
31-
| `@auth/nuxt` | Planned |
20+
Framework and database integrations are all based on the [Auth.js Core library](/reference/core). In most cases, you will not interact with this package directly, as it is intended for library authors.
21+
22+
| Frameworks | Status |
23+
| ------------------------------------- | ----------------------------------------------------------------------------------------- |
24+
| NextAuth.js (`next-auth`) | [v5 (beta)](https://nextjs.authjs.dev), [v4 (maintenance mode)](https://next-auth.js.org) |
25+
| Astro Auth (`@auth/astro`) | [Open PR](https://github.com/nextauthjs/next-auth/pull/9856) |
26+
| Express Auth (`@auth/express`) | [Experimental Release](https://express.authjs.dev) |
27+
| Nuxt Auth (`@auth/nuxt`) | [Open PR](https://github.com/nextauthjs/next-auth/pull/10684) |
28+
| Qwik Auth (`@auth/qwik`) | [Released](https://qwik.authjs.dev) |
29+
| Remix Auth (`@auth/remix`) | [Open PR](https://github.com/nextauthjs/next-auth/pull/6767) |
30+
| SolidStart Auth (`@auth/solid-start`) | Experimental Release |
31+
| SvelteKit Auth (`@auth/sveltekit`) | [Experimental Release](https://sveltekit.authjs.dev) |
32+
33+
| Databases | Status |
34+
| ---------------------- | ----------------------------------------------------------------------- |
35+
| `@auth/*-adapter` | Released. Fully compatible with `next-auth` and all `@auth/*` libraries |
36+
| `@next-auth/*-adapter` | Maintenance has stopped. Update to `@auth/*-adapter` |
3237

3338
## Community Integrations
3439

@@ -40,7 +45,6 @@ them and are interested in collaborating, please do not hesitate to reach out!
4045
| ---------- | ------------------------------------------------------------------------------------------- |
4146
| Hono.js | [Auth.js middleware](https://github.com/honojs/middleware/tree/main/packages/auth-js) |
4247
| Rakkas | [Auth.js Integration Example](https://github.com/rakkasjs/rakkasjs/tree/main/examples/auth) |
43-
| Qwik | [Auth.js Integration](https://qwik.builder.io/docs/integrations/authjs/) |
4448
| SolidStart | [`@solid-mediakit/auth`](https://www.npmjs.com/package/@solid-mediakit/auth) |
4549
| Astro | [`auth-astro`](https://github.com/nowaythatworked/auth-astro) |
4650
| Nuxt | [`@sidebase/nuxt-auth`](https://sidebase.io/nuxt-auth/) |

‎docs/pages/index.mdx‎

Lines changed: 104 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,15 @@
11
import Link from "next/link"
2+
import { Pre, Code } from "nextra/components"
23
import Footer from "@/components/Footer"
3-
import { HeroCode } from "@/components/HeroCode"
4+
import { RichTabs } from "@/components/RichTabs"
45
import { LogosMarquee } from "@/components/LogosMarquee"
56
import { Blur } from "@/components/Blur"
67
import { Guides } from "@/components/Guides"
7-
import { Pre, Code } from "nextra/components"
8+
import SvelteKit from "../public/img/etc/sveltekit.svg"
9+
import Express from "../public/img/etc/express.svg"
10+
import Next from "../public/img/etc/nextjs.svg"
11+
import Qwik from "../public/img/etc/qwik.svg"
12+
813
import { CaretRight } from "@/icons"
914

1015
<div className="relative overflow-hidden w-full h-full flex flex-col">
@@ -74,67 +79,110 @@ import { CaretRight } from "@/icons"
7479
<span className="text-xs text-neutral-400">Sponsored</span>
7580
</div>
7681
</div>
77-
<HeroCode>
78-
<HeroCode.Next>
79-
<Pre data-language="tsx" data-copy="">
80-
<Code>
81-
82-
```tsx
83-
// auth.ts
84-
import NextAuth from "next-auth"
85-
import GitHub from "next-auth/providers/github"
86-
export const { auth, handlers } = NextAuth({ providers: [GitHub] })
87-
88-
// middleware.ts
89-
export { auth as middleware } from "@/auth"
90-
91-
// app/api/auth/[...nextauth]/route.ts
92-
import { handlers } from "@/auth"
93-
export const { GET, POST } = handlers
94-
```
95-
96-
</Code>
97-
</Pre>
98-
</HeroCode.Next>
99-
<HeroCode.Svelte>
100-
<Pre data-language="tsx" data-copy="">
101-
<Code>
102-
103-
```tsx
104-
// src/auth.ts
105-
import { SvelteKitAuth } from "@auth/sveltekit"
106-
import GitHub from '@auth/sveltekit/providers/github'
82+
<RichTabs
83+
orientation="horizontal"
84+
tabKey="hero"
85+
defaultValue="nextjs"
86+
className="w-full flex flex-col !py-8 md:!py-16 !m-0 max-w-xl xl:max-w-2xl lg:self-start"
87+
>
88+
<RichTabs.List className="justify-between p-2 rounded-t-lg bg-white/40 backdrop-blur dark:bg-neutral-950/25">
89+
<div className="flex gap-2">
90+
{[
91+
{ value: "express", src: Express, name: "Express" },
92+
{ value: "nextjs", src: Next, name: "Next.js" },
93+
{ value: "qwik", src: Qwik, name: "Qwik" },
94+
{ value: "sveltekit", src: SvelteKit, name: "SvelteKit" },
95+
].map((trigger) => (
96+
<RichTabs.Trigger
97+
key={trigger.value}
98+
title={trigger.name}
99+
value={trigger.value}
100+
orientation="vertical"
101+
className=" !border-0 aria-selected:!bg-violet-600 aria-selected:dark:!bg-violet-900 aria-selected:!text-white dark:bg-neutral-800 bg-white !h-auto !w-auto !flex-row !gap-2 !justify-start p-2 px-3 rounded-md outline-none transition-all duration-300 hover:bg-violet-200 hover:dark:bg-violet-900/20 !font-normal"
102+
>
103+
<img
104+
width="24"
105+
src={trigger.src}
106+
alt={`${trigger.name} Logo`}
107+
className="dark:invert"
108+
/>
109+
</RichTabs.Trigger>
110+
))}
111+
<Link
112+
href="/getting-started/integrations"
113+
className="!border-0 aria-selected:!bg-violet-600 aria-selected:dark:!bg-violet-900 dark:bg-neutral-900 bg-white !h-auto !w-auto !flex-row !gap-2 !justify-start p-2 px-3 rounded-md outline-none transition-all duration-300 flex items-center hover:bg-violet-200 hover:dark:bg-violet-900/20"
114+
>
115+
<span className="hidden text-sm md:block">More</span>
116+
<CaretRight className="size-4" />
117+
</Link>
118+
</div>
119+
<div className="inline-flex gap-2 items-center self-end pr-4 h-12">
120+
<div className="bg-green-300 rounded-full size-4"></div>
121+
<div className="bg-amber-300 rounded-full size-4"></div>
122+
<div className="bg-red-300 rounded-full size-4"></div>
123+
</div>
124+
</RichTabs.List>
125+
<div className="p-2 pt-0 w-full rounded-b-lg shadow-md bg-white/40 backdrop-blur dark:bg-neutral-950/25 [&_div]:border-0 [&_div]:shadow-none [&>div.h-full>div>div>pre]:dark:!bg-neutral-950/60 [&>div.h-full>div>div>pre]:!bg-white/60">
126+
{Object.entries({
127+
nextjs: `\
128+
// auth.ts
129+
import NextAuth from "next-auth"
130+
import GitHub from "next-auth/providers/github"
131+
export const { auth, handlers } = NextAuth({ providers: [GitHub] })
107132
108-
export const { handle } = SvelteKitAuth({
109-
providers: [GitHub],
110-
})
133+
// middleware.ts
134+
export { auth as middleware } from "@/auth"
111135
112-
// src/hooks.server.ts
113-
export { handle } from "./auth"
114-
```
136+
// app/api/auth/[...nextauth]/route.ts
137+
import { handlers } from "@/auth"
138+
export const { GET, POST } = handlers
139+
`,
140+
sveltekit: `\
141+
// src/auth.ts
142+
import { SvelteKitAuth } from "@auth/sveltekit"
143+
import GitHub from '@auth/sveltekit/providers/github'
115144
116-
</Code>
117-
</Pre>
118-
</HeroCode.Svelte>
119-
<HeroCode.Express>
120-
<Pre data-language="tsx" data-copy="">
121-
<Code>
145+
export const { handle } = SvelteKitAuth({
146+
providers: [GitHub],
147+
})
122148
123-
```tsx
124-
// server.ts
125-
import { express } from "express"
126-
import { ExpressAuth } from "@auth/express"
127-
import GitHub from "@auth/express/providers/github"
149+
// src/hooks.server.ts
150+
export { handle } from "./auth"
151+
`,
152+
express: `\
153+
// server.ts
154+
import { express } from "express"
155+
import { ExpressAuth } from "@auth/express"
156+
import GitHub from "@auth/express/providers/github"
128157
129-
const app = express()
158+
const app = express()
130159
131-
app.use("/auth/*", ExpressAuth({ providers: [GitHub] }))
132-
```
160+
app.use("/auth/\*", ExpressAuth({ providers: [GitHub] }))
161+
`,
162+
qwik: `\
163+
// src/routes/[email protected]
164+
import { QwikAuth } from "@auth/qwik"
165+
import GitHub from "@auth/qwik/providers/github"
166+
export const { onRequest, useSession } = QwikAuth$(() => ({ providers: [GitHub] }))
167+
`
168+
}).map(([key, code]) =>
133169

134-
</Code>
135-
</Pre>
136-
</HeroCode.Express>
137-
</HeroCode>
170+
<RichTabs.Content
171+
key={key}
172+
orientation="vertical"
173+
value={key}
174+
className="h-full"
175+
tabIndex={-1}
176+
>
177+
<Pre data-language="tsx" data-copy="">
178+
<Code data-language="tsx">
179+
{code}
180+
</Code>
181+
</Pre>
182+
</RichTabs.Content>
183+
)}
184+
</div>
185+
</RichTabs>
138186

139187
</section>
140188
<Guides />

‎docs/public/img/etc/qwik.svg‎

Lines changed: 16 additions & 0 deletions
Loading

‎packages/frameworks-qwik/src/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,8 @@
1818
*
1919
* Create a `[email protected]` file in the routes folder
2020
*
21-
* import GitHub from "@auth/qwik/providers/github"
2221
* import { QwikAuth$ } from "@auth/qwik"
22+
* import GitHub from "@auth/qwik/providers/github"
2323
*
2424
* export const {
2525
* onRequest, useSession, useSignIn, useSignOut

0 commit comments

Comments
 (0)