Use new session management (#13)

* Hypothetical accessToken/refreshToken example

* Real-life refresh example

* Updated workos-node and cleaned code a bit

* Fix missing import

* Reorganized and added comments

* Shape NextJS sdk API/usage

* Implement feedback

* Fix how we handle an error in the callback

* Use new package

* Use latest version

* Use latest version

* Update package.json

---------

Co-authored-by: Cameron Matheson <[email protected]>
Co-authored-by: Paul Asjes <[email protected]>

Author: 3 people

.env.local.example

@@ -1,7 +1,5 @@
-# Available in your WorkOS dashboard
 WORKOS_CLIENT_ID=
 WORKOS_API_KEY=
 WORKOS_REDIRECT_URI=http://localhost:3000/callback
+WORKOS_COOKIE_PASSWORD=
 
-# Your JWT secret key
-JWT_SECRET_KEY=

package-lock.json

@@ -6,14 +6,16 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "reset": "rm -rf node_modules && rm -rf .next && npm i",
+    "start-local-dev": "rm -rf .next && npm run prepare && npm run dev",
+    "lint": "next lint",
+    "prepare": "relative-deps"
   },
   "dependencies": {
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/themes": "^2.0.1",
-    "@workos-inc/node": "^5.0.0",
-    "jose": "^5.1.1",
-    "next": "14.0.1",
+    "@workos-inc/nextjs": "0.1.0",
+    "next": "14.1.3",
     "react": "^18",
     "react-dom": "^18"
   },
@@ -23,6 +25,10 @@
     "@types/react-dom": "^18",
     "eslint": "^8",
     "eslint-config-next": "14.0.1",
+    "relative-deps": "^1.0.7",
     "typescript": "^5"
+  },
+  "relativeDependencies": {
+    
   }
 }

package.json

@@ -1,10 +1,10 @@
-import { getUser } from "../../auth";
+import { getUser } from "@workos-inc/nextjs";
 import { Text, Heading, TextFieldInput, Flex, Box } from "@radix-ui/themes";
 
 export default async function AccountPage() {
-  const { user } = await getUser();
+  const { user } = await getUser({ ensureSignedIn: true });
 
-  const userFields = user && [
+  const userFields = [
     ["First name", user.firstName],
     ["Last name", user.lastName],
     ["Email", user.email],

src/app/account/page.tsx

@@ -1,55 +1 @@
-import { SignJWT } from "jose";
-import { NextRequest, NextResponse } from "next/server";
-import { getJwtSecretKey, workos, getClientId } from "../../auth";
-
-export async function GET(request: NextRequest) {
-  const code = request.nextUrl.searchParams.get("code");
-
-  if (code) {
-    try {
-      // Use the code returned to us by AuthKit and authenticate the user with WorkOS
-      const { user } = await workos.userManagement.authenticateWithCode({
-        clientId: getClientId(),
-        code,
-      });
-
-      // Create a JWT token with the user's information
-      const token = await new SignJWT({
-        // Here you might lookup and retrieve user details from your database
-        user,
-      })
-        .setProtectedHeader({ alg: "HS256", typ: "JWT" })
-        .setIssuedAt()
-        .setExpirationTime("1h")
-        .sign(getJwtSecretKey());
-
-      const url = request.nextUrl.clone();
-
-      // Cleanup params
-      url.searchParams.delete("code");
-
-      // Redirect to the requested path and store the session
-      url.pathname = "/";
-      const response = NextResponse.redirect(url);
-
-      response.cookies.set({
-        name: "token",
-        value: token,
-        path: "/",
-        httpOnly: true,
-        secure: true,
-        sameSite: "lax",
-      });
-
-      return response;
-    } catch (error) {
-      const errorRes = {
-        error: error instanceof Error ? error.message : String(error),
-      };
-      console.error(errorRes);
-      return NextResponse.redirect(new URL("/error", request.url));
-    }
-  }
-
-  return NextResponse.redirect(new URL("/error", request.url));
-}
+export { authkitCallbackRoute as GET } from "@workos-inc/nextjs";

src/app/callback/route.ts

@@ -1,17 +1,17 @@
-import { clearCookie, getAuthorizationUrl, getUser } from "../../auth";
+import { getSignInUrl, getUser, signOut } from "@workos-inc/nextjs";
 import { Button, Flex } from "@radix-ui/themes";
 
 export async function SignInButton({ large }: { large?: boolean }) {
-  const { isAuthenticated } = await getUser();
-  const authorizationUrl = await getAuthorizationUrl();
+  const { user } = await getUser();
+  const authorizationUrl = await getSignInUrl();
 
-  if (isAuthenticated) {
+  if (user) {
     return (
       <Flex gap="3">
         <form
           action={async () => {
             "use server";
-            await clearCookie();
+            await signOut();
           }}
         >
           <Button type="submit" size={large ? "3" : "2"}>

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

@@ -1,14 +1,13 @@
-import { Button, Flex, Heading, Text } from "@radix-ui/themes";
 import NextLink from "next/link";
+import { getUser } from "@workos-inc/nextjs";
+import { Button, Flex, Heading, Text } from "@radix-ui/themes";
 import { SignInButton } from "./components/sign-in-button";
-import { getUser } from "../auth";
 
 export default async function HomePage() {
-  const { isAuthenticated, user } = await getUser();
-
+  const { user } = await getUser();
   return (
     <Flex direction="column" align="center" gap="2">
-      {isAuthenticated ? (
+      {user ? (
         <>
           <Heading size="8">
             Welcome back{user?.firstName && `, ${user?.firstName}`}

src/app/error/page.tsx

@@ -1,24 +1,6 @@
-import { NextRequest, NextResponse } from "next/server";
-import { getAuthorizationUrl, verifyJwtToken } from "./auth";
+import { authkitMiddleware } from "@workos-inc/nextjs";
 
-export async function middleware(request: NextRequest) {
-  const { cookies } = request;
-  const { value: token } = cookies.get("token") ?? { value: null };
+export default authkitMiddleware();
 
-  const hasVerifiedToken = token && (await verifyJwtToken(token));
-
-  // Redirect unauthenticated users to the AuthKit flow
-  if (!hasVerifiedToken) {
-    const authorizationUrl = await getAuthorizationUrl();
-    const response = NextResponse.redirect(authorizationUrl);
-
-    response.cookies.delete("token");
-
-    return response;
-  }
-
-  return NextResponse.next();
-}
-
-// Match against the account page
-export const config = { matcher: ["/account/:path*"] };
+// Match against the pages
+export const config = { matcher: ["/", "/account/:path*"] };