Guess passkey name from user agent in livewire starter kits (#170)

* Guess passkey name from user agent

* Improve passkey name guessing from user agent

---------

Co-authored-by: Wendell Adriel <wendelladriel.ti@gmail.com>

Author: luisprmat

kits/Inertia/Fortify/React/resources/js/components/passkey-register.tsx

@@ -13,13 +13,21 @@ export default function PasskeyRegistration({ onSuccess }: Props) {
     const [name, setName] = useState(() => {
         const ua = navigator.userAgent;
 
-        const browser = ['Chrome', 'Firefox', 'Safari', 'Edge', 'Opera'].find(
-            (browser) => new RegExp(browser).test(ua),
-        );
+        const browser = [
+            { pattern: /Edg|Edge/, name: 'Edge' },
+            { pattern: /OPR|Opera|OPiOS/, name: 'Opera' },
+            { pattern: /Firefox|FxiOS/, name: 'Firefox' },
+            { pattern: /Chrome|CriOS/, name: 'Chrome' },
+            { pattern: /Safari/, name: 'Safari' },
+        ].find(({ pattern }) => pattern.test(ua))?.name;
 
-        const os = ['iPhone', 'iPad', 'Android', 'Mac', 'Windows'].find((os) =>
-            new RegExp(os).test(ua),
-        );
+        const os = [
+            { pattern: /iPhone/, name: 'iPhone' },
+            { pattern: /iPad|Macintosh(?=.*Mobile)/, name: 'iPad' },
+            { pattern: /Android/, name: 'Android' },
+            { pattern: /Mac/, name: 'Mac' },
+            { pattern: /Windows/, name: 'Windows' },
+        ].find(({ pattern }) => pattern.test(ua))?.name;
 
         return [browser, os].filter(Boolean).join(' on ') || '';
     });

kits/Inertia/Fortify/Svelte/resources/js/components/PasskeyRegister.svelte

@@ -14,13 +14,21 @@
     const getDefaultPasskeyName = () => {
         const ua = navigator.userAgent;
 
-        const browser = ['Chrome', 'Firefox', 'Safari', 'Edge', 'Opera'].find(
-            (browser) => new RegExp(browser).test(ua),
-        );
+        const browser = [
+            { pattern: /Edg|Edge/, name: 'Edge' },
+            { pattern: /OPR|Opera|OPiOS/, name: 'Opera' },
+            { pattern: /Firefox|FxiOS/, name: 'Firefox' },
+            { pattern: /Chrome|CriOS/, name: 'Chrome' },
+            { pattern: /Safari/, name: 'Safari' },
+        ].find(({ pattern }) => pattern.test(ua))?.name;
 
-        const os = ['iPhone', 'iPad', 'Android', 'Mac', 'Windows'].find((os) =>
-            new RegExp(os).test(ua),
-        );
+        const os = [
+            { pattern: /iPhone/, name: 'iPhone' },
+            { pattern: /iPad|Macintosh(?=.*Mobile)/, name: 'iPad' },
+            { pattern: /Android/, name: 'Android' },
+            { pattern: /Mac/, name: 'Mac' },
+            { pattern: /Windows/, name: 'Windows' },
+        ].find(({ pattern }) => pattern.test(ua))?.name;
 
         return [browser, os].filter(Boolean).join(' on ') || '';
     };

kits/Inertia/Fortify/Vue/resources/js/components/PasskeyRegister.vue

@@ -13,13 +13,21 @@ const emit = defineEmits<{
 const getDefaultPasskeyName = () => {
     const ua = navigator.userAgent;
 
-    const browser = ['Chrome', 'Firefox', 'Safari', 'Edge', 'Opera'].find(
-        (browser) => new RegExp(browser).test(ua),
-    );
-
-    const os = ['iPhone', 'iPad', 'Android', 'Mac', 'Windows'].find((os) =>
-        new RegExp(os).test(ua),
-    );
+    const browser = [
+        { pattern: /Edg|Edge/, name: 'Edge' },
+        { pattern: /OPR|Opera|OPiOS/, name: 'Opera' },
+        { pattern: /Firefox|FxiOS/, name: 'Firefox' },
+        { pattern: /Chrome|CriOS/, name: 'Chrome' },
+        { pattern: /Safari/, name: 'Safari' },
+    ].find(({ pattern }) => pattern.test(ua))?.name;
+
+    const os = [
+        { pattern: /iPhone/, name: 'iPhone' },
+        { pattern: /iPad|Macintosh(?=.*Mobile)/, name: 'iPad' },
+        { pattern: /Android/, name: 'Android' },
+        { pattern: /Mac/, name: 'Mac' },
+        { pattern: /Windows/, name: 'Windows' },
+    ].find(({ pattern }) => pattern.test(ua))?.name;
 
     return [browser, os].filter(Boolean).join(' on ') || '';
 };

kits/Livewire/Fortify/resources/views/components/passkey-registration.blade.php

@@ -12,7 +12,29 @@
         updateSupport() {
             this.supported = Boolean(window.Passkeys?.isSupported());
         },
+        getDefaultPasskeyName() {
+            const ua = navigator.userAgent;
+
+            const browser = [
+                { pattern: /Edg|Edge/, name: 'Edge' },
+                { pattern: /OPR|Opera|OPiOS/, name: 'Opera' },
+                { pattern: /Firefox|FxiOS/, name: 'Firefox' },
+                { pattern: /Chrome|CriOS/, name: 'Chrome' },
+                { pattern: /Safari/, name: 'Safari' },
+            ].find(({ pattern }) => pattern.test(ua))?.name;
+
+            const os = [
+                { pattern: /iPhone/, name: 'iPhone' },
+                { pattern: /iPad|Macintosh(?=.*Mobile)/, name: 'iPad' },
+                { pattern: /Android/, name: 'Android' },
+                { pattern: /Mac/, name: 'Mac' },
+                { pattern: /Windows/, name: 'Windows' },
+            ].find(({ pattern }) => pattern.test(ua))?.name;
+
+            return [browser, os].filter(Boolean).join(' on ') || '';
+        },
         init() {
+            this.name = this.getDefaultPasskeyName();
             this.updateSupport();
 
             window.addEventListener('passkeys:ready', () => this.updateSupport(), { once: true });