add new AuthKit docs

Author: nicknisi

npm-packages/docs/docs/auth/authkit.mdx

@@ -0,0 +1,22 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { AuthKitProvider, useAuth } from "@workos-inc/authkit-react";
+import { ConvexReactClient } from "convex/react";
+import { ConvexProviderWithAuthKit } from "convex/react-authkit";
+import "./index.css";
+import App from "./App.tsx";
+
+const convex = new ConvexReactClient(import.meta.env.VITE_CONVEX_URL);
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <AuthKitProvider
+      clientId={import.meta.env.VITE_WORKOS_CLIENT_ID}
+      redirectUri={import.meta.env.VITE_WORKOS_REDIRECT_URI}
+    >
+      <ConvexProviderWithAuthKit client={convex} useAuth={useAuth}>
+        <App />
+      </ConvexProviderWithAuthKit>
+    </AuthKitProvider>
+  </StrictMode>,
+);

npm-packages/docs/static/screenshots/workos-authkit-navigation.png

@@ -0,0 +1,22 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { AuthKitProvider, useAuth } from "@workos-inc/authkit-react";
+import { ConvexReactClient } from "convex/react";
+import { ConvexProviderWithAuthKit } from "convex/react-authkit";
+import "./index.css";
+import App from "./App.tsx";
+
+const convex = new ConvexReactClient(import.meta.env.VITE_CONVEX_URL);
+
+createRoot(document.getElementById("root")).render(
+  <StrictMode>
+    <AuthKitProvider
+      clientId={import.meta.env.VITE_WORKOS_CLIENT_ID}
+      redirectUri={import.meta.env.VITE_WORKOS_REDIRECT_URI}
+    >
+      <ConvexProviderWithAuthKit client={convex} useAuth={useAuth}>
+        <App />
+      </ConvexProviderWithAuthKit>
+    </AuthKitProvider>
+  </StrictMode>,
+);

npm-packages/docs/static/screenshots/workos-client-id.png

@@ -0,0 +1,19 @@
+import { v } from 'convex/values';
+import { query } from './_generated/server';
+
+export const listNumbers = query({
+  args: {
+    count: v.number(),
+  },
+  handler: async (ctx, args) => {
+    const numbers = await ctx.db
+      .query('numbers')
+      // Ordered by _creationTime, return most recent
+      .order('desc')
+      .take(args.count);
+    return {
+      viewer: (await ctx.auth.getUserIdentity())?.name ?? null,
+      numbers: numbers.reverse().map((number) => number.value),
+    };
+  },
+});