Merge pull request #33 from workos/pma/update-authkit-nextjs

Bump authkit-nextjs and add example for edge functions

Author: Paul Asjes

package.json

@@ -14,7 +14,7 @@
   "dependencies": {
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/themes": "^3.0.1",
-    "@workos-inc/authkit-nextjs": "^0.10.0",
+    "@workos-inc/authkit-nextjs": "^0.11.0",
     "next": "^14.2.5",
     "react": "^18",
     "react-dom": "^18"

src/api/get-name/route.ts

@@ -0,0 +1,9 @@
+import { getSession } from "@workos-inc/authkit-nextjs";
+import { NextResponse } from "next/server";
+
+export const GET = async () => {
+  // Use 'getSession' for edge functions that don't have access to headers
+  const { user } = await getSession();
+
+  return NextResponse.json({ name: user.firstName });
+};

src/app/account/page.tsx

@@ -1,8 +1,8 @@
-import { getUser } from "@workos-inc/authkit-nextjs";
+import { withAuth } from "@workos-inc/authkit-nextjs";
 import { Text, Heading, TextField, Flex, Box } from "@radix-ui/themes";
 
 export default async function AccountPage() {
-  const { user, role, permissions } = await getUser({ ensureSignedIn: true });
+  const { user, role, permissions } = await withAuth({ ensureSignedIn: true });
 
   const userFields = [
     ["First name", user.firstName],

src/app/components/sign-in-button.tsx

@@ -1,8 +1,8 @@
-import { getSignInUrl, getUser, signOut } from "@workos-inc/authkit-nextjs";
+import { getSignInUrl, withAuth, signOut } from "@workos-inc/authkit-nextjs";
 import { Button, Flex } from "@radix-ui/themes";
 
 export async function SignInButton({ large }: { large?: boolean }) {
-  const { user } = await getUser();
+  const { user } = await withAuth();
   const authorizationUrl = await getSignInUrl();
 
   if (user) {

src/app/page.tsx

@@ -1,10 +1,10 @@
 import NextLink from "next/link";
-import { getUser } from "@workos-inc/authkit-nextjs";
+import { withAuth } from "@workos-inc/authkit-nextjs";
 import { Button, Flex, Heading, Text } from "@radix-ui/themes";
 import { SignInButton } from "./components/sign-in-button";
 
 export default async function HomePage() {
-  const { user } = await getUser();
+  const { user } = await withAuth();
   return (
     <Flex direction="column" align="center" gap="2">
       {user ? (