Prod (#4)

README.md

@@ -3,3 +3,51 @@
 # With WebAuthn
 
 A repository with full stack WebAuthn API examples.
+
+<div style="text-align:left">
+
+## Examples
+
+1. **[Passkeys with SimpleWebAuthn & Firebase](examples/simplewebauthn)**
+    - Creating (user registration), retrieving (user login), linking, removing of 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.
+
+---
+
+## Development
+
+### Common Stack notes:
+
+-   The whole project is managed using tuborepo and yarn workspaces.
+-   All examples are in NextJS (React) framework.
+-   API calls are handled with React Tanstack query on client.
+-   API endpoints are build via NextJS API routes.
+-   Forms are built with react-hook-form and validated with zod schemas.
+-   Material UI with styled components as UI SDK.
+
+### How to start the project locally?
+
+1. Initialize package manager:
+   Make sure you're running Node v20. Then initialize a package manager (corepack) by calling:
+
+    ```sh
+    corepack enable
+    corepack install
+    ```
+
+    It finds `packageManager` field and install Yarn 4.
+
+2. Install dependencies:
+
+    ```sh
+    yarn install --immutable
+    ```
+
+3. Then continue with final steps for specific example:
+    - [Passkeys with SimpleWebAuthn & Firebase](examples/simplewebauthn/README.md)
+
+## Have you a found a bug?
+
+Please, open an [Github issue](https://github.com/cermakjiri/with-webauthn/issues/new/choose). Thank you. ❤️

examples/simplewebauthn/.env.template.local

@@ -0,0 +1,19 @@
+# Next.js
+NEXT_TELEMETRY_DISABLED=1
+
+NEXT_PUBLIC_CLIENT_ORIGIN=http://localhost:3000
+# NEXT_PUBLIC_CLIENT_ORIGIN=https://14e5-2a07-b242-101a-9700-15d2-5b2c-c72c-ab56.ngrok-free.app
+
+NEXT_PUBLIC_FIREBASE_API_KEY=""
+NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=""
+NEXT_PUBLIC_FIREBASE_PROJECT_ID= ""
+NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=""
+NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=""
+NEXT_PUBLIC_FIREBASE_APP_ID=""
+NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=""
+
+# Sentry
+NEXT_PUBLIC_DEV_SENTRY_DISABLED=true
+# NEXT_PUBLIC_SENTRY_DSN=""
+# SENTRY_ORG=""
+# SENTRY_PROJECT=""

examples/simplewebauthn/.env.template.server

@@ -0,0 +1,3 @@
+FIREBASE_PROJECT_ID=""
+FIREBASE_PRIVATE_KEY=""
+FIREBASE_CLIENT_EMAIL=""

examples/simplewebauthn/README.md

@@ -0,0 +1,33 @@
+# Passkeys with SimpleWebAuthn & Firebase
+
+-   Creating (user registration), retrieving (user login), linking, removing of 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.
+
+## Development
+
+### How to start it locally?
+
+Assuming you've already finished [those steps in the main README](../../README.md), let's proceed:
+
+1. Setup Firebase:
+
+    1. Create a new Firebase project
+
+    2. Copy `.env.template.local` to `.env.local`:
+
+        - Fill up all those `NEXT_PUBLIC_FIREBASE_` env. vars.
+
+    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.
+
+    4. Don't forget to add `localhost` as Authorized domain in Firebase:
+
+        - Firebase > Authentication > Settings > Authorised domains.
+
+    5. Create a Firebase firestore database
+
+2. Run `yarn dev` and checkout `http://localhost:3000` URL.

examples/simplewebauthn/next.config.mjs

@@ -3,7 +3,7 @@ import { config } from 'dotenv';
 // @ts-check
 import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
 
-// import './src/env/env.mjs';
+import './src/env/env.mjs';
 
 if (process.env.NODE_ENV === 'development') {
     config({

examples/simplewebauthn/src/env/env.mjs

@@ -5,7 +5,7 @@ export const env = createEnv({
     shared: {
         NEXT_PUBLIC_CLIENT_ORIGIN: z.string().url(),
         NEXT_PUBLIC_DEV_SENTRY_DISABLED: z.enum(['true', 'false']).optional(),
-        NEXT_PUBLIC_SENTRY_DSN: z.string(),
+        NEXT_PUBLIC_SENTRY_DSN: process.env.NODE_ENV === 'development' ? z.string().optional() : z.string(),
     },
 
     client: {

examples/simplewebauthn/src/modules/layout/components/MainHeader/MainHeader.tsx

@@ -12,7 +12,7 @@ export const MainHeader = ({ pageTitle }: MainHeaderProps) => {
             <Head>
                 <title>{`${pageTitle} | With WebAuthn`}</title>
             </Head>
-            <PageHeader>With WebAuthn demos</PageHeader>
+            <PageHeader>With WebAuthn demo</PageHeader>
         </>
     );
 };

examples/simplewebauthn/src/modules/passkeys/components/PasskeysWithFirebasePage/FirebaseExample/RegisterWithPasskey/RegisterWithPasskey.tsx

@@ -18,7 +18,7 @@ export const RegisterWithPasskey = () => {
                 schema={registerFormSchema}
                 defaultValues={{
                     // Some some random email to make it easier for demo users
-                    email: 'some.[email protected]',
+                    email: `user${Math.floor(Math.random() * 1e3)}@gmail.com`,
                 }}
                 onSubmit={registerPasskey}
             >

examples/simplewebauthn/src/server/env/index.ts

@@ -2,14 +2,9 @@ import dotenv from 'dotenv';
 import { z } from 'zod';
 
 if (process.env.NODE_ENV !== 'production') {
-    const envs = dotenv.config({
+    dotenv.config({
         path: '.env.server',
-        processEnv: {},
     });
-
-    if (envs.error) {
-        throw new Error(envs.error.message);
-    }
 }
 
 export const env = z

package.json

@@ -1,5 +1,6 @@
 {
     "name": "with-webauthn",
+    "description": "A project with full-stack WebAuthn API examples.",
     "packageManager": "[email protected]",
     "private": true,
     "type": "commonjs",
@@ -32,5 +33,17 @@
         "husky": "9.1.6",
         "turbo": "2.1.3"
     },
-    "prettier": "@tooling/prettier/config"
+    "prettier": "@tooling/prettier/config",
+    "license": "GPL-3.0-only",
+    "author": {
+        "name": "Jiří Čermák"
+    },
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/cermakjiri/with-webauthn"
+    },
+    "homepage": "https://with-webauthn.dev",
+    "bugs": {
+        "url": "https://github.com/cermakjiri/with-webauthn/issues"
+    }
 }