├── .gitignore
├── README.md
├── app
    ├── app.vue
    └── pages
    │   ├── index.vue
    │   └── scrypt.vue
├── eslint.config.mjs
├── nuxt.config.ts
├── package.json
├── pnpm-lock.yaml
├── public
    └── favicon.ico
├── server
    ├── api
    │   ├── env.ts
    │   ├── hash.post.ts
    │   ├── scrypt
    │   │   ├── hash.post.ts
    │   │   └── verify.post.ts
    │   └── verify.post.ts
    └── tsconfig.json
└── tsconfig.json


/.gitignore:
--------------------------------------------------------------------------------
 1 | # Nuxt dev/build outputs
 2 | .output
 3 | .data
 4 | .nuxt
 5 | .nitro
 6 | .cache
 7 | dist
 8 | 
 9 | # Node dependencies
10 | node_modules
11 | 
12 | # Logs
13 | logs
14 | *.log
15 | 
16 | # Misc
17 | .DS_Store
18 | .fleet
19 | .idea
20 | 
21 | # Local env files
22 | .env
23 | .env.*
24 | !.env.example
25 | 
26 | .wrangler


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Nuxt Bcrypt Edge
 2 | 
 3 | A demo of hashing and verifying passwords with [bcrypt-edge](https://github.com/bruceharrison1984/bcrypt-edge) on [Cloudflare Workers](https://developers.cloudflare.com/workers/) with [Nuxt](https://nuxt.com) and [NuxtHub](https://hub.nuxt.com).
 4 | 
 5 | https://bcrypt.nuxt.dev
 6 | 
 7 | ## Features
 8 | 
 9 | - Hash & verify a password with bcrypt-edge
10 | - Also works with Scrypt (no dependency needed)
11 | - Server-Side rendering on Cloudflare Workers
12 | 
13 | ## Setup
14 | 
15 | Make sure to install the dependencies with [pnpm](https://pnpm.io/installation#using-corepack):
16 | 
17 | ```bash
18 | pnpm install
19 | ```
20 | 
21 | ## Development Server
22 | 
23 | Start the development server on `http://localhost:3000`:
24 | 
25 | ```bash
26 | pnpm dev
27 | ```
28 | 
29 | ## Hashing and Verifying
30 | 
31 | Hashing the password [./server/api/hash.post.ts](./server/api/hash.post.ts):
32 | 
33 | ```ts
34 | import { hashSync } from 'bcrypt-edge/dist/bcrypt-edge'
35 | 
36 | export default defineEventHandler(async (event) => {
37 |   const { password } = await readBody(event)
38 | 
39 |   const hash = hashSync(password, 10)
40 | 
41 |   return { hash }
42 | });
43 | ```
44 |   
45 | Verifying the password [./server/api/verify.post.ts](./server/api/verify.post.ts):
46 | 
47 | ```ts
48 | import { compareSync } from 'bcrypt-edge/dist/bcrypt-edge'
49 | 
50 | export default defineEventHandler(async (event) => {
51 |   const { hash, password } = await readBody(event)
52 | 
53 |   const isValid = compareSync(password, hash)
54 | 
55 |   return { isValid }
56 | });
57 | ```
58 | 
59 | ## Production
60 | 
61 | Build the application for production:
62 | 
63 | ```bash
64 | pnpm build
65 | ```
66 | 
67 | ## Deploy
68 | 
69 | 
70 | Deploy the application on the Edge with [NuxtHub](https://hub.nuxt.com) on your Cloudflare account:
71 | 
72 | ```bash
73 | npx nuxthub deploy
74 | ```
75 | 
76 | Then checkout your server logs, analaytics and more in the [NuxtHub Admin](https://admin.hub.nuxt.com).
77 | 
78 | You can also deploy using [Cloudflare Pages CI](https://hub.nuxt.com/docs/getting-started/deploy#cloudflare-pages-ci).
79 | 
80 | 


--------------------------------------------------------------------------------
/app/app.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | useSeoMeta({
 3 |   title: 'Nuxt + Bcrypt + Cloudflare Workers',
 4 |   description: 'A simple example of how to use Bcrypt in a Nuxt application deployed on Cloudflare Workers with NuxtHub',
 5 | })
 6 | </script>
 7 | 
 8 | <template>
 9 |   <NuxtRouteAnnouncer />
10 |   <NuxtLoadingIndicator />
11 |   <NuxtPage />
12 | </template>
13 | 


--------------------------------------------------------------------------------
/app/pages/index.vue:
--------------------------------------------------------------------------------
  1 | <script setup>
  2 | const rounds = ref(10)
  3 | const password = ref('')
  4 | const hash = ref('')
  5 | const time = ref(0)
  6 | async function hashPassword() {
  7 |   const start = Date.now()
  8 |   const res = await $fetch('/api/hash', {
  9 |     method: 'POST',
 10 |     body: {
 11 |       rounds: rounds.value,
 12 |       password: password.value,
 13 |     },
 14 |   })
 15 |   hash.value = res.hash
 16 |   time.value = Math.round(Date.now() - start)
 17 | }
 18 | 
 19 | const passwordVerify = ref('')
 20 | const isValid = ref(false)
 21 | async function verifyPassword() {
 22 |   const start = Date.now()
 23 |   const res = await $fetch('/api/verify', {
 24 |     method: 'POST',
 25 |     body: {
 26 |       rounds: rounds.value,
 27 |       password: passwordVerify.value,
 28 |       hash: hash.value,
 29 |     },
 30 |   })
 31 |   isValid.value = res.isValid
 32 |   time.value = Math.round(Date.now() - start)
 33 | }
 34 | </script>
 35 | 
 36 | <template>
 37 |   <div class="centered">
 38 |     <h1>Nuxt + Bcrypt + Cloudflare Workers</h1>
 39 |     <p>
 40 |       <NuxtLink to="/scrypt">
 41 |         See Scrypt
 42 |       </NuxtLink>
 43 |     </p>
 44 |     <form @submit.prevent="hashPassword">
 45 |       <div class="group">
 46 |         <label for="rounds">Rounds: </label>
 47 |         <input
 48 |           id="rounds"
 49 |           v-model="rounds"
 50 |           type="number"
 51 |           min="1"
 52 |           max="13"
 53 |         >
 54 |       </div>
 55 |       <input v-model="password" type="password">
 56 |       <button type="submit">
 57 |         Hash password
 58 |       </button>
 59 |     </form>
 60 |     <form v-if="hash" @submit.prevent="verifyPassword">
 61 |       <p>{{ hash }}</p>
 62 |       <input v-model="passwordVerify" type="password">
 63 |       <button type="submit">
 64 |         Verify password
 65 |       </button>
 66 |       <p>{{ isValid ? 'Good password' : 'Wrong password!' }}</p>
 67 |     </form>
 68 |     <p v-if="time">
 69 |       Time: {{ time }}ms
 70 |     </p>
 71 |     <p>
 72 |       <a href="https://hub.nuxt.com">Deployed with NuxtHub</a>
 73 |       •
 74 |       <a href="https://github.com/atinux/nuxt-bcrypt-edge">Source code</a>
 75 |     </p>
 76 |   </div>
 77 | </template>
 78 | 
 79 | <style scoped>
 80 | .centered {
 81 |   position: absolute;
 82 |   width: 100%;
 83 |   text-align: center;
 84 |   top: 50%;
 85 |   left: 50%;
 86 |   transform: translate(-50%, -50%);
 87 |   margin: 0;
 88 |   font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 89 | }
 90 | .group {
 91 |   margin-bottom: 1rem;
 92 | }
 93 | a {
 94 |   color: #888;
 95 |   text-decoration: none;
 96 | }
 97 | a:hover {
 98 |   text-decoration: underline;
 99 | }
100 | </style>
101 | 


--------------------------------------------------------------------------------
/app/pages/scrypt.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | const password = ref('')
 3 | const hash = ref('')
 4 | const time = ref(0)
 5 | async function hashPassword() {
 6 |   const start = Date.now()
 7 |   const res = await $fetch('/api/scrypt/hash', {
 8 |     method: 'POST',
 9 |     body: {
10 |       password: password.value,
11 |     },
12 |   })
13 |   hash.value = res.hash
14 |   time.value = Math.round(Date.now() - start)
15 | }
16 | 
17 | const passwordVerify = ref('')
18 | const isValid = ref(false)
19 | async function verifyPassword() {
20 |   const start = Date.now()
21 |   const res = await $fetch('/api/scrypt/verify', {
22 |     method: 'POST',
23 |     body: {
24 |       password: passwordVerify.value,
25 |       hash: hash.value,
26 |     },
27 |   })
28 |   isValid.value = res.isValid
29 |   time.value = Math.round(Date.now() - start)
30 | }
31 | </script>
32 | 
33 | <template>
34 |   <div class="centered">
35 |     <h1>Nuxt + Scrypt + Cloudflare Workers</h1>
36 |     <p>
37 |       <NuxtLink to="/">
38 |         See Bcrypt
39 |       </NuxtLink>
40 |     </p>
41 |     <form @submit.prevent="hashPassword">
42 |       <input v-model="password" type="password">
43 |       <button type="submit">
44 |         Hash password
45 |       </button>
46 |     </form>
47 |     <form v-if="hash" @submit.prevent="verifyPassword">
48 |       <p>{{ hash }}</p>
49 |       <input v-model="passwordVerify" type="password">
50 |       <button type="submit">
51 |         Verify password
52 |       </button>
53 |       <p>{{ isValid ? 'Good password' : 'Wrong password!' }}</p>
54 |     </form>
55 |     <p v-if="time">
56 |       Time: {{ time }}ms
57 |     </p>
58 |     <p>
59 |       <a href="https://hub.nuxt.com">Deployed with NuxtHub</a>
60 |       •
61 |       <a href="https://github.com/atinux/nuxt-bcrypt-edge">Source code</a>
62 |     </p>
63 |   </div>
64 | </template>
65 | 
66 | <style scoped>
67 | .centered {
68 |   position: absolute;
69 |   width: 100%;
70 |   text-align: center;
71 |   top: 50%;
72 |   left: 50%;
73 |   transform: translate(-50%, -50%);
74 |   margin: 0;
75 |   font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
76 | }
77 | .group {
78 |   margin-bottom: 1rem;
79 | }
80 | a {
81 |   color: #888;
82 |   text-decoration: none;
83 | }
84 | a:hover {
85 |   text-decoration: underline;
86 | }
87 | </style>
88 | 


--------------------------------------------------------------------------------
/eslint.config.mjs:
--------------------------------------------------------------------------------
1 | // @ts-check
2 | import withNuxt from './.nuxt/eslint.config.mjs'
3 | 
4 | export default withNuxt(
5 |   // Your custom configs here
6 | ).overrideRules({
7 |   'vue/max-attributes-per-line': ['warn', { singleline: 3 }],
8 | })
9 | 


--------------------------------------------------------------------------------
/nuxt.config.ts:
--------------------------------------------------------------------------------
 1 | // https://nuxt.com/docs/api/configuration/nuxt-config
 2 | export default defineNuxtConfig({
 3 |   compatibilityDate: '2024-07-30',
 4 |   // https://nuxt.com/docs/getting-started/upgrade#testing-nuxt-4
 5 |   future: { compatibilityVersion: 4 },
 6 | 
 7 |   // https://nuxt.com/modules
 8 |   modules: ['@nuxthub/core', '@nuxt/eslint', 'nuxt-auth-utils'],
 9 | 
10 |   // https://eslint.nuxt.com
11 |   eslint: {
12 |     config: {
13 |       stylistic: {
14 |         quotes: 'single'
15 |       }
16 |     }
17 |   },
18 |   // https://devtools.nuxt.com
19 |   devtools: { enabled: true }
20 | })


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "nuxt-app",
 3 |   "private": true,
 4 |   "type": "module",
 5 |   "scripts": {
 6 |     "build": "nuxt build",
 7 |     "dev": "nuxt dev",
 8 |     "generate": "nuxt generate",
 9 |     "preview": "nuxt preview",
10 |     "postinstall": "nuxt prepare",
11 |     "lint": "eslint ."
12 |   },
13 |   "dependencies": {
14 |     "@adonisjs/hash": "^9.0.5",
15 |     "@nuxt/eslint": "^0.5.7",
16 |     "@nuxthub/core": "0.7.22",
17 |     "bcrypt-edge": "^0.1.0",
18 |     "nuxt": "^3.13.2",
19 |     "nuxt-auth-utils": "^0.4.2",
20 |     "vue": "^3.5.10",
21 |     "vue-router": "^4.4.5"
22 |   },
23 |   "devDependencies": {
24 |     "@nuxt/eslint-config": "^0.5.7",
25 |     "eslint": "^9.11.1",
26 |     "vue-tsc": "^2.1.6",
27 |     "wrangler": "^3.79.0"
28 |   },
29 |   "packageManager": "pnpm@9.11.0"
30 | }
31 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/atinux/nuxt-bcrypt-edge/4bb2fe185722240155a4e2e75c9dd3b5153f0fe9/public/favicon.ico


--------------------------------------------------------------------------------
/server/api/env.ts:
--------------------------------------------------------------------------------
1 | export default eventHandler(async (event) => {
2 |   return {
3 |     test: true,
4 |     projectKey: process.env.NUXT_HUB_PROJECT_KEY
5 |   }
6 | })


--------------------------------------------------------------------------------
/server/api/hash.post.ts:
--------------------------------------------------------------------------------
 1 | import { hashSync } from 'bcrypt-edge'
 2 | 
 3 | export default defineEventHandler(async (event) => {
 4 |   const { rounds, password } = await readBody(event)
 5 |   const sanitizedRounds = Math.max(4, Math.min(13, typeof rounds === 'number' ? Math.floor(rounds) : 10))
 6 | 
 7 |   const hash = hashSync(password, sanitizedRounds)
 8 | 
 9 |   return { hash }
10 | });


--------------------------------------------------------------------------------
/server/api/scrypt/hash.post.ts:
--------------------------------------------------------------------------------
1 | export default defineEventHandler(async (event) => {
2 |   const { password } = await readBody(event)
3 |   const hash = await hashPassword(password)
4 |   return { hash }
5 | });


--------------------------------------------------------------------------------
/server/api/scrypt/verify.post.ts:
--------------------------------------------------------------------------------
1 | export default defineEventHandler(async (event) => {
2 |   const { hash, password } = await readBody(event)
3 | 
4 |   const isValid = await verifyPassword(hash, password)
5 | 
6 |   return { isValid }
7 | });


--------------------------------------------------------------------------------
/server/api/verify.post.ts:
--------------------------------------------------------------------------------
1 | import { compareSync } from 'bcrypt-edge'
2 | 
3 | export default defineEventHandler(async (event) => {
4 |   const { hash, password } = await readBody(event)
5 | 
6 |   const isValid = compareSync(password, hash)
7 | 
8 |   return { isValid }
9 | });


--------------------------------------------------------------------------------
/server/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "../.nuxt/tsconfig.server.json"
3 | }
4 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   // https://nuxt.com/docs/guide/concepts/typescript
3 |   "extends": "./.nuxt/tsconfig.json"
4 | }
5 | 


--------------------------------------------------------------------------------