Upgrade to Next 14, simplify code

Author: andy-hook

.env.local.example

@@ -2,6 +2,5 @@
 WORKOS_CLIENT_ID=
 WORKOS_API_KEY=
 
-# The endpoint that WorkOS will redirect to after a user authenticates
-WORKOS_REDIRECT_URI="http://localhost:3000/api/callback"
-JWT_SECRET_KEY="your_secret_here"
+# Your JWT secret key
+JWT_SECRET_KEY=

next.config.js

@@ -1,8 +1,4 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {
-  experimental: {
-    serverActions: true,
-  },
-};
+const nextConfig = {};
 
 module.exports = nextConfig;

package-lock.json

@@ -17,7 +17,7 @@
     "eslint": "8.49.0",
     "eslint-config-next": "13.4.19",
     "jose": "^4.14.6",
-    "next": "13.4.19",
+    "next": "^14.0.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-query": "^3.39.3",

package.json

@@ -1,7 +1,7 @@
+import { getUser } from "../../auth";
 import { Text, Heading, TextFieldInput, Flex, Box } from "@radix-ui/themes";
-import { getUser } from "../actions";
 
-export default async function ProtectedPage() {
+export default async function AccountPage() {
   const { user } = await getUser();
 
   const userFields = user && [
@@ -37,7 +37,7 @@ export default async function ProtectedPage() {
                 </Text>
 
                 <Box grow="1">
-                  <TextFieldInput value={String(value)} readOnly />
+                  <TextFieldInput value={value || ""} readOnly />
                 </Box>
               </label>
             </Flex>

src/app/account/page.tsx

@@ -1,6 +1,6 @@
 import { SignJWT } from "jose";
 import { NextRequest, NextResponse } from "next/server";
-import { getJwtSecretKey, workos } from "@/libs/auth";
+import { getJwtSecretKey, workos, getClientId } from "../../../auth";
 
 export async function GET(request: NextRequest) {
   const code = request.nextUrl.searchParams.get("code");
@@ -9,27 +9,27 @@ export async function GET(request: NextRequest) {
     try {
       // Use the code returned to us by AuthKit and authenticate the user with WorkOS
       const { user } = await workos.users.authenticateWithCode({
-        clientId: process.env.WORKOS_CLIENT_ID || "",
+        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 a database
+        // Here you might lookup and retrieve user details from your database
         user,
       })
-        .setProtectedHeader({ alg: "HS256" })
+        .setProtectedHeader({ alg: "HS256", typ: "JWT" })
         .setIssuedAt()
         .setExpirationTime("1h")
         .sign(getJwtSecretKey());
 
       const url = request.nextUrl.clone();
 
-      // Cleanup params from redirect
+      // Cleanup params
       url.searchParams.delete("code");
-      url.pathname = "/";
 
-      // Redirect to home page and store the session cookie
+      // Redirect to the requested path and store the session
+      url.pathname = "/";
       const response = NextResponse.redirect(url);
 
       response.cookies.set({
@@ -41,9 +41,11 @@ export async function GET(request: NextRequest) {
 
       return response;
     } catch (error) {
-      return NextResponse.json({ success: false });
+      return NextResponse.json(error);
     }
   }
 
-  return NextResponse.json({ success: false });
+  return NextResponse.json({
+    error: "No authorization code was received from AuthKit",
+  });
 }