docs: add Qwik documentation (#11346)

* feat: add Qwik getting started

* feat: add QwikCode

* feat: update providers with Qwik code

* feat: update adapters with Qwik code

* fix: update dev example

* fix: update OAuthProviderInstructions

* feat: update guides pages with Qwik code

* feat: update getting-started with Qwik code

Author: gioboa

apps/dev/qwik/src/routes/index.tsx

@@ -19,14 +19,14 @@ export default component$(() => {
         <input type="hidden" name="providerId" value="github" />
         <input
           type="hidden"
-          name="options.callbackUrl"
+          name="options.redirectTo"
           value="http://qwik-auth-example.com/dashboard"
         />
         <button>Sign In</button>
       </Form>
       Session: {JSON.stringify(session.value)}
       <br />
-      <button onClick$={() => signOut.submit({ callbackUrl: "/" })}>
+      <button onClick$={() => signOut.submit({ redirectTo: "/" })}>
         Sign Out
       </button>
     </>

docs/components/Code/index.tsx

@@ -1,5 +1,5 @@
-import { useThemeConfig } from "nextra-theme-docs"
 import { useRouter } from "next/router"
+import { useThemeConfig } from "nextra-theme-docs"
 import { Tabs } from "nextra/components"
 import React, { Children, useEffect, useState } from "react"
 
@@ -14,9 +14,11 @@ Code.NextClient = NextClientCode
 Code.Svelte = SvelteCode
 // Code.Solid = SolidCode;
 Code.Express = ExpressCode
+Code.Qwik = QwikCode
 
 const baseFrameworks = {
   [NextCode.name]: "Next.js",
+  [QwikCode.name]: "Qwik",
   [SvelteCode.name]: "SvelteKit",
   [ExpressCode.name]: "Express",
   // [SolidCode.name]: "SolidStart",
@@ -25,6 +27,7 @@ const baseFrameworks = {
 const allFrameworks = {
   [NextCode.name]: "Next.js",
   [NextClientCode.name]: "Next.js (Client)",
+  [QwikCode.name]: "Qwik",
   [SvelteCode.name]: "SvelteKit",
   // [SolidCode.name]: "SolidStart",
   [ExpressCode.name]: "Express",
@@ -124,3 +127,7 @@ function SvelteCode({ children }: ChildrenProps) {
 function ExpressCode({ children }: ChildrenProps) {
   return <Tabs.Tab>{children}</Tabs.Tab>
 }
+
+function QwikCode({ children }: ChildrenProps) {
+  return <Tabs.Tab>{children}</Tabs.Tab>
+}

docs/components/OAuthProviderInstructions/content/components/SetupCode.tsx

@@ -49,6 +49,26 @@ export const { GET, POST } = handlers
           }}
         />
       </Code.Next>
+      <Code.Qwik>
+        We recommend setting up your configuration in{" "}
+        <code>/src/routes/[email protected]</code> file.
+        <Pre
+          data-filename="/src/routes/[email protected]"
+          data-theme="default"
+          data-copy=""
+          data-language="tsx"
+          icon={TSIcon}
+          dangerouslySetInnerHTML={{
+            __html: highlight(`
+import { SvelteKitAuth } from "@auth/sveltekit"
+import ${providerName} from "@auth/sveltekit/providers/${providerId}"
+
+export const { handle, signIn, signOut } = SvelteKitAuth({
+  providers: [${providerName}],
+}) `),
+          }}
+        />
+      </Code.Qwik>
       <Code.Svelte>
         In SvelteKit you should also setup your Auth.js configuration in a file
         at <code>/src/auth.ts</code>.

docs/components/OAuthProviderInstructions/content/components/SignInCode.tsx

@@ -37,6 +37,49 @@ export function SignIn() {
           }}
         />
       </Code.Next>
+      <Code.Qwik>
+        With Qwik we can do a server-side login with Form action, or a more
+        simple client-side login via submit method.
+        <Pre
+          data-filename="./components/sign-in.tsx"
+          data-theme="default"
+          data-copy=""
+          data-language="tsx"
+          icon={TSIcon}
+          dangerouslySetInnerHTML={{
+            __html: highlight(`
+import { component$ } from "@builder.io/qwik"
+import { Form } from "@builder.io/qwik-city"
+import { useSignIn } from "./plugin@auth"
+
+export default component$(() => {
+  const signInSig = useSignIn()
+
+  return (
+    <>
+      {/* server-side login with Form action */}
+      <Form action={signInSig}>
+        <input type="hidden" name="providerId" value="${providerId}" />
+        <input
+          type="hidden"
+          name="options.redirectTo"
+          value="/"
+        />
+        <button>Sign In</button>
+      </Form>
+
+      {/* submit method */}
+      <Link
+        onClick$={() => signInSig.submit({ redirectTo: "/" })}
+      >
+        SignIn
+      </Link>
+    </>
+  )
+}) `),
+          }}
+        />
+      </Code.Qwik>
       <Code.Svelte>
         With SvelteKit we can do a server-side login with Form Actions, or a
         more simple client-side login via links and redirects.

docs/components/OAuthProviderInstructions/content/index.tsx

@@ -75,6 +75,13 @@ export function OAuthInstructions({ providerId, disabled = false }: Props) {
             </NXCode>
           </Pre>
         </Code.Next>
+        <Code.Qwik>
+          <Pre data-copy="">
+            <NXCode>
+              <span>{`[origin]/auth/callback/${providerId}`}</span>
+            </NXCode>
+          </Pre>
+        </Code.Qwik>
         <Code.Svelte>
           <Pre data-copy="">
             <NXCode>
@@ -119,6 +126,20 @@ AUTH_${providerId.toUpperCase().replace(/-/gi, "_")}_SECRET={CLIENT_SECRET}
             }}
           />
         </Code.Next>
+        <Code.Qwik>
+          <Pre
+            data-copy=""
+            data-filename=".env.local"
+            dangerouslySetInnerHTML={{
+              __html: highlight(
+                `
+AUTH_${providerId.toUpperCase().replace(/-/gi, "_")}_ID={CLIENT_ID}
+AUTH_${providerId.toUpperCase().replace(/-/gi, "_")}_SECRET={CLIENT_SECRET}
+`
+              ),
+            }}
+          />
+        </Code.Qwik>
         <Code.Svelte>
           <Pre
             data-copy=""

docs/pages/getting-started/adapters/azure-tables.mdx

@@ -58,6 +58,32 @@ export const { handlers, auth, signIn, signOut } = NextAuth({
 ```
 
 </Code.Next>
+<Code.Qwik>
+
+```ts filename="/src/routes/[email protected]"
+import { QwikAuth$ } from "@auth/qwik"
+import { TableStorageAdapter } from "@auth/azure-tables-adapter"
+import { AzureNamedKeyCredential, TableClient } from "@azure/data-tables"
+
+const credential = new AzureNamedKeyCredential(
+  import.meta.env.AUTH_AZURE_ACCOUNT,
+  import.meta.env.AUTH_AZURE_ACCESS_KEY
+)
+const authClient = new TableClient(
+  import.meta.env.AUTH_AZURE_TABLES_ENDPOINT,
+  "auth",
+  credential
+)
+
+export const { onRequest, useSession, useSignIn, useSignOut } = QwikAuth$(
+  () => ({
+    providers: [],
+    adapter: TableStorageAdapter(authClient),
+  })
+)
+```
+
+</Code.Qwik>
 <Code.Svelte>
 
 ```ts filename="./src/auth.ts"

docs/pages/getting-started/adapters/d1.mdx

@@ -37,6 +37,21 @@ export const { handlers, auth, signIn, signOut } = NextAuth({
 ```
 
 </Code.Next>
+<Code.Qwik>
+
+```ts filename="/src/routes/[email protected]"
+import { QwikAuth$ } from "@auth/qwik"
+import { D1Adapter } from "@auth/d1-adapter"
+
+export const { onRequest, useSession, useSignIn, useSignOut } = QwikAuth$(
+  () => ({
+    providers: [],
+    adapter: D1Adapter(env.db),
+  })
+)
+```
+
+</Code.Qwik>
 <Code.Svelte>
 
 ```ts filename="./src/auth.ts"

docs/pages/getting-started/adapters/dgraph.mdx

@@ -46,6 +46,27 @@ export const { handlers, auth, signIn, signOut } = NextAuth({
 ```
 
 </Code.Next>
+<Code.Qwik>
+
+```ts filename="/src/routes/[email protected]"
+import { QwikAuth$ } from "@auth/qwik"
+import { DgraphAdapter } from "@auth/dgraph-adapter"
+
+export const { onRequest, useSession, useSignIn, useSignOut } = QwikAuth$(
+  () => ({
+    providers: [],
+    adapter: DgraphAdapter({
+      endpoint: import.meta.env.DGRAPH_GRAPHQL_ENDPOINT,
+      authToken: import.meta.env.DGRAPH_GRAPHQL_KEY,
+      // you can omit the following properties if you are running an unsecure schema
+      authHeader: import.meta.env.AUTH_HEADER, // default: "Authorization",
+      jwtSecret: import.meta.env.SECRET,
+    }),
+  })
+)
+```
+
+</Code.Qwik>
 <Code.Svelte>
 
 ```ts filename="./src/auth.ts"

docs/pages/getting-started/adapters/drizzle.mdx

@@ -369,6 +369,22 @@ export const { handlers, auth, signIn, signOut } = NextAuth({
 ```
 
 </Code.Next>
+<Code.Qwik>
+
+```ts filename="/src/routes/[email protected]"
+import { QwikAuth$ } from "@auth/qwik"
+import { DrizzleAdapter } from "@auth/drizzle-adapter"
+import { db } from "./schema.ts"
+
+export const { onRequest, useSession, useSignIn, useSignOut } = QwikAuth$(
+  () => ({
+    providers: [],
+    adapter: DrizzleAdapter(db),
+  })
+)
+```
+
+</Code.Qwik>
 <Code.Svelte>
 
 ```ts filename="./src/auth.ts"

docs/pages/getting-started/adapters/dynamodb.mdx

@@ -67,6 +67,39 @@ export const { handlers, auth, signIn, signOut } = NextAuth({
 ```
 
 </Code.Next>
+<Code.Qwik>
+
+```ts filename="/src/routes/[email protected]"
+import { QwikAuth$ } from "@auth/qwik"
+import { DynamoDB, DynamoDBClientConfig } from "@aws-sdk/client-dynamodb"
+import { DynamoDBDocument } from "@aws-sdk/lib-dynamodb"
+import { DynamoDBAdapter } from "@auth/dynamodb-adapter"
+
+const config: DynamoDBClientConfig = {
+  credentials: {
+    accessKeyId: import.meta.env.AUTH_DYNAMODB_ID,
+    secretAccessKey: import.meta.env.AUTH_DYNAMODB_SECRET,
+  },
+  region: import.meta.env.AUTH_DYNAMODB_REGION,
+}
+
+const client = DynamoDBDocument.from(new DynamoDB(config), {
+  marshallOptions: {
+    convertEmptyValues: true,
+    removeUndefinedValues: true,
+    convertClassInstanceToMap: true,
+  },
+})
+
+export const { onRequest, useSession, useSignIn, useSignOut } = QwikAuth$(
+  () => ({
+    providers: [],
+    adapter: DynamoDBAdapter(client),
+  })
+)
+```
+
+</Code.Qwik>
 <Code.Svelte>
 
 ```ts filename="./src/auth.ts"