Bcrypt in client component?

[regal loom]

Is there any way to use these two functions in client component?

import bcrypt from 'bcrypt';

export async function hashPassword(password: string) {
  return await bcrypt.hash(password, 10)
}

export async function comparePassword(password: string, hashedPassword: string) {
  return await bcrypt.compare(password, hashedPassword)
}
``` right now i get this error:

Module not found: Can't resolve 'fs'

[wanton steeple]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

      🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in <id:customize>

      ✅ You can mark a message as the answer for your post with `Right click -> Apps -> Mark Solution`
      (if you don't see the option, try refreshing Discord with Ctrl + R)

[weak bridge]

why do you want to use this in the client?

[regal loom]

Maybe thats not the best design, but i got component with many useStates - and I insert data into database in it as well

and ofc i want to hash password while inserting it into database

[regal loom]

I can show you entire code if you need

[weak bridge]

why not hash the password on the server?

[regal loom]

how would i do that if i got component with useStates that got all of the data, I could create api route?

[weak bridge]

yep

also me personally I would never implement an account system manually because I can't risk getting it wrong 😄

so I usually just use an existing product for account management

[regal loom]

its not really account system but i need hashed password

its complicated :p

[weak bridge]

haha okay

[regal loom]

thank you

[regal loom]

still getting same error even tho i made route

import { hashPassword } from "@/lib/helpers";
import { NextRequest, NextResponse } from "next/server";

export default async function POST(req: NextRequest, res: NextResponse) {
    const { password } = await req.json();
    const hash = await hashPassword(password);
    return NextResponse.json({ hash });
}

const saveProfile = async () => {

        const r = await fetch('/api/password/hash', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ password })
        })
        const { hashedPassword } = await r.json()

[weak bridge]

is the error happening inside the api route?

[regal loom]

okey nvm had to move it from utils file to route my bad thank you!