feat(passport): Passkeys (#2659)

.github/workflows/main-passport.yaml

@@ -51,6 +51,7 @@ jobs:
           secrets: |
             SECRET_SESSION_KEY
             SECRET_SESSION_SALT
+            SECRET_WEBAUTHN_SIGNING_KEY
             APIKEY_ALCHEMY_PUBLIC
             INTERNAL_GOOGLE_OAUTH_CLIENT_ID
             SECRET_GOOGLE_OAUTH_CLIENT_SECRET
@@ -68,6 +69,7 @@ jobs:
           NODE_ENV: 'development'
           SECRET_SESSION_KEY: ${{ secrets.SECRET_SESSION_KEY_DEV }}
           SECRET_SESSION_SALT: ${{ secrets.SECRET_SESSION_SALT_DEV }}
+          SECRET_WEBAUTHN_SIGNING_KEY: ${{ secrets.SECRET_WEBAUTHN_SIGNING_KEY_DEV }}
           APIKEY_ALCHEMY_PUBLIC: ${{ secrets.APIKEY_ALCHEMY_PUBLIC_GOERLI }}
           INTERNAL_GOOGLE_OAUTH_CLIENT_ID: ${{ vars.INTERNAL_GOOGLE_OAUTH_CLIENT_ID_DEV }}
           SECRET_GOOGLE_OAUTH_CLIENT_SECRET: ${{ secrets.SECRET_GOOGLE_OAUTH_CLIENT_SECRET_DEV }}

.github/workflows/next-passport.yaml

@@ -49,6 +49,7 @@ jobs:
           secrets: |
             SECRET_SESSION_KEY
             SECRET_SESSION_SALT
+            SECRET_WEBAUTHN_SIGNING_KEY
             APIKEY_ALCHEMY_PUBLIC
             INTERNAL_GOOGLE_OAUTH_CLIENT_ID
             SECRET_GOOGLE_OAUTH_CLIENT_SECRET
@@ -65,6 +66,7 @@ jobs:
         env:
           SECRET_SESSION_KEY: ${{ secrets.SECRET_SESSION_KEY_TEST }}
           SECRET_SESSION_SALT: ${{ secrets.SECRET_SESSION_SALT_TEST }}
+          SECRET_WEBAUTHN_SIGNING_KEY: ${{ secrets.SECRET_WEBAUTHN_SIGNING_KEY_TEST }}
           APIKEY_ALCHEMY_PUBLIC: ${{ secrets.APIKEY_ALCHEMY_PUBLIC_GOERLI }}
           INTERNAL_GOOGLE_OAUTH_CLIENT_ID: ${{ vars.INTERNAL_GOOGLE_OAUTH_CLIENT_ID_TEST }}
           SECRET_GOOGLE_OAUTH_CLIENT_SECRET: ${{ secrets.SECRET_GOOGLE_OAUTH_CLIENT_SECRET_TEST }}

.github/workflows/release-passport.yaml

@@ -45,6 +45,7 @@ jobs:
           secrets: |
             SECRET_SESSION_KEY
             SECRET_SESSION_SALT
+            SECRET_WEBAUTHN_SIGNING_KEY
             APIKEY_ALCHEMY_PUBLIC
             INTERNAL_GOOGLE_OAUTH_CLIENT_ID
             SECRET_GOOGLE_OAUTH_CLIENT_SECRET
@@ -61,6 +62,7 @@ jobs:
         env:
           SECRET_SESSION_KEY: ${{ secrets.SECRET_SESSION_KEY_PROD }}
           SECRET_SESSION_SALT: ${{ secrets.SECRET_SESSION_SALT_PROD }}
+          SECRET_WEBAUTHN_SIGNING_KEY: ${{ secrets.SECRET_WEBAUTHN_SIGNING_KEY_PROD }}
           APIKEY_ALCHEMY_PUBLIC: ${{ secrets.APIKEY_ALCHEMY_PUBLIC_MAINNET }}
           INTERNAL_GOOGLE_OAUTH_CLIENT_ID: ${{ vars.INTERNAL_GOOGLE_OAUTH_CLIENT_ID_PROD }}
           SECRET_GOOGLE_OAUTH_CLIENT_SECRET: ${{ secrets.SECRET_GOOGLE_OAUTH_CLIENT_SECRET_PROD }}

apps/passport/.dev.vars.example

@@ -21,3 +21,4 @@ SECRET_APPLE_OAUTH_CLIENT_SECRET=""
 INTERNAL_DISCORD_OAUTH_CLIENT_ID=""
 SECRET_DISCORD_OAUTH_CLIENT_SECRET=""
 
+SECRET_WEBAUTHN_SIGNING_KEY=''

apps/passport/app/root.tsx

@@ -70,7 +70,7 @@ export const links: LinksFunction = () => [
 export const loader: LoaderFunction = getRollupReqFunctionErrorWrapper(
   async ({ request, context, params }) => {
     const clientId = new URL(request.url).searchParams.get('client_id')
-    if (
+    if (request.cf &&
       request.cf.botManagement.score <= 30 &&
       !['localhost', '127.0.0.1'].includes(new URL(request.url).hostname)
     ) {

apps/passport/app/routes/authenticate/$clientId.tsx

@@ -16,6 +16,7 @@ import { ThemeContext } from '@proofzero/design-system/src/contexts/theme'
 export const loader: LoaderFunction = getRollupReqFunctionErrorWrapper(
   async ({ request, context, params }) => {
     if (
+      request.cf &&
       request.cf.botManagement.score <= 30 &&
       !['localhost', '127.0.0.1'].includes(new URL(request.url).hostname)
     ) {
@@ -53,23 +54,23 @@ export default () => {
         <style type="text/css">{`
             :root {
                 ${getRGBColor(
-                  dark
-                    ? appProps?.appTheme?.color?.dark ??
-                        AuthenticationScreenDefaults.color.dark
-                    : appProps?.appTheme?.color?.light ??
-                        AuthenticationScreenDefaults.color.light,
-                  'primary'
-                )}
+          dark
+            ? appProps?.appTheme?.color?.dark ??
+            AuthenticationScreenDefaults.color.dark
+            : appProps?.appTheme?.color?.light ??
+            AuthenticationScreenDefaults.color.light,
+          'primary'
+        )}
                 ${getRGBColor(
-                  getTextColor(
-                    dark
-                      ? appProps?.appTheme?.color?.dark ??
-                          AuthenticationScreenDefaults.color.dark
-                      : appProps?.appTheme?.color?.light ??
-                          AuthenticationScreenDefaults.color.light
-                  ),
-                  'primary-contrast-text'
-                )}
+          getTextColor(
+            dark
+              ? appProps?.appTheme?.color?.dark ??
+              AuthenticationScreenDefaults.color.dark
+              : appProps?.appTheme?.color?.light ??
+              AuthenticationScreenDefaults.color.light
+          ),
+          'primary-contrast-text'
+        )}
              {
          `}</style>
       </Helmet>
@@ -83,9 +84,8 @@ export default () => {
               'basis-2/5 h-[100dvh] w-full hidden lg:flex justify-center items-center bg-indigo-50 dark:bg-[#1F2937] overflow-hidden'
             }
             style={{
-              backgroundImage: `url(${
-                appProps?.appTheme?.graphicURL ?? sideGraphics
-              })`,
+              backgroundImage: `url(${appProps?.appTheme?.graphicURL ?? sideGraphics
+                })`,
               backgroundSize: 'cover',
               backgroundPosition: 'center',
               backgroundRepeat: 'no-repeat',

apps/passport/app/routes/authenticate/$clientId/index.tsx

@@ -46,6 +46,7 @@ const LazyAuth = lazy(() =>
 export const loader: LoaderFunction = getRollupReqFunctionErrorWrapper(
   async ({ request, params, context }) => {
     if (
+      request.cf &&
       request.cf.botManagement.score <= 30 &&
       !['localhost', '127.0.0.1'].includes(new URL(request.url).hostname)
     ) {
@@ -213,9 +214,8 @@ const InnerComponent = ({
                     type="span"
                     weight="bold"
                     className="text-orange-600"
-                  >{`${_.upperFirst(invitationData.accountType)} Account: ${
-                    invitationData.identifier
-                  }`}</Text>
+                  >{`${_.upperFirst(invitationData.accountType)} Account: ${invitationData.identifier
+                    }`}</Text>
                 </Text>
               )}
             </>
@@ -238,8 +238,8 @@ const InnerComponent = ({
                     {appProps?.appTheme?.heading
                       ? appProps.appTheme.heading
                       : appProps?.name
-                      ? `Login to ${appProps?.name}`
-                      : AuthenticationScreenDefaults.defaultHeading}
+                        ? `Login to ${appProps?.name}`
+                        : AuthenticationScreenDefaults.defaultHeading}
                   </h1>
                   <h2
                     style={{ color: '#6B7280' }}
@@ -271,9 +271,8 @@ const InnerComponent = ({
                   type="span"
                   weight="bold"
                   className="text-orange-600 truncate"
-                >{`${_.upperFirst(invitationData.accountType)} Account: ${
-                  invitationData.identifier
-                }`}</Text>
+                >{`${_.upperFirst(invitationData.accountType)} Account: ${invitationData.identifier
+                  }`}</Text>
               </Text>
             </>
           )}

apps/passport/app/routes/authenticate/$clientId/webauthn/WebauthnNewKeyIcon.tsx

@@ -0,0 +1,16 @@
+
+const svgString = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.7398 2.04117C12.1652 2.13609 11.6195 2.36004 11.1438 2.69617C10.8128 2.93517 8.12983 5.64417 7.95183 5.91917C7.50115 6.59746 7.29483 7.40898 7.36683 8.22017C7.40583 8.69617 7.49783 9.00717 7.74683 9.51317L7.97083 9.96817L7.28683 10.6532C6.84083 11.1002 6.57883 11.3952 6.53483 11.4992C6.48583 11.6122 6.46083 11.8102 6.44783 12.1692L6.43083 12.6792H5.94183C5.36683 12.6792 5.12683 12.7382 4.93283 12.9262C4.73983 13.1122 4.67983 13.3552 4.67983 13.9422V14.4302L4.16983 14.4472C3.49483 14.4692 3.41483 14.5072 2.89883 15.0442C2.60083 15.3542 2.45483 15.5432 2.33283 15.7802C2.06983 16.2862 2.03383 16.4672 2.01183 17.3992C1.99083 18.2852 2.02483 18.5592 2.20683 18.9442C2.34483 19.2392 2.72383 19.6152 3.04083 19.7742C3.43283 19.9702 3.74883 20.0122 4.65583 19.9882C5.51383 19.9662 5.73283 19.9202 6.24683 19.6562C6.51783 19.5162 6.74283 19.3032 9.28583 16.7672L12.0318 14.0292L12.4858 14.2522C12.9918 14.5012 13.3028 14.5932 13.7788 14.6322C14.59 14.7042 15.4015 14.4979 16.0798 14.0472C16.3528 13.8712 19.0128 11.2362 19.2808 10.8762C19.552 10.4944 19.7562 10.0694 19.8848 9.61917C19.9528 9.36617 19.9708 9.18517 19.9708 8.75917C19.9708 8.17017 19.9028 7.82417 19.6928 7.34617C19.4398 6.76717 19.3018 6.60917 17.3858 4.68617C15.4558 2.74917 15.2388 2.56017 14.6528 2.30517C14.1028 2.06517 13.2978 1.95417 12.7398 2.04117ZM13.9018 4.15417C14.1608 4.27517 14.2998 4.40417 15.9478 6.05117C17.5958 7.69817 17.7248 7.83817 17.8478 8.09917C17.9678 8.35417 17.9798 8.41317 17.9798 8.75917C17.9798 9.10617 17.9678 9.16317 17.8478 9.41917C17.7258 9.67617 17.6038 9.81117 16.3678 11.0472C14.9118 12.5032 14.8558 12.5472 14.3398 12.6422C14.0162 12.6907 13.6855 12.6394 13.3918 12.4952C13.2838 12.4402 13.0438 12.2542 12.8578 12.0822C12.3428 11.6042 12.0638 11.5092 11.6798 11.6822C11.5408 11.7442 10.7958 12.4662 8.43983 14.8192C6.29983 16.9572 5.33483 17.8942 5.23083 17.9372C5.12183 17.9822 4.93683 17.9992 4.54083 17.9992H3.99983V17.4582C3.99983 16.8832 4.03883 16.7102 4.20883 16.5302C4.29183 16.4412 4.31483 16.4392 5.08183 16.4392C6.00783 16.4392 6.19883 16.3992 6.41883 16.1552C6.59683 15.9572 6.63783 15.8002 6.66683 15.1952L6.69183 14.6912L7.19583 14.6662C7.80083 14.6372 7.95783 14.5962 8.15583 14.4182C8.39883 14.1982 8.43983 14.0072 8.43983 13.0862V12.3032L9.33783 11.3992C10.2748 10.4562 10.3968 10.2942 10.3988 9.98917C10.3998 9.75717 10.2598 9.51017 9.91683 9.14117C9.74483 8.95517 9.55883 8.71517 9.50383 8.60717C9.35958 8.31346 9.3083 7.98276 9.35683 7.65917C9.45183 7.14317 9.49583 7.08717 10.9518 5.63317C11.8588 4.72817 12.3588 4.25817 12.4798 4.19717C12.7958 4.03717 12.9648 3.99917 13.3018 4.01217C13.5648 4.02217 13.6738 4.04717 13.9018 4.15417ZM13.1268 7.46317C12.8408 7.60617 12.7138 7.82417 12.6888 8.21617C12.6398 8.98417 13.0258 9.36517 13.7938 9.31017C14.2828 9.27517 14.5538 9.04717 14.6408 8.59817C14.7198 8.19117 14.6028 7.75017 14.3648 7.54917C14.1988 7.40917 14.0078 7.35917 13.6378 7.35917C13.3918 7.35917 13.2968 7.37917 13.1268 7.46317ZM18.6598 15.0422C18.5429 15.0707 18.4334 15.1239 18.3387 15.1983C18.244 15.2726 18.1663 15.3663 18.1108 15.4732C18.0238 15.6522 18.0198 15.7042 18.0068 16.8292L17.9948 17.9992L16.9268 18.0002C15.7868 18.0012 15.5848 18.0252 15.3508 18.1862C15.1198 18.3452 15.0208 18.5892 15.0208 18.9992C15.0208 19.5562 15.2248 19.8522 15.6798 19.9562C15.7788 19.9792 16.3398 19.9972 16.9268 19.9982L17.9948 19.9992L18.0068 21.1692C18.0198 22.3062 18.0228 22.3442 18.1148 22.5322C18.2338 22.7732 18.4308 22.9072 18.7538 22.9672C19.2568 23.0612 19.7118 22.8832 19.8888 22.5252C19.9758 22.3462 19.9798 22.2942 19.9928 21.1692L20.0048 19.9992L21.0728 19.9982C21.6598 19.9972 22.2208 19.9792 22.3198 19.9562C22.7628 19.8552 22.9778 19.5492 22.9788 19.0192C22.9788 18.6392 22.9228 18.4592 22.7488 18.2802C22.5038 18.0282 22.4608 18.0212 21.1728 18.0062L20.0048 17.9942L19.9928 16.8262C19.9788 15.5522 19.9688 15.4972 19.7358 15.2632C19.6618 15.193 19.577 15.1349 19.4848 15.0912C19.3098 15.0172 18.8648 14.9912 18.6598 15.0422Z" fill="CurrentColor"/>
+</svg>
+`
+
+export const WrappedSVG = (
+    <div
+        className="dark:text-white"
+        dangerouslySetInnerHTML={{
+            __html: svgString,
+        }}
+    ></div>
+)
+
+export default `data:image/svg+xml;base64,${btoa(svgString)}`