feat: frontend passkey/auth0 custom provider integration

Author: riccardoperra

apps/api/api-types/index.d.ts

@@ -14,4 +14,5 @@ export type {
   PasskeyFinalizeRegistrationApi,
   PasskeyStartLoginApi,
   PasskeyFinalizeLoginApi,
-} from '../dist/schemas/index.js';
+  UserInfoApi,
+} from '../src/schemas/index';

apps/api/src/modules/project/handlers/project.service.ts

@@ -1,5 +1,5 @@
 import {Project, User} from '@codeimage/prisma-models';
-import {HttpError, HttpErrors} from '@fastify/sensible/lib/httpError.js';
+import {HttpErrors} from '@fastify/sensible/lib/httpError.js';
 import {createProjectRequestMapper} from '../mapper/create-project-mapper.js';
 import {createCompleteProjectGetByIdResponseMapper} from '../mapper/get-project-by-id-mapper.js';
 import {ProjectRepository} from '../repository/index.js';
@@ -89,7 +89,7 @@ export function makeProjectService(
       try {
         const project = await repository.findById(projectId);
         if (!project) {
-          throw {name: 'NotFoundError'} as HttpError;
+          throw {name: 'NotFoundError'} as HttpErrors['HttpError'];
         }
         return this.createNewProject(user.id, {
           name: newName ?? project.name,
@@ -99,7 +99,7 @@ export function makeProjectService(
           terminal: project.terminal,
         });
       } catch (e) {
-        const error = e as HttpError;
+        const error = e as HttpErrors['HttpError'];
         if (error && error.name === 'NotFoundError') {
           throw httpErrors.notFound(
             `Cannot clone project with id ${projectId} since it does not exists`,

apps/api/src/plugins/errorHandler.ts

@@ -1,11 +1,11 @@
-import {HttpError} from '@fastify/sensible/lib/httpError.js';
+import {HttpErrors} from '@fastify/sensible/lib/httpError.js';
 import fp from 'fastify-plugin';
 import {NotFoundEntityException} from '../common/exceptions/NotFoundEntityException.js';
 
 export default fp(
   async fastify => {
     fastify.setErrorHandler((error, request, reply) => {
-      let httpError: HttpError | null = null;
+      let httpError: HttpErrors['HttpError'] | null = null;
 
       if (error.statusCode) {
         httpError = fastify.httpErrors.createError(

apps/api/src/routes/v1/passkey/deleteCredential.ts

@@ -2,6 +2,10 @@ import {FastifyPluginAsyncTypebox} from '@fastify/type-provider-typebox';
 import {Type} from '@sinclair/typebox';
 
 const route: FastifyPluginAsyncTypebox = async fastify => {
+  fastify.addHook(
+    'preValidation',
+    fastify.authorize({mustBeAuthenticated: true}),
+  );
   fastify.delete(
     '/credentials',
     {
@@ -10,11 +14,6 @@ const route: FastifyPluginAsyncTypebox = async fastify => {
           credentialId: Type.String(),
         }),
       },
-      preValidation: function (request, reply, done) {
-        return fastify
-          .auth([fastify.authenticate, fastify.verifyHankoPasskey])
-          .apply(this, [request, reply, done]);
-      },
     },
     async request => {
       return fastify.passkeysApi.credential(request.params.credentialId);

apps/api/src/routes/v1/passkey/finalizeRegistration.ts

@@ -47,29 +47,26 @@ const schema = {
 export type PasskeyFinalizeRegistrationApi = GetApiTypes<typeof schema>;
 
 const route: FastifyPluginAsyncTypebox = async fastify => {
-  fastify.post(
-    '/finalize-registration',
-    {
-      schema,
-      preValidation: (req, reply) => fastify.authorize(req, reply),
-    },
-    async request => {
-      // const {appUser} = request;
-      return fastify.passkeysApi.registration.finalize({
-        rawId: request.body.rawId,
-        type: request.body.type,
-        transports: request.body.transports,
-        authenticatorAttachment: request.body.authenticatorAttachment,
-        id: request.body.id,
-        clientExtensionResults: request.body.clientExtensionResults,
-        response: {
-          transports: request.body.response.transports,
-          clientDataJSON: request.body.response.clientDataJSON,
-          attestationObject: request.body.response.attestationObject,
-        },
-      });
-    },
+  fastify.addHook(
+    'preValidation',
+    fastify.authorize({mustBeAuthenticated: true}),
   );
+  fastify.post('/finalize-registration', {schema}, async request => {
+    // const {appUser} = request;
+    return fastify.passkeysApi.registration.finalize({
+      rawId: request.body.rawId,
+      type: request.body.type,
+      transports: request.body.transports,
+      authenticatorAttachment: request.body.authenticatorAttachment,
+      id: request.body.id,
+      clientExtensionResults: request.body.clientExtensionResults,
+      response: {
+        transports: request.body.response.transports,
+        clientDataJSON: request.body.response.clientDataJSON,
+        attestationObject: request.body.response.attestationObject,
+      },
+    });
+  });
 };
 
 export default route;

apps/api/src/routes/v1/passkey/listCredentials.ts

@@ -1,27 +1,25 @@
 import {FastifyPluginAsyncTypebox} from '@fastify/type-provider-typebox';
 
 const route: FastifyPluginAsyncTypebox = async fastify => {
-  fastify.get(
-    '/credentials',
-    {
-      preValidation: (request, reply) => fastify.authenticate(request, reply),
-    },
-    async () => {
-      return fetch(
-        `https://passkeys.hanko.io/${fastify.config.HANKO_PASSKEYS_TENANT_ID}/credentials?user_id=4676fe25-3660-4c0d-b89e-34b177e759f0`,
-        {
-          headers: {
-            apikey: fastify.config.HANKO_PASSKEYS_API_KEY,
-          },
-        },
-      )
-        .then(s => s.json())
-        .then(s => {
-          console.log(s);
-          return s;
-        });
-    },
+  fastify.addHook(
+    'preValidation',
+    fastify.authorize({mustBeAuthenticated: true}),
   );
+  fastify.get('/credentials', {}, async () => {
+    return fetch(
+      `https://passkeys.hanko.io/${fastify.config.HANKO_PASSKEYS_TENANT_ID}/credentials?user_id=4676fe25-3660-4c0d-b89e-34b177e759f0`,
+      {
+        headers: {
+          apikey: fastify.config.HANKO_PASSKEYS_API_KEY,
+        },
+      },
+    )
+      .then(s => s.json())
+      .then(s => {
+        console.log(s);
+        return s;
+      });
+  });
 };
 
 export default route;

apps/api/src/routes/v1/passkey/startRegistration.ts

@@ -58,23 +58,20 @@ const schema = {
 export type PasskeyStartRegistrationApi = GetApiTypes<typeof schema>;
 
 const route: FastifyPluginAsyncTypebox = async fastify => {
-  fastify.post(
-    '/registration',
-    {
-      preValidation: (req, reply) => fastify.authorize(req, reply),
-      schema,
-    },
-    async request => {
-      const {appUser} = request;
-      fastify.log.info(
-        `Init passkey registration for user with id ${appUser.id}`,
-      );
-      return fastify.passkeysApi.registration.initialize({
-        userId: appUser.id,
-        username: appUser.email,
-      });
-    },
+  fastify.addHook(
+    'preValidation',
+    fastify.authorize({mustBeAuthenticated: true}),
   );
+  fastify.post('/registration', {schema}, async request => {
+    const {appUser} = request;
+    fastify.log.info(
+      `Init passkey registration for user with id ${appUser.id}`,
+    );
+    return fastify.passkeysApi.registration.initialize({
+      userId: appUser.id,
+      username: appUser.email,
+    });
+  });
 };
 
 export default route;

apps/api/src/routes/v1/user/info.ts

@@ -1,16 +1,38 @@
 import {FastifyPluginAsyncTypebox} from '@fastify/type-provider-typebox';
+import {Static, Type} from '@sinclair/typebox';
+import {FastifySchema} from 'fastify';
+import {GetApiTypes} from '../../../common/types/extract-api-types.js';
+
+const UserInfoSchema = Type.Object({
+  id: Type.String(),
+  user_id: Type.String(),
+  email: Type.String(),
+  created_at: Type.String({format: 'date-time'}),
+  email_verified: Type.Boolean(),
+  picture: Type.String(),
+});
+
+const schema = {
+  response: {
+    200: UserInfoSchema,
+  },
+} satisfies FastifySchema;
+
+export type UserInfoApi = GetApiTypes<typeof schema>;
 
 const route: FastifyPluginAsyncTypebox = async fastify => {
   fastify.addHook(
     'preValidation',
     fastify.authorize({mustBeAuthenticated: true}),
   );
-  fastify.get('/info', {}, async request => {
+  fastify.get('/info', {schema}, async request => {
     const response = await fastify.auth0Management.usersByEmail.getByEmail({
       email: request.appUser.email,
       fields: 'user_id,email,created_at,email_verified,picture',
     });
-    return {...response.data[0], id: request.appUser.id};
+    return {...response.data[0], id: request.appUser.id} as Static<
+      typeof UserInfoSchema
+    >;
   });
 };
 

apps/api/src/schemas/index.ts

@@ -15,3 +15,4 @@ export type {PasskeyStartRegistrationApi} from '../routes/v1/passkey/startRegist
 export type {PasskeyFinalizeRegistrationApi} from '../routes/v1/passkey/finalizeRegistration.js';
 export type {PasskeyStartLoginApi} from '../routes/v1/passkey/startLogin.js';
 export type {PasskeyFinalizeLoginApi} from '../routes/v1/passkey/finalizeLogin.js';
+export type {UserInfoApi} from '../routes/v1/user/info.js';

apps/codeimage/package.json

@@ -71,6 +71,7 @@
     "@floating-ui/core": "^1.2.2",
     "@floating-ui/dom": "^1.2.3",
     "@formatjs/intl-relativetimeformat": "11.1.4",
+    "@github/webauthn-json": "2.1.1",
     "@kobalte/core": "^0.11.0",
     "@kobalte/utils": "^0.9.0",
     "@kobalte/vanilla-extract": "^0.4.0",
@@ -89,6 +90,7 @@
     "@solid-primitives/platform": "^0.0.101",
     "@solid-primitives/props": "^2.2.2",
     "@solid-primitives/resize-observer": "^2.0.11",
+    "@solid-primitives/storage": "2.1.1",
     "@solid-primitives/utils": "^6.0.0",
     "@solidjs/router": "^0.8.2",
     "@thisbeyond/solid-dnd": "0.7.2",
@@ -100,6 +102,7 @@
     "downloadjs": "^1.4.7",
     "idb-keyval": "^6.2.0",
     "inter-ui": "^3.19.3",
+    "jwt-decode": "4.0.0",
     "modern-normalize": "^1.1.0",
     "motion": "^10.15.5",
     "polished": "^4.2.2",