Prod release (#8)

cermakjiri · Oct 30, 2024 · 70397bb · 70397bb
2 parents 946656c + 4a45c22
commit 70397bb
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 9 deletions.
diff --git a/README.md b/README.md
@@ -9,7 +9,7 @@ A repository with full stack WebAuthn API examples.
 ## Examples
 
 1. **[Passkeys with SimpleWebAuthn & Firebase](examples/simplewebauthn)**
-    - Creating (user registration), retrieving (user login), linking, removing of passkeys.
+    - Creating (user registration), retrieving (user login), linking multiple, and removing passkeys.
     - Issuing a JWT token via Firebase Auth once user is authenticated.
     - Passkes are stored in Firebase Firestore.
     - Formatting and parsing of WebAuthn API request / responses done via SimpleWebAuthn library.

diff --git a/examples/simplewebauthn/src/logger/index.ts b/examples/simplewebauthn/src/logger/index.ts
@@ -2,6 +2,20 @@ import { createLogger } from '@workspace/logger';
 
 import { env } from '~env';
 
+const ignoredErrorMessages = [
+    'The operation either timed out or was not allowed.',
+    'The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission',
+    'The authenticator was previously registered',
+    'Failed to fetch',
+] as const;
+
 export const logger = createLogger('app', {
     outputToConsole: env.NEXT_PUBLIC_NODE_ENV !== 'production',
+    captureExceptionFilter: error => {
+        if (ignoredErrorMessages.some(ignoredErrorMessage => ignoredErrorMessage.startsWith(error.message))) {
+            return false;
+        }
+
+        return true;
+    },
 });
diff --git a/...thn/src/modules/passkeys/components/PasskeysWithFirebasePage/PasskeysWithFirebasePage.tsx b/...thn/src/modules/passkeys/components/PasskeysWithFirebasePage/PasskeysWithFirebasePage.tsx
@@ -8,17 +8,17 @@ import { ExampleWrapper } from './PasskeysWithFirebasePage.styles';
 export const PasskeysWithFirebasePage = () => {
     return (
         <>
-            <MainHeader pageTitle='WebAuthn Authentication with Firebase' />
+            <MainHeader pageTitle='Passkeys Authentication with Firebase' />
 
             <ExampleWrapper>
                 <Container maxWidth='lg'>
                     <ExampleHeader
-                        title='WebAuthn Authentication with Firebase'
+                        title='Passkeys authentication with Firebase'
                         description={
                             <>
-                                A full-stack example of creating a passkey (registration ceremony) and then retrieving
-                                it (login ceremony) with Firebase Firestore integration to store the passkey and
-                                Firebase Auth for issuing JWT token.
+                                A full-stack example of creating a passkey (attestation ceremony) and then retrieving it
+                                (assertation ceremony) with Firebase Firestore integration to store the passkey and
+                                Firebase Auth for issuing a JWT token.
                             </>
                         }
                     />

diff --git a/examples/simplewebauthn/src/pages/_document.tsx b/examples/simplewebauthn/src/pages/_document.tsx
@@ -14,6 +14,10 @@ function MyDocument({ emotionStyleTags }: MyDocumentProps) {
         <Html lang='en'>
             <Head>
                 <meta charSet='utf-8' />
+                <meta
+                    name='description'
+                    content='A full-stack WebAuthn example of creating a passkey (attestation ceremony) and then retrieving it (assertation ceremony) with Firebase Firestore integration to store the passkey and Firebase Auth for issuing a JWT token.'
+                />
                 {/* TODO: */}
                 {/* <meta name='theme-color' content='#D2D119' /> */}
                 <meta name='emotion-insertion-point' content='' />

diff --git a/packages/logger/index.ts b/packages/logger/index.ts
@@ -6,6 +6,10 @@ export function createLogger(
     name: string,
     props: {
         outputToConsole: boolean;
+        /**
+         * If returns true, the error will be captured by Sentry.
+         */
+        captureExceptionFilter?: (error: Error) => boolean;
     },
 ) {
     const logger = getLogger(name);
@@ -17,6 +21,7 @@ export function createLogger(
     }
 
     const logError = logger.error;
+    const { captureExceptionFilter = () => true } = props;
 
     return {
         ...logger,
@@ -25,7 +30,9 @@ export function createLogger(
                 setExtras(extras);
             }
 
-            captureException(error);
+            if (captureExceptionFilter(error)) {
+                captureException(error);
+            }
 
             logError(error, extras);
         },

diff --git a/packages/ui/src/components/PageHeader/PageHeader.tsx b/packages/ui/src/components/PageHeader/PageHeader.tsx
@@ -1,5 +1,8 @@
+import Link from 'next/link';
+import { GitHub } from '@mui/icons-material';
 import { Container } from '@mui/material';
 
+import { Icon } from '../Icon';
 import { Words } from '../Words';
 
 export interface PageHeaderProps {
@@ -11,11 +14,37 @@ export const PageHeader = ({ children }: PageHeaderProps) => {
         <Container
             maxWidth='xl'
             sx={theme => ({
-                padding: theme.spacing(3, 0),
+                padding: theme.spacing(3, 1.5),
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'center',
             })}
             component='header'
         >
-            <Words variant='h1'>{children}</Words>
+            <Words
+                variant='h1'
+                sx={theme => ({
+                    [theme.breakpoints.down('sm')]: {
+                        fontSize: theme.typography.h3.fontSize,
+                    },
+                })}
+            >
+                {children}
+            </Words>
+            <Link
+                href='https://github.com/cermakjiri/with-webauthn'
+                target='_blank'
+                title='A repository with full stack WebAuthn API examples.'
+            >
+                <Icon
+                    icon={GitHub}
+                    sx={{
+                        color: '#000',
+                        height: 32,
+                        width: 32,
+                    }}
+                />
+            </Link>
         </Container>
     );
 };