diff --git a/examples/with-clerk/.env.local.example b/examples/with-clerk/.env.local.example
index e705ee7b6e6d9..edf6a77dade12 100644
--- a/examples/with-clerk/.env.local.example
+++ b/examples/with-clerk/.env.local.example
@@ -1,2 +1,3 @@
-NEXT_PUBLIC_CLERK_FRONTEND_API=your-frontend-api
-CLERK_API_KEY=your-api-key
\ No newline at end of file
+NEXT_PUBLIC_CLERK_FRONTEND_API=your_clerk_frontend_api
+CLERK_API_KEY=your_clerk_api_key
+CLERK_JWT_KEY=your_clerk_jwt_key
\ No newline at end of file
diff --git a/examples/with-clerk/middleware.js b/examples/with-clerk/middleware.js
new file mode 100644
index 0000000000000..19bcf24b9db54
--- /dev/null
+++ b/examples/with-clerk/middleware.js
@@ -0,0 +1,10 @@
+import { withClerkMiddleware } from '@clerk/nextjs/server'
+import { NextResponse } from 'next/server'
+
+export default withClerkMiddleware((_req) => {
+  return NextResponse.next()
+})
+
+export const config = {
+  matcher: ['/api/getAuthenticatedUserId'],
+}
diff --git a/examples/with-clerk/package.json b/examples/with-clerk/package.json
index 67da8b5fee903..0aa35086f902a 100644
--- a/examples/with-clerk/package.json
+++ b/examples/with-clerk/package.json
@@ -6,9 +6,9 @@
     "start": "next start"
   },
   "dependencies": {
-    "@clerk/nextjs": "1.0.1",
+    "@clerk/nextjs": "4.5.1",
     "next": "latest",
-    "react": "17.0.2",
-    "react-dom": "17.0.2"
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
   }
 }
diff --git a/examples/with-clerk/pages/api/getAuthenticatedUserId.js b/examples/with-clerk/pages/api/getAuthenticatedUserId.js
index 916f87b15db7e..998dd9d9dd95a 100644
--- a/examples/with-clerk/pages/api/getAuthenticatedUserId.js
+++ b/examples/with-clerk/pages/api/getAuthenticatedUserId.js
@@ -1,10 +1,9 @@
-import { withSession } from '@clerk/nextjs/api'
+import { getAuth } from '@clerk/nextjs/server'
 
-export default withSession((req, res) => {
-  res.statusCode = 200
-  if (req.session) {
-    res.json({ id: req.session.userId })
-  } else {
-    res.json({ id: null })
+export default function handler(req, res) {
+  const { sessionId, userId } = getAuth(req)
+  if (!sessionId) {
+    return res.status(401).json({ id: null })
   }
-})
+  return res.status(200).json({ id: userId })
+}
diff --git a/examples/with-clerk/pages/index.js b/examples/with-clerk/pages/index.js
index 5797c01afb883..87f2b3eecbe43 100644
--- a/examples/with-clerk/pages/index.js
+++ b/examples/with-clerk/pages/index.js
@@ -40,16 +40,15 @@ const SignupLink = () => (
   </Link>
 )
 
-const apiSample = `import { withSession } from '@clerk/nextjs/api'
+const apiSample = `import { getAuth } from '@clerk/nextjs/server'
 
-export default withSession((req, res) => {
-  res.statusCode = 200
-  if (req.session) {
-    res.json({ id: req.session.userId })
-  } else {
-    res.json({ id: null })
+export default function handler(req, res) {
+  const { sessionId, userId } = getAuth(req);
+  if (!sessionId) {
+    return res.status(401).json({ id: null });
   }
-})`
+  return res.status(200).json({ id: userId });
+}`
 
 // Main component using <SignedIn> & <SignedOut>.
 //