Merge pull request #36 from workos/nicknisi/v1-compat

Update example app to use v1.0.x and get it working

Author: Paul Asjes

package-lock.json

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

package.json

@@ -5,12 +5,12 @@ export default async function AccountPage() {
   const { user, role, permissions } = await withAuth({ ensureSignedIn: true });
 
   const userFields = [
-    ["First name", user.firstName],
-    ["Last name", user.lastName],
-    ["Email", user.email],
+    ["First name", user?.firstName],
+    ["Last name", user?.lastName],
+    ["Email", user?.email],
     role ? ["Role", role] : [],
     permissions ? ["Permissions", permissions] : [],
-    ["Id", user.id],
+    ["Id", user?.id],
   ].filter((arr) => arr.length > 0);
 
   return (

src/app/account/page.tsx

@@ -0,0 +1,7 @@
+"use server";
+
+import { getSignInUrl } from "@workos-inc/authkit-nextjs";
+
+export const getSignInUrlAction = async () => {
+  return await getSignInUrl();
+};

src/app/actions/getSignInUrl.ts

@@ -0,0 +1,7 @@
+"use server";
+
+import { signOut } from "@workos-inc/authkit-nextjs";
+
+export const handleSignOutAction = async () => {
+  await signOut();
+};

src/app/actions/signOut.ts

@@ -1,9 +1,9 @@
-import { getSession } from "@workos-inc/authkit-nextjs";
-import { NextResponse } from "next/server";
+import { authkit } from "@workos-inc/authkit-nextjs";
+import { NextRequest, NextResponse } from "next/server";
 
-export const GET = async () => {
-  // Use 'getSession' for edge functions that don't have access to headers
-  const session = await getSession();
+export const GET = async (request: NextRequest) => {
+  // Use 'authkit' for edge functions that don't have access to headers
+  const { session } = await authkit(request);
 
   if (!session || !session.user) {
     return NextResponse.json({ error: "User not found" }, { status: 404 });

src/app/api/get-name/route.ts

@@ -1,19 +1,31 @@
-import { getSignInUrl, withAuth, signOut } from "@workos-inc/authkit-nextjs";
+"use client";
+
+/**
+ * Example of a client component using the useAuth hook to get the current user session.
+ */
+
 import { Button, Flex } from "@radix-ui/themes";
+import { useAuth } from "@workos-inc/authkit-nextjs/components";
+import { useEffect, useState } from "react";
+import { getSignInUrlAction } from "../actions/getSignInUrl";
+import { handleSignOutAction } from "../actions/signOut";
+
+export function SignInButton({ large }: { large?: boolean }) {
+  const { user, loading } = useAuth();
+  const [signInUrl, setSignInUrl] = useState<string | undefined>(undefined);
 
-export async function SignInButton({ large }: { large?: boolean }) {
-  const { user } = await withAuth();
-  const authorizationUrl = await getSignInUrl();
+  useEffect(() => {
+    getSignInUrlAction().then(setSignInUrl);
+  }, []);
+
+  if (loading) {
+    return <div>Loading...</div>;
+  }
 
   if (user) {
     return (
       <Flex gap="3">
-        <form
-          action={async () => {
-            "use server";
-            await signOut();
-          }}
-        >
+        <form action={handleSignOutAction}>
           <Button type="submit" size={large ? "3" : "2"}>
             Sign Out
           </Button>
@@ -24,7 +36,7 @@ export async function SignInButton({ large }: { large?: boolean }) {
 
   return (
     <Button asChild size={large ? "3" : "2"}>
-      <a href={authorizationUrl}>Sign In {large && "with AuthKit"}</a>
+      <a href={signInUrl}>Sign In {large && "with AuthKit"}</a>
     </Button>
   );
 }

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

@@ -6,7 +6,10 @@ import NextLink from "next/link";
 import { Theme, Card, Container, Flex, Button, Box } from "@radix-ui/themes";
 import { Footer } from "./components/footer";
 import { SignInButton } from "./components/sign-in-button";
-import { AuthKitProvider, Impersonation } from "@workos-inc/authkit-nextjs";
+import {
+  AuthKitProvider,
+  Impersonation,
+} from "@workos-inc/authkit-nextjs/components";
 
 export const metadata: Metadata = {
   title: "Example AuthKit Authenticated App",
@@ -26,9 +29,8 @@ export default function RootLayout({
           panelBackground="solid"
           style={{ backgroundColor: "var(--gray-1)" }}
         >
-          <Impersonation />
-
           <AuthKitProvider>
+            <Impersonation />
             <Container style={{ backgroundColor: "var(--gray-1)" }}>
               <Flex direction="column" gap="5" p="5" height="100vh">
                 <Box asChild flexGrow="1">