Updates simplewebauthn package to latest version (redwoodjs#6318)

* Updates to latest simplewebauthn versions * simplewebauthn update means we need to wait for a Promise * Fix login link position * Prompt styling * Update snapshots * Updates test project fixture
mabadir · Aug 29, 2022 · b0e0b7d · b0e0b7d
1 parent 58147b9
commit b0e0b7d
Show file tree

Hide file tree

Showing 10 changed files with 120 additions and 40 deletions.
diff --git a/__fixtures__/test-project/web/src/scaffold.css b/__fixtures__/test-project/web/src/scaffold.css
@@ -128,7 +128,7 @@
   @apply mt-8;
 }
 .rw-label {
-  @apply mt-6 block font-semibold text-gray-600;
+  @apply mt-6 block text-left font-semibold text-gray-600;
 }
 .rw-label.rw-label-error {
   @apply text-red-600;
@@ -230,8 +230,14 @@
   @apply mx-auto my-16 flex w-96 flex-wrap items-center justify-center;
 }
 .rw-login-container .rw-form-wrapper {
-  @apply w-full;
+  @apply w-full text-center;
 }
 .rw-login-link {
   @apply mt-4 w-full text-center text-sm text-gray-600;
 }
+.rw-webauthn-wrapper {
+  @apply mx-4 mt-6 leading-6;
+}
+.rw-webauthn-wrapper h2 {
+  @apply mb-4 text-xl font-bold;
+}
diff --git a/packages/api/package.json b/packages/api/package.json
@@ -50,7 +50,7 @@
     "@babel/core": "7.18.13",
     "@clerk/clerk-sdk-node": "3.9.2",
     "@redwoodjs/auth": "2.2.3",
-    "@simplewebauthn/server": "5.4.5",
+    "@simplewebauthn/server": "6.2.0",
     "@types/aws-lambda": "8.10.101",
     "@types/crypto-js": "4.1.1",
     "@types/jsonwebtoken": "8.5.9",

diff --git a/packages/api/src/functions/dbAuth/DbAuthHandler.ts b/packages/api/src/functions/dbAuth/DbAuthHandler.ts
@@ -721,7 +721,7 @@ export class DbAuthHandler<TUser extends Record<string | number, any>> {
         requireUserVerification: true,
       }
 
