Apple oauth form handler needs edge runtime setting

timothymiller · Dec 28, 2023 · 586dd6e · 586dd6e
1 parent 325b5e5
commit 586dd6e
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 7 deletions.
diff --git a/apps/next/middleware.ts b/apps/next/middleware.ts
@@ -1,7 +1,11 @@
 import { NextResponse } from 'next/server'
 import type { NextRequest } from 'next/server'
 
-// This function can be marked `async` if using `await` inside
+// Apple will POST form data to the redirect URI when scopes have been requested
+// This middleware enables getting the posted form data out of the request body
+// and sets it as JSON to a custom header which is then extracted in the
+// pages/oauth/[provider].tsx route component's getServerSideProps function
+// @link https://developer.apple.com/documentation/sign_in_with_apple/request_an_authorization_to_the_sign_in_with_apple_server
 export async function middleware(request: NextRequest) {
   if (request.method === 'POST' && request.body) {
     try {

diff --git a/apps/next/pages/oauth/[provider].tsx b/apps/next/pages/oauth/[provider].tsx
@@ -1,7 +1,10 @@
 import { OAuthSignInScreen, OAuthSignInScreenProps } from 'app/features/oauth/screen'
 import Head from 'next/head'
 
+// Apple will POST form data to the redirect URI when scopes have been requested
+// @link https://developer.apple.com/documentation/sign_in_with_apple/request_an_authorization_to_the_sign_in_with_apple_server
 export { getServerSideProps } from 'app/features/oauth/screen'
+export const runtime = 'experimental-edge'
 
 export default function Page(props: OAuthSignInScreenProps) {
   return (

diff --git a/packages/api/package.json b/packages/api/package.json
@@ -22,13 +22,13 @@
     "@libsql/client": "^0.3.5",
     "@lucia-auth/adapter-drizzle": "1.0.0-beta.2",
     "@trpc/server": "^10.43.2",
-    "arctic": "0.10.0",
+    "arctic": "0.10.2",
     "drizzle-orm": "^0.29.0",
     "drizzle-valibot": "beta",
     "hono": "^3.9.2",
     "lucia": "3.0.0-beta.12",
     "miniflare": "3.20231025.1",
-    "oslo": "0.24.0",
+    "oslo": "0.26.1",
     "superjson": "1.13.3",
     "ts-pattern": "^5.0.5",
     "valibot": "^0.20.1"

diff --git a/packages/api/src/context.ts b/packages/api/src/context.ts
@@ -5,7 +5,8 @@ import type { User } from './db/schema'
 import { Bindings } from './worker'
 import type { inferAsyncReturnType } from '@trpc/server'
 import type { Context as HonoContext, HonoRequest } from 'hono'
-import { verifyRequestOrigin, type Lucia } from 'lucia'
+import type { Lucia } from 'lucia'
+import { verifyRequestOrigin } from 'oslo/request'
 import { verifyToken } from './utils/crypto'
 import { createAuth, getAllowedOriginHost } from './auth'
 import { getCookie } from 'hono/cookie'

diff --git a/packages/app/features/oauth/screen.tsx b/packages/app/features/oauth/screen.tsx
@@ -15,7 +15,8 @@ type Params = {
 
 const { useParam } = createParam<Params>()
 
-// Apple will POST form data to the redirect URI
+// Apple will POST form data to the redirect URI when scopes have been requested
+// @link https://developer.apple.com/documentation/sign_in_with_apple/request_an_authorization_to_the_sign_in_with_apple_server
 export const getServerSideProps = (async (context) => {
   // Fetch data from external API
   let appleUser = null
@@ -84,8 +85,8 @@ export const OAuthSignInScreen = ({ appleUser }: OAuthSignInScreenProps): React.
       // Maybe there's a superjson plugin or another way to handle it.
       appleUser: appleUser
         ? {
-            email: appleUser.email || undefined,
-          }
+          email: appleUser.email || undefined,
+        }
         : undefined,
     })
   }, [provider, redirectTo, state, code, sendApiRequestOnLoad, appleUser])