Prod deployment

README.md

@@ -8,7 +8,7 @@ A repository with full stack WebAuthn API examples.
 
 ## Examples
 
-1. **[Passkeys with SimpleWebAuthn & Firebase](examples/simplewebauthn)**
+1. **[Default WebAuthn Example - Passkeys with SimpleWebAuthn & Firebase](examples/webauthn-default/README.md)**
     - 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.
@@ -47,7 +47,7 @@ A repository with full stack WebAuthn API examples.
     ```
 
 3. Then continue with final steps for specific example:
-    - [Passkeys with SimpleWebAuthn & Firebase](examples/simplewebauthn/README.md)
+    - [Passkeys with SimpleWebAuthn & Firebase](examples/webauthn-default/README.md)
 
 ## Have you a found a bug?
 

examples/simplewebauthn/.env.template.local → examples/webauthn-default/.env.template.local

@@ -12,6 +12,9 @@ NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=""
 NEXT_PUBLIC_FIREBASE_APP_ID=""
 NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=""
 
+# Optionally, specify specific Firestore database ID
+# NEXT_PUBLIC_FIREBASE_DB_ID=""
+
 # Sentry
 NEXT_PUBLIC_DEV_SENTRY_DISABLED=true
 # NEXT_PUBLIC_SENTRY_DSN=""

examples/webauthn-default/.env.template.server

@@ -0,0 +1,6 @@
+FIREBASE_PROJECT_ID=""
+FIREBASE_PRIVATE_KEY=""
+FIREBASE_CLIENT_EMAIL=""
+
+# Optionally, specify specific Firestore database ID
+# FIREBASE_DB_ID=""

examples/simplewebauthn/README.md → examples/webauthn-default/README.md

@@ -1,4 +1,4 @@
-# Passkeys with SimpleWebAuthn & Firebase
+# Default WebAuthn Example - Passkeys with SimpleWebAuthn & Firebase
 
 -   Creating (user registration), retrieving (user login), linking multiple, and removing passkeys.
 -   Issuing a JWT token via Firebase Auth once user is authenticated.
@@ -24,7 +24,7 @@ Assuming you've already finished [those steps in the main README](../../README.m
     3. Copy `.env.template.server` to `.env.server`:
 
         - Create a new private key in `Firebase > Project settings > Service accounts`.
-        - Fill up all those `Firebase_` env. vars.
+        - Fill up all those `FIREBASE_` env. vars.
 
     4. Don't forget to add `localhost` as Authorized domain in Firebase:
 

examples/simplewebauthn/next.config.ts → examples/webauthn-default/next.config.ts

@@ -3,8 +3,6 @@ import { withSentryConfig } from '@sentry/nextjs';
 import { config } from 'dotenv';
 import type { dependencies } from 'package.json';
 
-import './src/env/env.mjs';
-
 if (process.env.NODE_ENV === 'development') {
     config({
         path: '.env.local',
@@ -21,11 +19,9 @@ const nextConfig: NextConfig = {
         defaultLocale: 'en',
     },
 
-    transpilePackages: ['@workspace/ui', '@workspace/logger'] satisfies Dependency[],
+    transpilePackages: ['@workspace/common'] satisfies Dependency[],
 
-    redirects: async () => {
-        return [];
-    },
+    redirects: async () => [],
 };
 
 // Make sure adding Sentry options is the last code to run before exporting, to

examples/webauthn-default/package.json

@@ -0,0 +1,31 @@
+{
+    "name": "webauthn-default-example",
+    "version": "0.0.1",
+    "type": "module",
+    "scripts": {
+        "dev": "next dev --turbopack",
+        "build": "next build",
+        "start": "next start",
+        "lint": "eslint-lint --config=eslint.config.mjs ./src/**/*.{ts,tsx}",
+        "lint:fix": "yarn lint --fix",
+        "format": "prettier-format",
+        "cir-dep": "check-cir-deps ./src"
+    },
+    "dependencies": {
+        "@workspace/common": "workspace:*",
+        "next": "15.0.3",
+        "react": "18.3.1",
+        "react-dom": "18.3.1"
+    },
+    "devDependencies": {
+        "@tooling/eslint": "workspace:*",
+        "@tooling/madge": "workspace:*",
+        "@tooling/prettier": "workspace:*",
+        "@tooling/typescript": "workspace:*",
+        "browserslist-config-custom": "workspace:*"
+    },
+    "prettier": "@tooling/prettier/config",
+    "browserslist": [
+        "extends browserslist-config-custom"
+    ]
+}

examples/simplewebauthn/public/manifest.json → examples/webauthn-default/public/manifest.json

@@ -6,7 +6,7 @@
     "display": "standalone",
     "dir": "auto",
     "lang": "en-US",
-    "name": "With WebAuthn full stack examples",
+    "name": "With WebAuthn full stack example",
     "short_name": "With WebAuthn",
     "start_url": "/"
 }

examples/simplewebauthn/sentry.client.config.ts → examples/webauthn-default/sentry.client.config.ts

@@ -4,7 +4,7 @@
 
 import * as Sentry from '@sentry/nextjs';
 
-import { env } from '~env';
+import { env } from '@workspace/common/client/env';
 
 if (env.NEXT_PUBLIC_DEV_SENTRY_DISABLED !== 'true') {
     Sentry.init({

examples/simplewebauthn/sentry.edge.config.ts → examples/webauthn-default/sentry.edge.config.ts

@@ -5,7 +5,7 @@
 
 import * as Sentry from '@sentry/nextjs';
 
-import { env } from '~env';
+import { env } from '@workspace/common/client/env';
 
 if (env.NEXT_PUBLIC_DEV_SENTRY_DISABLED !== 'true') {
     Sentry.init({

examples/simplewebauthn/sentry.server.config.ts → examples/webauthn-default/sentry.server.config.ts

@@ -4,7 +4,7 @@
 
 import * as Sentry from '@sentry/nextjs';
 
-import { env } from '~env';
+import { env } from '@workspace/common/client/env';
 
 if (env.NEXT_PUBLIC_DEV_SENTRY_DISABLED !== 'true') {
     Sentry.init({

examples/simplewebauthn/src/modules/passkeys/components/PasskeysWithFirebasePage/FirebaseExample/AuthFormContainer/AuthFormContainer.styles.tsx → examples/webauthn-default/src/components/WebAuthnDefaultExamplePage/DefaultExample/AuthFormContainer/AuthFormContainer.styles.tsx

@@ -1,4 +1,4 @@
-import { styled } from '@workspace/ui';
+import { styled } from '@workspace/common/client/ui-kit';
 
 export const AuthFormContainer = styled('div')(() => ({
     display: 'flex',

examples/webauthn-default/src/components/WebAuthnDefaultExamplePage/DefaultExample/DefaultExample.tsx

@@ -0,0 +1,25 @@
+import { useState } from 'react';
+
+import { ExampleAuth, ExampleBody, ExampleFrame } from '@workspace/common/client/example/components';
+
+import { CurrentExampleRoute, DefaultExampleRouter } from './DefaultExampleRouter';
+import { DefaultExampleTopBar } from './DefaultExampleTopBar';
+import { exampleRoutes } from './routes';
+
+export const DefaultExample = () => {
+    const [expanded, setExpanded] = useState(true);
+
+    return (
+        <ExampleFrame expanded={expanded}>
+            <ExampleAuth>
+                <DefaultExampleRouter routes={exampleRoutes}>
+                    <DefaultExampleTopBar expanded={expanded} onToggleExpand={setExpanded} />
+
+                    <ExampleBody>
+                        <CurrentExampleRoute />
+                    </ExampleBody>
+                </DefaultExampleRouter>
+            </ExampleAuth>
+        </ExampleFrame>
+    );
+};

examples/webauthn-default/src/components/WebAuthnDefaultExamplePage/DefaultExample/DefaultExampleRouter/DefaultExampleRouter.tsx

@@ -0,0 +1,27 @@
+import type { ReactNode } from 'react';
+
+import { createExampleRouter, useExampleAuthSession } from '@workspace/common/client/example/components';
+
+import type { ExampleRoutes } from '../routes';
+
+const { ExampleRouter, useExampleRouter, CurrentExampleRoute } = createExampleRouter<ExampleRoutes>();
+
+export interface DefaultExampleRouterProps {
+    children: ReactNode;
+    routes: ExampleRoutes;
+}
+
+/**
+ * Yes, this not so smart solution but it's just an example, so please focus on the WebAutn part. Thanks.
+ */
+export const DefaultExampleRouter = ({ children, routes }: DefaultExampleRouterProps) => {
+    const { session } = useExampleAuthSession();
+
+    return (
+        <ExampleRouter initialRoute={session.state === 'authenticated' ? '/passkeys' : '/register'} routes={routes}>
+            {children}
+        </ExampleRouter>
+    );
+};
+
+export { CurrentExampleRoute, useExampleRouter };

examples/webauthn-default/src/components/WebAuthnDefaultExamplePage/DefaultExample/DefaultExampleRouter/index.ts

@@ -0,0 +1 @@
+export * from './DefaultExampleRouter';