Bcrypt in client component?

Answered

style posted this in #help-forum

2023-07-07T11:33:14.000Z

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'

Answered by Cape lion

yep

View full answer

16 Replies

@style Is there any way to use these two functions in client component? ts 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'

Cape lion

2023-07-07T11:49:49.000Z

why do you want to use this in the client?

styleOP

2023-07-07T11:50:29.000Z

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

@Cape lion why do you want to use this in the client?

styleOP

2023-07-07T11:52:41.000Z

I can show you entire code if you need

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

Cape lion

2023-07-07T11:55:01.000Z

why not hash the password on the server?

@Cape lion why not hash the password on the server?

styleOP

2023-07-07T11:56:26.000Z

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

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

Cape lion

2023-07-07T11:59:38.000Z

yep

Answer

Cape lion

2023-07-07T12:00:14.000Z

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

styleOP

2023-07-07T12:00:31.000Z

its not really account system but i need hashed password

its complicated :p

Cape lion

2023-07-07T12:00:50.000Z

haha okay

styleOP

2023-07-07T12:02:47.000Z

thank you

@Cape lion haha okay

styleOP

2023-07-07T12:08:53.000Z

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()

@style still getting same error even tho i made route ts 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 }); } ts 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()

Cape lion

2023-07-07T12:10:11.000Z

is the error happening inside the api route?

styleOP

2023-07-07T12:11:42.000Z

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