chore: wip

Author: glennmichael123

app/Actions/GenerateRegistrationAction.ts

@@ -0,0 +1,38 @@
+import { generateRegistrationOptions } from '@simplewebauthn/server'
+import { Action } from '@stacksjs/actions'
+import type { RequestInstance } from '@stacksjs/types'
+import User from '../../storage/framework/orm/src/models/User.ts'
+
+export default new Action({
+  name: 'PasskeyRegistrationAction',
+  description: 'Register a Passkey',
+  method: 'POST',
+  async handle(request: RequestInstance) {
+    const userPasskeys: any[] = [
+      { id: 'passkey1', transports: ['usb'] },
+      { id: 'passkey2', transports: ['nfc'] },
+    ]
+
+    const user = await User.find(1)
+
+    const email = user?.email ?? ''
+
+    const options = await generateRegistrationOptions({
+      rpName: 'Stacks',
+      rpID: 'localhost',
+      userName: email,
+      attestationType: 'none',
+      excludeCredentials: userPasskeys.map((passkey) => ({
+        id: passkey.id,
+        transports: passkey.transports,
+      })),
+      authenticatorSelection: {
+        residentKey: 'preferred',
+        userVerification: 'preferred',
+        authenticatorAttachment: 'platform',
+      },
+    })
+
+    return options
+  },
+})

app/Actions/VerifyRegistrationAction.ts

@@ -0,0 +1,27 @@
+import { verifyRegistrationResponse } from '@simplewebauthn/server'
+import { Action } from '@stacksjs/actions'
+import type { RequestInstance } from '@stacksjs/types'
+
+export default new Action({
+  name: 'PasskeyRegistrationAction',
+  description: 'Register a Passkey',
+  method: 'POST',
+  async handle(request: RequestInstance) {
+    const body = request.all()
+
+    let verification
+
+    try {
+      verification = await verifyRegistrationResponse({
+        response: body.attResp,
+        expectedChallenge: body.challenge,
+        expectedOrigin: 'http://localhost:3333',
+        expectedRPID: 'localhost',
+      })
+    } catch (error) {
+      console.error(error)
+    }
+
+    return verification
+  },
+})

bun.lockb

@@ -1,4 +1,9 @@
-<script setup>
+<script setup lang="ts">
+import { startRegistration } from '@simplewebauthn/browser'
+
+const successMessage = ref('')
+const errorMessage = ref('')
+
 import { ref } from 'vue'
 
 const router = useRouter()
@@ -37,6 +42,33 @@ async function login() {
 
   password.value = ''
 }
+
+async function generateRegistration() {
+  // Reset success/error messages
+  successMessage.value = ''
+  errorMessage.value = ''
+
+  const resp = await fetch('http://localhost:3008/generate-registration-options')
+  const options = await resp.json()
+
+  const attResp = await startRegistration(options)
+
+  const verificationResp = await fetch('http://localhost:3008/verify-registration', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({ challenge: options.challenge, attResp }),
+  })
+
+  const verificationJSON = await verificationResp.json()
+
+  if (verificationJSON?.verified) {
+    successMessage.value = 'Success!'
+  } else {
+    errorMessage.value = `Oh no, something went wrong! Response: <pre>${JSON.stringify(verificationJSON)}</pre>`
+  }
+}
 </script>
 
 <template>

resources/views/auth/login.vue

@@ -14,6 +14,8 @@ route.get('/hello/world', () => 'hello world, buddy') // $API_URL/hello/world
 
 route.post('/email/subscribe', 'Actions/SubscriberEmailAction')
 route.post('/login', 'Actions/LoginAction')
+route.get('/generate-registration-options', 'Actions/GenerateRegistrationAction')
+route.post('/verify-registration', 'Actions/VerifyRegistrationAction')
 
 // route.email('/welcome')
 route.health() // adds a GET `/health` route

routes/api.ts

@@ -418,4 +418,4 @@
       "wordChar"
     ]
   }
-}
+}

storage/framework/.biomelintrc-auto-import.json

@@ -42,5 +42,9 @@
     "@types/qrcode": "^1.5.5",
     "otplib": "^12.0.1",
     "qrcode": "^1.5.4"
+  },
+  "dependencies": {
+    "@simplewebauthn/browser": "^10.0.0",
+    "@simplewebauthn/server": "^10.0.1"
   }
 }

storage/framework/core/auth/package.json

@@ -5,8 +5,8 @@ import Team, { type TeamModel } from '../../../orm/src/models/Team'
 import User from '../../../orm/src/models/User'
 
 interface Credentials {
-  password: string
-  [key: string]: string | number | undefined
+  password: string | undefined
+  [key: string]: string | undefined
 }
 
 type AuthToken = `${number}:${number}:${string}`

storage/framework/core/auth/src/authentication.ts

@@ -1,7 +1,7 @@
 import type { VineType } from '@stacksjs/types'
 
 interface RequestData {
-  [key: string]: string
+  [key: string]: any
 }
 
 type RouteParams = { [key: string]: string | number } | null
@@ -22,7 +22,7 @@ export interface RequestInstance {
 
   addParam(param: RouteParams): void
 
-  get(element: string): string | number | undefined
+  get<T>(element: T): string | undefined
 
   header(element: string): string | number | boolean | null