✨ hopefully working apple sign-in

app/components/layout/LayoutLogin.vue

@@ -17,6 +17,14 @@ 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('/api/oauth/redirect/apple', { external: true }),
+  },
+
   /*
   {
     name: 'x',
@@ -56,6 +64,7 @@ const providers = reactive<Provider[]>([
     icon: 'i-mdi-github',
     click: async () => await navigateTo('/api/oauth/github', { external: true }),
   },
+
 ])
 </script>
 

app/types/oauth.d.ts

@@ -14,6 +14,31 @@ export interface GoogleUserInfo {
   email: string
   email_verified: boolean
 }
+/*
+
+apple user { iss: 'https://appleid.apple.com',
+  aud: 'fume.bio',
+  exp: 1727422907,
+  iat: 1727336507,
+  sub: '000563.30ae9239e35e4d2da5806a88600e772a.0716',
+  at_hash: 'PcyA1wqULsWWxgiiXSTGnQ',
+  email: '[email protected]',
+  email_verified: true,
+  auth_time: 1727336507,
+  nonce_supported: true }
+  */
+export interface AppleUserInfo {
+  aud: string
+  exp: number
+  iat: number
+  sub: string
+  at_hash: string
+  email: string
+  email_verified: boolean
+  auth_time: number
+  nonce_supported: boolean
+}
+
 export interface GithubUserInfo {
   login: string
   id: number
@@ -50,6 +75,14 @@ export interface GithubUserInfo {
   updated_at: string
 }
 
+export interface AppleUserInfo {
+  name: {
+    firstName: string
+    lastName: string
+  }
+  email: string
+}
+
 export interface MicrosoftUserInfo {
   id: string
   displayName: string

nuxt.config.ts

@@ -1,5 +1,6 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
+
   devtools: { enabled: true },
   extends: ['@nuxt/ui-pro'],
   modules: [
@@ -47,6 +48,11 @@ export default defineNuxtConfig({
       maxAge: 60 * 60 * 24 * 365, // 1 year
       name: 'fumebio-session',
     },
+    apple: {
+      teamId: '',
+      keyIdentifier: '',
+      privateKey: '',
+    },
     oauth: {
       google: {
         clientId: '',

package.json

@@ -29,6 +29,7 @@
     "@fullcalendar/vue3": "^6.1.15",
     "@nuxt/ui-pro": "^1.4.3",
     "@prisma/adapter-d1": "^5.20.0",
+    "apple-signin-auth": "^1.7.6",
     "date-fns": "^4.1.0"
   },
   "devDependencies": {

server/api/[...slug].ts

@@ -2,7 +2,7 @@ import type { Round } from '@prisma/client'
 import { createRouter, useBase } from 'h3'
 import type { Token, User } from '~/types/models'
 import logout from '../controllers/logout'
-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'
@@ -24,6 +24,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/facebook', facebookHandler)
 // router.get('/oauth/instagram', instagramHandler)
 // router.get('/oauth/x', xHandler)