-      verification = verifyAuthenticationResponse(opts)
+      verification = await verifyAuthenticationResponse(opts)
     } catch (e: any) {
       throw new DbAuthError.WebAuthnError(e.message)
     } finally {

diff --git a/packages/auth/package.json b/packages/auth/package.json
@@ -38,8 +38,8 @@
     "@nhost/hasura-auth-js": "1.4.1",
     "@nhost/nhost-js": "1.4.10",
     "@okta/okta-auth-js": "6.7.6",
-    "@simplewebauthn/browser": "5.4.1",
-    "@simplewebauthn/typescript-types": "5.4.0",
+    "@simplewebauthn/browser": "6.0.0",
+    "@simplewebauthn/typescript-types": "6.0.0",
     "@supabase/supabase-js": "1.35.6",
     "@types/netlify-identity-widget": "1.9.3",
     "@types/react": "17.0.48",

diff --git a/packages/cli/src/commands/generate/dbAuth/templates/login.webAuthn.tsx.template b/packages/cli/src/commands/generate/dbAuth/templates/login.webAuthn.tsx.template
@@ -253,9 +253,8 @@ const LoginPage = ({ type }) => {
             <div className="rw-segment-main">
               <div className="rw-form-wrapper">{formToRender()}</div>
             </div>
-
-            {linkToRender()}
           </div>
+          {linkToRender()}
         </div>
       </main>
     </>

diff --git a/packages/cli/src/commands/generate/scaffold/__tests__/__snapshots__/scaffold.test.js.snap b/packages/cli/src/commands/generate/scaffold/__tests__/__snapshots__/scaffold.test.js.snap
@@ -849,6 +849,7 @@ exports[`in javascript (default) mode creates a stylesheet 1`] = `
   margin-top: 1.5rem;
   color: #4a5568;
   font-weight: 600;
+  text-align: left;
 }
 .rw-label.rw-label-error {
   color: #c53030;
@@ -997,6 +998,7 @@ exports[`in javascript (default) mode creates a stylesheet 1`] = `
 }
 .rw-login-container .rw-form-wrapper {
   width: 100%;
+  text-align: center;
 }
 .rw-login-link {
   margin-top: 1rem;
@@ -1005,6 +1007,15 @@ exports[`in javascript (default) mode creates a stylesheet 1`] = `
   text-align: center;
   flex-basis: 100%;
 }
+.rw-webauthn-wrapper {
+  margin: 1.5rem 1rem 1rem;
+  line-height: 1.4;
+}
+.rw-webauthn-wrapper h2 {
+  font-size: 150%;
+  font-weight: bold;
+  margin-bottom: 1rem;
+}
 "
 `;
 
@@ -2224,6 +2235,7 @@ exports[`in typescript mode creates a stylesheet 1`] = `
   margin-top: 1.5rem;
   color: #4a5568;
   font-weight: 600;
+  text-align: left;
 }
 .rw-label.rw-label-error {
   color: #c53030;
@@ -2372,6 +2384,7 @@ exports[`in typescript mode creates a stylesheet 1`] = `
 }
 .rw-login-container .rw-form-wrapper {
   width: 100%;
+  text-align: center;
 }
 .rw-login-link {
   margin-top: 1rem;
@@ -2380,6 +2393,15 @@ exports[`in typescript mode creates a stylesheet 1`] = `
   text-align: center;
   flex-basis: 100%;
 }
+.rw-webauthn-wrapper {
+  margin: 1.5rem 1rem 1rem;
+  line-height: 1.4;
+}
+.rw-webauthn-wrapper h2 {
+  font-size: 150%;
+  font-weight: bold;
+  margin-bottom: 1rem;
+}
 "
 `;
 
@@ -2983,6 +3005,7 @@ exports[`tailwind flag set to \`false\` generates a scaffold.css with raw CSS 1`
   margin-top: 1.5rem;
   color: #4a5568;
   font-weight: 600;
+  text-align: left;
 }
 .rw-label.rw-label-error {
   color: #c53030;
@@ -3131,6 +3154,7 @@ exports[`tailwind flag set to \`false\` generates a scaffold.css with raw CSS 1`
 }
 .rw-login-container .rw-form-wrapper {
   width: 100%;
+  text-align: center;
 }
 .rw-login-link {
   margin-top: 1rem;
@@ -3139,6 +3163,15 @@ exports[`tailwind flag set to \`false\` generates a scaffold.css with raw CSS 1`
   text-align: center;
   flex-basis: 100%;
 }
+.rw-webauthn-wrapper {
+  margin: 1.5rem 1rem 1rem;
+  line-height: 1.4;
+}
+.rw-webauthn-wrapper h2 {
+  font-size: 150%;
+  font-weight: bold;
+  margin-bottom: 1rem;
+}
 "
 `;
 
@@ -3273,7 +3306,7 @@ exports[`tailwind flag set to \`true\` generates a scaffold.css with Tailwind co
   @apply mt-8;
 }
 .rw-label {
-  @apply block mt-6 text-gray-600 font-semibold;
+  @apply block mt-6 text-gray-600 font-semibold text-left;
 }
 .rw-label.rw-label-error {
   @apply text-red-600;
@@ -3375,10 +3408,16 @@ exports[`tailwind flag set to \`true\` generates a scaffold.css with Tailwind co
   @apply flex items-center justify-center flex-wrap mx-auto w-96 my-16;
 }
 .rw-login-container .rw-form-wrapper {
-  @apply w-full;
+  @apply w-full text-center;
 }
 .rw-login-link {
   @apply mt-4 text-gray-600 text-sm text-center w-full;
 }
+.rw-webauthn-wrapper {
+  @apply mt-6 mx-4 leading-6;
+}
+.rw-webauthn-wrapper h2 {
+  @apply mb-4 text-xl font-bold;
+}
 "
 `;
diff --git a/...es/cli/src/commands/generate/scaffold/__tests__/__snapshots__/scaffoldNoNest.test.js.snap b/...es/cli/src/commands/generate/scaffold/__tests__/__snapshots__/scaffoldNoNest.test.js.snap
@@ -805,6 +805,7 @@ exports[`in javascript (default) mode creates a stylesheet 1`] = `
   margin-top: 1.5rem;
   color: #4a5568;
   font-weight: 600;
+  text-align: left;
 }
 .rw-label.rw-label-error {
   color: #c53030;
@@ -953,6 +954,7 @@ exports[`in javascript (default) mode creates a stylesheet 1`] = `
 }
 .rw-login-container .rw-form-wrapper {
   width: 100%;
+  text-align: center;
 }
 .rw-login-link {
   margin-top: 1rem;
@@ -961,6 +963,15 @@ exports[`in javascript (default) mode creates a stylesheet 1`] = `
   text-align: center;
   flex-basis: 100%;
 }
+.rw-webauthn-wrapper {
+  margin: 1.5rem 1rem 1rem;
+  line-height: 1.4;
+}
+.rw-webauthn-wrapper h2 {
+  font-size: 150%;
+  font-weight: bold;
+  margin-bottom: 1rem;
+}
 "
 `;
 
@@ -2131,6 +2142,7 @@ exports[`in typescript mode creates a stylesheet 1`] = `
   margin-top: 1.5rem;
   color: #4a5568;
   font-weight: 600;
+  text-align: left;
 }
 .rw-label.rw-label-error {
   color: #c53030;
@@ -2279,6 +2291,7 @@ exports[`in typescript mode creates a stylesheet 1`] = `
 }
 .rw-login-container .rw-form-wrapper {
   width: 100%;
+  text-align: center;
 }
 .rw-login-link {
   margin-top: 1rem;
@@ -2287,6 +2300,15 @@ exports[`in typescript mode creates a stylesheet 1`] = `
   text-align: center;
   flex-basis: 100%;
 }
+.rw-webauthn-wrapper {
+  margin: 1.5rem 1rem 1rem;
+  line-height: 1.4;
+}
+.rw-webauthn-wrapper h2 {
+  font-size: 150%;
+  font-weight: bold;
+  margin-bottom: 1rem;
+}
 "
 `;
 

diff --git a/packages/cli/src/commands/generate/scaffold/templates/assets/scaffold.css.template b/packages/cli/src/commands/generate/scaffold/templates/assets/scaffold.css.template
@@ -227,6 +227,7 @@
   margin-top: 1.5rem;
   color: #4a5568;
   font-weight: 600;
+  text-align: left;
 }
 .rw-label.rw-label-error {
   color: #c53030;
@@ -377,6 +378,7 @@
 }
 .rw-login-container .rw-form-wrapper {
   width: 100%;
+  text-align: center;
 }
 .rw-login-link {
   margin-top: 1rem;
@@ -385,3 +387,12 @@
   text-align: center;
   flex-basis: 100%;
 }
+.rw-webauthn-wrapper {
+  margin: 1.5rem 1rem 1rem;
+  line-height: 1.4;
+}
+.rw-webauthn-wrapper h2 {
+  font-size: 150%;
+  font-weight: bold;
+  margin-bottom: 1rem;
+}
diff --git a/packages/cli/src/commands/generate/scaffold/templates/assets/scaffold.tailwind.css.template b/packages/cli/src/commands/generate/scaffold/templates/assets/scaffold.tailwind.css.template
@@ -128,7 +128,7 @@
   @apply mt-8;
 }
 .rw-label {
-  @apply block mt-6 text-gray-600 font-semibold;
+  @apply block mt-6 text-gray-600 font-semibold text-left;
 }
 .rw-label.rw-label-error {
   @apply text-red-600;
@@ -230,8 +230,14 @@
   @apply flex items-center justify-center flex-wrap mx-auto w-96 my-16;
 }
 .rw-login-container .rw-form-wrapper {
-  @apply w-full;
+  @apply w-full text-center;
 }
 .rw-login-link {
   @apply mt-4 text-gray-600 text-sm text-center w-full;
 }
+.rw-webauthn-wrapper {
+  @apply mt-6 mx-4 leading-6;
+}
+.rw-webauthn-wrapper h2 {
+  @apply mb-4 text-xl font-bold;
+}