🔄 Synced local '.' with remote 'apps/examples/nextjs'

Author: balazsorban44

.env.local.example

@@ -16,4 +16,6 @@ AUTH_GOOGLE_SECRET=
 AUTH_TWITTER_ID=
 AUTH_TWITTER_SECRET=
 
+# THIRD_PARTY_API_EXAMPLE_BACKEND= # Read more at https://authjs.dev/guides/integrating-third-party-backends
+
 # AUTH_TRUST_HOST=1 # Read more at https://authjs.dev/getting-started/deployment#auth_trust_host

app/[...proxy]/route.tsx

@@ -0,0 +1,34 @@
+import { auth } from "@/auth"
+import { NextRequest } from "next/server"
+
+// Review if we need this, and why
+function stripContentEncoding(result: Response) {
+  const responseHeaders = new Headers(result.headers)
+  responseHeaders.delete("content-encoding")
+
+  return new Response(result.body, {
+    status: result.status,
+    statusText: result.statusText,
+    headers: responseHeaders,
+  })
+}
+
+export async function handler(request: NextRequest) {
+  const session = await auth()
+
+  const headers = new Headers(request.headers)
+  headers.set("Authorization", `Bearer ${session?.accessToken}`)
+
+  let backendUrl =
+    process.env.THIRD_PARTY_API_EXAMPLE_BACKEND ??
+    "https://authjs-third-party-backend.authjs.dev/"
+
+  let url = request.nextUrl.href.replace(request.nextUrl.origin, backendUrl)
+  let result = await fetch(url, { headers, body: request.body })
+  console.log("fetched", result)
+  return stripContentEncoding(result)
+}
+
+export const dynamic = "force-dynamic"
+
+export { handler as GET, handler as POST }

auth.ts

@@ -1,4 +1,5 @@
 import NextAuth from "next-auth"
+import "next-auth/jwt"
 
 import Apple from "next-auth/providers/apple"
 import Auth0 from "next-auth/providers/auth0"
@@ -76,11 +77,30 @@ export const config = {
       if (pathname === "/middleware-example") return !!auth
       return true
     },
-    jwt({ token, trigger, session }) {
+    jwt({ token, trigger, session, account }) {
       if (trigger === "update") token.name = session.user.name
+      if (account?.provider === "keycloak") {
+        return { ...token, accessToken: account.access_token }
+      }
       return token
     },
+    async session({ session, token }) {
+      session.accessToken = token.accessToken
+      return session
+    },
   },
 } satisfies NextAuthConfig
 
 export const { handlers, auth, signIn, signOut } = NextAuth(config)
+
+declare module "next-auth" {
+  interface Session {
+    accessToken?: string
+  }
+}
+
+declare module "next-auth/jwt" {
+  interface JWT {
+    accessToken?: string
+  }
+}

components/client-example.tsx

@@ -43,6 +43,17 @@ const UpdateForm = () => {
 
 export default function ClientExample() {
   const { data: session, status } = useSession()
+  const [apiResponse, setApiResponse] = useState("")
+
+  const makeRequestWithToken = async () => {
+    try {
+      const response = await fetch("/api/authenticated/greeting")
+      const data = await response.json()
+      setApiResponse(JSON.stringify(data, null, 2))
+    } catch (error) {
+      setApiResponse("Failed to fetch data: " + error)
+    }
+  }
 
   return (
     <div className="flex flex-col gap-4">
@@ -71,6 +82,34 @@ export default function ClientExample() {
         to provide the session data.
       </p>
 
+      <div>
+        <h2 className="text-xl font-bold">Third-party backend integration</h2>
+        <p>
+          Press the button below to send a request to our{" "}
+          <CustomLink href="https://github.com/nextauthjs/authjs-third-party-backend">
+            <code>example backend</code>
+          </CustomLink>
+          .
+        </p>
+        <div className="flex flex-col ">
+          <p>Note: This example only works when using the Keycloak provider.</p>
+          <Button
+            disabled={!session?.accessToken}
+            className="mt-4 mb-4"
+            onClick={makeRequestWithToken}
+          >
+            Make API Request
+          </Button>
+        </div>
+        <p>
+          Read more{" "}
+          <CustomLink href="https://authjs.dev/guides/integrating-third-party-backends">
+            <code>here</code>
+          </CustomLink>
+        </p>
+        <pre>{apiResponse}</pre>
+      </div>
+
       {status === "loading" ? (
         <div>Loading...</div>
       ) : (