Crypto With Nextjs X.X

[xManuel007]

I got this error on my NextJs App

⚠ ./node_modules/bcryptjs/dist/bcrypt.js
Module not found: Can't resolve 'crypto' in 'C:\MyUser\PC\Desktop\Folder\RootProjectFolder\node_modules\bcryptjs\dist'   

Import trace for requested module:
./node_modules/bcryptjs/dist/bcrypt.js
./auth.config.ts
./auth.ts
./app/api/auth/[...nextauth]/route.ts
./node_modules/next/dist/build/webpack/loaders/next-app-loader.js?name=app%2Fapi%2Fauth%2F%5B...nextauth%5D%2Froute&page=%2Fapi%2Fauth%2F%5B...nextauth%5D%2Froute&appPaths=&pagePath=private-next-app-dir%2Fapi%2Fauth%2F%5B...nextauth%5D%2Froute.ts&appDir=C%3A%5CUsers%5CPC%5CDesktop%5CChamba%5Cdashboard-glicorsa%5Capp&pageExtensions=tsx&pageExtensions=ts&pageExtensions=jsx&pageExtensions=js&rootDir=C%3A%5CUsers%5CPC%5CDesktop%5CChamba%5Cdashboard-glicorsa&isDev=true&tsconfigPath=tsconfig.json&basePath=&assetPrefix=&nextConfigOutput=&preferredRegion=&middlewareConfig=e30%3D!./app/api/auth/[...nextauth]/route.ts?__next_edge_ssr_entry__
 ○ Compiling /api/auth/[...nextauth] ...

idk wtf is happened. I'd already tried in too many ways, (This is only the vscode terminal) because in cli browser apparently is ok

At first I tried with bcrypt but for some reason has not compatibility with NextJs, and the YT I've watched, he was using this dependency, he used Clerk auth, but for my porpuses its better next auth v5 Idk if it will help, but there is my file, related with the issue, auth.config.ts

import bcrypt from 'bcryptjs'
import type { NextAuthConfig } from "next-auth"
import credentials from "next-auth/providers/credentials"
import github from 'next-auth/providers/github'
import google from 'next-auth/providers/google'

import { LoginSchema } from "./schemas"
import { getUserByEmail } from "./data/user"

export default {
  providers: [
    github({
      clientId: process.env.GITHUB_CLIENT_ID,
      clientSecret: process.env.GITHUB_CLIENT_SECRET,
    }),
    google({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
    credentials({
      async authorize(credentials) {
        const validatedFields = LoginSchema.safeParse(credentials)

        if (validatedFields.success) {
          const { email, password } = validatedFields.data

          const user = await getUserByEmail(email)
          if (!user || !user.password) return null

          const passwordsMatch = await bcrypt.compare(
            password,
            user.password,
          )

          if (passwordsMatch) return user

        }
        return null
      }
    })
  ],
} satisfies NextAuthConfig

[CSAT1999]

Same here, im on Nextjs 14.1, using prisma ....

[Markmayalla]

Same Here am on Nextjs 14.2

[lzbadm]

Same here, on Nextjs 15.0 when I learn Nextjs

[chebum]

My guess is that you're importing code using bcryptjs from a client-side component. Make sure the code using bcryptjs reside on the server-side only. Here is how: https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#keeping-server-only-code-out-of-the-client-environment

Adding import 'server-only' on top of the import bcrypt from 'bcryptjs' will let you know which client-side component tries to import the code using bcryptjs.

[wommy]

i moved to this

https://github.com/bruceharrison1984/bcrypt-edge

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in one week if no further activity occurs. Thank you for your contributions!