From 4064515f0cafffcfa744a819b9aab22ba7d50dbd Mon Sep 17 00:00:00 2001
From: kevin olson <acidjazz@gmail.com>
Date: Mon, 30 Sep 2024 00:31:41 -0500
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20working=20signin=20with=20apple?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/layout/LayoutLogin.vue |   9 +-
 nuxt.config.ts                        |   2 +
 package.json                          |   2 +
 pnpm-lock.yaml                        |  89 +++++++++++++++++++
 server/api/[...slug].ts               |   6 +-
 server/controllers/oauth.ts           |  30 ++-----
 server/utils/apple.ts                 | 121 ++++++++++++++++++++++++++
 7 files changed, 229 insertions(+), 30 deletions(-)
 create mode 100644 server/utils/apple.ts

diff --git a/app/components/layout/LayoutLogin.vue b/app/components/layout/LayoutLogin.vue
index db7dfd2..7ee19f6 100644
--- a/app/components/layout/LayoutLogin.vue
+++ b/app/components/layout/LayoutLogin.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import type { User } from '~/types/models'
-
 interface Provider {
   name: string
   label: string
@@ -17,14 +15,17 @@ const providers = reactive<Provider[]>([
     color: 'white',
     click: async () => await navigateTo('/api/oauth/google', { external: true }),
   },
-  /*
   {
     name: 'apple',
     label: 'Apple',
     icon: 'i-mdi-apple',
     color: 'white',
-    click: async () => await navigateTo('https://appleid.apple.com/auth/authorize?response_type=code&state=state&client_id=fume.bio&redirect_uri=https%3A%2F%2Ffume.bio%2Fapi%2Foauth%2Fapple&scope=openid+email+name&response_mode=form_post', { external: true }),
+    click: async () => await navigateTo('/api/oauth/redirect/apple', { external: true }),
+    // https://appleid.apple.com/auth/authorize?response_type=code&state=state&client_id=fume.bio&redirect_uri=https%3A%2F%2Ffume.bio%2Fapi%2Foauth%2Fapple&scope=openid+email+name&response_mode=form_post', { external: true }),
+
+    // https://appleid.apple.com/auth/authorize?client_id=fume.bio&redirect_uri=https%253A%252F%252Ffume.bio%252Fapi%252Foauth%252Fapple&scope=openid%2520email%2520name
   },
+  /*
 
   {
     name: 'x',
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 80a65eb..77b5c67 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -49,9 +49,11 @@ export default defineNuxtConfig({
       name: 'fumebio-session',
     },
     apple: {
+      clientId: '',
       teamId: '',
       keyIdentifier: '',
       privateKey: '',
+      redirectURL: '',
     },
     oauth: {
       google: {
diff --git a/package.json b/package.json
index 78bc0cf..1fb2f07 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
     "@fullcalendar/vue3": "^6.1.15",
     "@nuxt/ui-pro": "^1.4.3",
     "@prisma/adapter-d1": "^5.20.0",
+    "@types/jsonwebtoken": "^9.0.7",
     "date-fns": "^4.1.0"
   },
   "devDependencies": {
@@ -48,6 +49,7 @@
     "@vitest/ui": "^2.1.1",
     "dotenv-cli": "^7.4.2",
     "happy-dom": "^15.7.4",
+    "jsonwebtoken": "^9.0.2",
     "nuxt": "^3.13.2",
     "nuxt-auth-utils": "^0.3.9",
     "nuxt-og-image": "3.0.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a559097..667d313 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -29,6 +29,9 @@ importers:
       '@prisma/adapter-d1':
         specifier: ^5.20.0
         version: 5.20.0
+      '@types/jsonwebtoken':
+        specifier: ^9.0.7
+        version: 9.0.7
       date-fns:
         specifier: ^4.1.0
         version: 4.1.0
@@ -81,6 +84,9 @@ importers:
       happy-dom:
         specifier: ^15.7.4
         version: 15.7.4
+      jsonwebtoken:
+        specifier: ^9.0.2
+        version: 9.0.2
       nuxt:
         specifier: ^3.13.2
         version: 3.13.2(@parcel/watcher@2.4.1)(@types/node@22.7.1)(eslint@9.11.1(jiti@2.0.0))(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.22.4)(terser@5.33.0)(typescript@5.6.2)(vite@5.4.8(@types/node@22.7.1)(terser@5.33.0))
@@ -1769,6 +1775,9 @@ packages:
   '@types/json-schema@7.0.15':
     resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
 
+  '@types/jsonwebtoken@9.0.7':
+    resolution: {integrity: sha512-ugo316mmTYBl2g81zDFnZ7cfxlut3o+/EQdaP7J8QN2kY6lJ22hmQYCK5EHcJHbrW+dkCGSCPgbG8JtYj6qSrg==}
+
   '@types/mdast@4.0.4':
     resolution: {integrity: sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==}
 
@@ -2321,6 +2330,9 @@ packages:
     resolution: {integrity: sha512-Db1SbgBS/fg/392AblrMJk97KggmvYhr4pB5ZIMTWtaivCPMWLkmb7m21cJvpvgK+J3nsU2CmmixNBZx4vFj/w==}
     engines: {node: '>=8.0.0'}
 
+  buffer-equal-constant-time@1.0.1:
+    resolution: {integrity: sha512-zRpUiDwd/xk6ADqPMATG8vc9VPrkck7T07OIx0gnjmJAnHnTVXNQG3vfvWNuiZIkwu9KrKdA1iJKfsfTVxE6NA==}
+
   buffer-from@1.1.2:
     resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==}
 
@@ -2864,6 +2876,9 @@ packages:
   eastasianwidth@0.2.0:
     resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
 
+  ecdsa-sig-formatter@1.0.11:
+    resolution: {integrity: sha512-nagl3RYrbNv6kQkeJIpt6NJZy8twLB/2vtz6yN9Z4vRKHN4/QZJIEbqohALSgwKdnksuY3k5Addp5lg8sVoVcQ==}
+
   ee-first@1.1.1:
     resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==}
 
@@ -3827,6 +3842,16 @@ packages:
   jsonfile@6.1.0:
     resolution: {integrity: sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==}
 
+  jsonwebtoken@9.0.2:
+    resolution: {integrity: sha512-PRp66vJ865SSqOlgqS8hujT5U4AOgMfhrwYIuIhfKaoSCZcirrmASQr8CX7cUg+RMih+hgznrjp99o+W4pJLHQ==}
+    engines: {node: '>=12', npm: '>=6'}
+
+  jwa@1.4.1:
+    resolution: {integrity: sha512-qiLX/xhEEFKUAJ6FiBMbes3w9ATzyk5W7Hvzpa/SLYdxNtng+gcurvrI7TbACjIXlsJyr05/S1oUhZrc63evQA==}
+
+  jws@3.2.2:
+    resolution: {integrity: sha512-YHlZCB6lMTllWDtSPHz/ZXTsi8S00usEV6v1tjq8tOUZzw7DpSDWVXjXDre6ed1w/pd495ODpHZYSdkRTsa0HA==}
+
   keygrip@1.1.0:
     resolution: {integrity: sha512-iYSchDJ+liQ8iwbSI2QqsQOvqv58eJCEanyJPJi+Khyu8smkcKSFUCbPwzFcL7YVtZ6eONjqRX/38caJ7QjRAQ==}
     engines: {node: '>= 0.6'}
@@ -3925,18 +3950,36 @@ packages:
   lodash.defaults@4.2.0:
     resolution: {integrity: sha512-qjxPLHd3r5DnsdGacqOMU6pb/avJzdh9tFX2ymgoZE27BmjXrNy/y4LoaiTeAb+O3gL8AfpJGtqfX/ae2leYYQ==}
 
+  lodash.includes@4.3.0:
+    resolution: {integrity: sha512-W3Bx6mdkRTGtlJISOvVD/lbqjTlPPUDTMnlXZFnVwi9NKJ6tiAk6LVdlhZMm17VZisqhKcgzpO5Wz91PCt5b0w==}
+
   lodash.isarguments@3.1.0:
     resolution: {integrity: sha512-chi4NHZlZqZD18a0imDHnZPrDeBbTtVN7GXMwuGdRH9qotxAjYs3aVLKc7zNOG9eddR5Ksd8rvFEBc9SsggPpg==}
 
+  lodash.isboolean@3.0.3:
+    resolution: {integrity: sha512-Bz5mupy2SVbPHURB98VAcw+aHh4vRV5IPNhILUCsOzRmsTmSQ17jIuqopAentWoehktxGd9e/hbIXq980/1QJg==}
+
+  lodash.isinteger@4.0.4:
+    resolution: {integrity: sha512-DBwtEWN2caHQ9/imiNeEA5ys1JoRtRfY3d7V9wkqtbycnAmTvRRmbHKDV4a0EYc678/dia0jrte4tjYwVBaZUA==}
+
+  lodash.isnumber@3.0.3:
+    resolution: {integrity: sha512-QYqzpfwO3/CWf3XP+Z+tkQsfaLL/EnUlXWVkIk5FUPc4sBdTehEqZONuyRt2P67PXAk+NXmTBcc97zw9t1FQrw==}
+
   lodash.isplainobject@4.0.6:
     resolution: {integrity: sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==}
 
+  lodash.isstring@4.0.1:
+    resolution: {integrity: sha512-0wJxfxH1wgO3GrbuP+dTTk7op+6L41QCXbGINEmD+ny/G/eCqGzxyCsh7159S+mgDDcoarnBw6PC1PS5+wUGgw==}
+
   lodash.memoize@4.1.2:
     resolution: {integrity: sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==}
 
   lodash.merge@4.6.2:
     resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
 
+  lodash.once@4.1.1:
+    resolution: {integrity: sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg==}
+
   lodash.uniq@4.5.0:
     resolution: {integrity: sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==}
 
@@ -7967,6 +8010,10 @@ snapshots:
 
   '@types/json-schema@7.0.15': {}
 
+  '@types/jsonwebtoken@9.0.7':
+    dependencies:
+      '@types/node': 22.7.1
+
   '@types/mdast@4.0.4':
     dependencies:
       '@types/unist': 3.0.3
@@ -8659,6 +8706,8 @@ snapshots:
 
   buffer-crc32@1.0.0: {}
 
+  buffer-equal-constant-time@1.0.1: {}
+
   buffer-from@1.1.2: {}
 
   buffer@5.7.1:
@@ -9166,6 +9215,10 @@ snapshots:
 
   eastasianwidth@0.2.0: {}
 
+  ecdsa-sig-formatter@1.0.11:
+    dependencies:
+      safe-buffer: 5.2.1
+
   ee-first@1.1.1: {}
 
   electron-to-chromium@1.5.28: {}
@@ -10369,6 +10422,30 @@ snapshots:
     optionalDependencies:
       graceful-fs: 4.2.11
 
+  jsonwebtoken@9.0.2:
+    dependencies:
+      jws: 3.2.2
+      lodash.includes: 4.3.0
+      lodash.isboolean: 3.0.3
+      lodash.isinteger: 4.0.4
+      lodash.isnumber: 3.0.3
+      lodash.isplainobject: 4.0.6
+      lodash.isstring: 4.0.1
+      lodash.once: 4.1.1
+      ms: 2.1.3
+      semver: 7.6.3
+
+  jwa@1.4.1:
+    dependencies:
+      buffer-equal-constant-time: 1.0.1
+      ecdsa-sig-formatter: 1.0.11
+      safe-buffer: 5.2.1
+
+  jws@3.2.2:
+    dependencies:
+      jwa: 1.4.1
+      safe-buffer: 5.2.1
+
   keygrip@1.1.0:
     dependencies:
       tsscmp: 1.0.6
@@ -10513,14 +10590,26 @@ snapshots:
 
   lodash.defaults@4.2.0: {}
 
+  lodash.includes@4.3.0: {}
+
   lodash.isarguments@3.1.0: {}
 
+  lodash.isboolean@3.0.3: {}
+
+  lodash.isinteger@4.0.4: {}
+
+  lodash.isnumber@3.0.3: {}
+
   lodash.isplainobject@4.0.6: {}
 
+  lodash.isstring@4.0.1: {}
+
   lodash.memoize@4.1.2: {}
 
   lodash.merge@4.6.2: {}
 
+  lodash.once@4.1.1: {}
+
   lodash.uniq@4.5.0: {}
 
   lodash@4.17.21: {}
diff --git a/server/api/[...slug].ts b/server/api/[...slug].ts
index f51b3d1..4752a3a 100644
--- a/server/api/[...slug].ts
+++ b/server/api/[...slug].ts
@@ -1,7 +1,7 @@
 import type { Round } from '@prisma/client'
 import { createRouter, useBase } from 'h3'
 import type { Token, User } from '~/types/models'
-import { githubHandler, googleHandler } from '../controllers/oauth'
+import { appleHandler, appleRedirectHandler, githubHandler, googleHandler } from '../controllers/oauth'
 import round from '../controllers/round'
 import test from '../controllers/test'
 import token from '../controllers/token'
@@ -19,8 +19,8 @@ if (useRuntimeConfig().appEnv === 'test')
   router.post('/test/session', test.create)
 
 router.get('/oauth/google', googleHandler)
-// router.get('/oauth/redirect/apple', appleRedirectHandler)
-// router.post('/oauth/apple', appleHandler)
+router.get('/oauth/redirect/apple', appleRedirectHandler)
+router.post('/oauth/apple', appleHandler)
 // router.get('/oauth/facebook', facebookHandler)
 // router.get('/oauth/instagram', instagramHandler)
 // router.get('/oauth/x', xHandler)
diff --git a/server/controllers/oauth.ts b/server/controllers/oauth.ts
index ac4bf27..504977f 100644
--- a/server/controllers/oauth.ts
+++ b/server/controllers/oauth.ts
@@ -94,39 +94,23 @@ export const xHandler = oauthXEventHandler({
     return sendRedirect(event, '/')
   },
 })
-
-/*
 export const appleRedirectHandler = defineEventHandler((event) => {
-  return sendRedirect(event, 'https://appleid.apple.com/auth/authorize?response_type=code&state=state&client_id=fume.bio&redirect_uri=https%3A%2F%2Ffume.bio%2Fapi%2Foauth%2Fapple&scope=openid+email+name&response_mode=form_post')
+  const config = useRuntimeConfig(event).apple
+  return sendRedirect(event, apple.getAuthURL(config))
 })
 
 export const appleHandler = defineEventHandler(async (event) => {
+  const config = useRuntimeConfig(event).apple
   const body = await readBody(event)
-  const config = useRuntimeConfig(event)
-  const clientSecret = appleSignin.getClientSecret({
-    clientID: 'fume.bio',
-    teamID: config.apple.teamId,
-    privateKey: `-----BEGIN PRIVATE KEY-----
-${config.apple.privateKey.split(':BR:').join('\n')}
------END PRIVATE KEY-----`,
-    keyIdentifier: config.apple.keyIdentifier,
-  })
-
-  const options = {
-    clientID: 'fume.bio',
-    redirectUri: 'https://fume.bio/api/oauth/apple',
-    clientSecret,
-    scope: 'email name',
-  }
-  const tokenResponse = await appleSignin.getAuthorizationToken(body.code, options)
-  const user = await appleSignin.verifyIdToken(tokenResponse.id_token)
+  const token = await apple.getAuthToken(config, body.code)
+  const verified = apple.verifyIdToken(token.id_token)
+
   let dbUser
   if (body.user)
     dbUser = await signIn(event, JSON.parse(body.user), 'apple')
   else
-    dbUser = await createSession('apple', await userFromEmail(user.email), event)
+    dbUser = await createSession('apple', await userFromEmail(verified.email), event)
 
   await setUserSession(event, { user: dbUser })
   return sendRedirect(event, '/')
 })
-  */
diff --git a/server/utils/apple.ts b/server/utils/apple.ts
new file mode 100644
index 0000000..ff0a60d
--- /dev/null
+++ b/server/utils/apple.ts
@@ -0,0 +1,121 @@
+import jwt from 'jsonwebtoken'
+
+import { FetchError } from 'ofetch'
+
+interface AppleConfig {
+  clientId: string
+  keyIdentifier: string
+  teamId: string
+  privateKey: string
+  redirectURL: string
+}
+
+interface AppleTokenResponse {
+  token_type: string
+  expires_in: number
+  refresh_token: string
+  id_token: string
+}
+
+export interface RequestAccessTokenBody {
+  grant_type: 'authorization_code'
+  code: string
+  redirect_uri: string
+  client_id: string
+  client_secret?: string
+}
+
+interface RequestAccessTokenOptions {
+  body?: RequestAccessTokenBody
+  params?: Record<string, string | undefined>
+  headers?: Record<string, string>
+}
+
+interface AppleVerifiedToken {
+  iss: string
+  aud: string
+  exp: number
+  iat: number
+  sub: string
+  at_hash: string
+  email: string
+  email_verified: boolean
+  auth_time: number
+  nonce_supported: boolean
+}
+
+const getAuthURL = (config: AppleConfig): string => {
+  const url = new URL('https://appleid.apple.com/auth/authorize')
+  url.searchParams.append('client_id', config.clientId)
+  url.searchParams.append('redirect_uri', config.redirectURL || 'https://25ef-2605-a601-a0ee-c700-c005-21af-aae4-cb22.ngrok-free.app/api/oauth/apple')
+  url.searchParams.append('scope', 'openid email name')
+  url.searchParams.append('response_type', 'code')
+  url.searchParams.append('response_mode', 'form_post')
+  return url.toString()
+}
+
+const getSecret = (config: AppleConfig) => {
+  const timeNow = Math.floor(Date.now() / 1000)
+
+  const claims = {
+    iss: config.teamId,
+    iat: timeNow,
+    exp: timeNow + 300,
+    aud: 'https://appleid.apple.com',
+    sub: config.clientId,
+  }
+  const header = { alg: 'ES256', kid: config.keyIdentifier }
+  const key = `-----BEGIN PRIVATE KEY-----
+${config.privateKey.split(':BR:').join('\n')}
+-----END PRIVATE KEY-----`
+
+  return jwt.sign(claims, key, { algorithm: 'ES256', header })
+}
+
+// taken from nuxt-auth-utils until we can figure out how to import it
+export async function requestAccessToken(url: string, options: RequestAccessTokenOptions): Promise<any> {
+  const headers = {
+    'Content-Type': 'application/x-www-form-urlencoded',
+    ...options.headers,
+  }
+
+  const body = headers['Content-Type'] === 'application/x-www-form-urlencoded'
+    ? new URLSearchParams(options.body as unknown as Record<string, string> || options.params || {},
+    ).toString()
+    : options.body
+
+  return $fetch(url, {
+    method: 'POST',
+    headers,
+    body,
+  }).catch((error) => {
+    if (error instanceof FetchError && error.status === 401)
+      return error.data
+
+    throw error
+  })
+}
+
+const getAuthToken = async (config: AppleConfig, code: string): Promise<AppleTokenResponse> => {
+  return requestAccessToken('https://appleid.apple.com/auth/token', { params: {
+    client_id: config.clientId,
+    client_secret: getSecret(config),
+    code,
+    grant_type: 'authorization_code',
+    redirect_uri: config.redirectURL,
+  } })
+}
+
+const verifyIdToken = (idToken: string): AppleVerifiedToken => {
+  return jwt.decode(idToken, {
+    algorithm: 'RS256',
+    issuer: 'https://appleid.apple.com',
+  }) as unknown as AppleVerifiedToken
+}
+
+export const apple = {
+  getAuthURL,
+  getAuthToken,
+  getSecret,
+  verifyIdToken,
+}