you can use bcrypt in middleware

as middlware is edge function

and bcrypt doesn't work on edge function

but it is causing errors

The simple explaination is that you can't just bcrypt in middleware.

Even if you import from a file which uses bcrypt, it'll cause the error

So what can I do

Are you using any function related to bcrypt in middleware?

middleware.js

import { auth } from "./auth";
import {
    authRoutes,
    DEFAULT_REDIRECT_LOGIN_URL,
    DEFAULT_REDIRECT_HOME_URL
} from './routes';

export default auth((req) => {

    const url = req.nextUrl;
    const route = req.nextUrl.pathname;

    const isLoggedIn = !!req.auth;

    console.log(route);

    function checkAuthRoute(authRoute) {
        if (route.startsWith(authRoute)) {
            return true;
        }
        return null;
    }

    console.log(!!authRoutes.filter(checkAuthRoute).length);

    if (!!authRoutes.filter(checkAuthRoute).length) {
        if (isLoggedIn) {
            return Response.redirect(new URL(DEFAULT_REDIRECT_HOME_URL, url));
        }
        return null;
    }

    if (route.startsWith(...authRoutes)) {
        if (isLoggedIn) {
            return Response.redirect(new URL(DEFAULT_REDIRECT_HOME_URL, url));
        }
        return null;
    }

    if (!(route === "/" || route === "/signin" || route === "/signup")) {
        if (!isLoggedIn) {
            return Response.redirect(new URL(DEFAULT_REDIRECT_LOGIN_URL, url));
        }
        return null;
    }

    return null;

})

export const config = {
    matcher: ["/((?!api|_next/static|_next/image|favicon.ico).*)"],
}

Can I see the auth function?

auth.js

import NextAuth from 'next-auth';
import { connectToDatabase } from "@/app/utils/db";
import CredentialsProvider from 'next-auth/providers/credentials';
import DiscordProvider from "next-auth/providers/discord";
import Users from "@/app/lib/user.model";

export const { handlers: { GET, POST }, auth, signIn, signOut } = NextAuth({
    providers: [
        CredentialsProvider({
            credentials: {
                email: { label: "Email", type: "email" },
                password: { label: "Password", type: "password" }
            },
            async authorize(credentials) {
                await connectToDatabase();
                const user = await Users.findOne({
                    $or: [{ email: credentials.email }, { discordId: credentials.discordId }],
                });

                console.log(credentials);

                if (user && user.password) {
                    const bcrypt = require("bcrypt");
                    // If email login, verify password
                    const hashPass = /^\$2y\$/.test(user.password) ? '$2a$' + user.password.slice(4) : user.password
                    // const passwordsMatch = true;
                    const passwordsMatch = await bcrypt.compare(credentials.password, hashPass);
                    console.log("pw", passwordsMatch);
                    if (passwordsMatch) {
                        console.log("yep they match");
                        return user;
                    } else {
                        console.log("Passwords do not match");
                        return null;
                    }
                } else if (user && user.discordId) {
                    // Existing Discord user, return user data
                    return user;
                }

                return null;
            }
        }),
    

couldnt send full code due to message limitation

Ya, this is because this file using bcrypt and its causing the error

i know

https://www.npmjs.com/package/bcryptjs

can you try this package?

or this https://www.npmjs.com/package/simplecrypt

I have tried bcryptjs, but there is one issue, it's compare function always returns true. Also it is no longer being maintained

simpleecrypt?

seems dead, last update 11 years ago

try with the crypto module using this:

// Using the built in crypto module

const { scryptSync, randomBytes } = require("crypto");


// Any random string here (ideally should be atleast 16 bytes)

const salt = randomBytes(16).toString("hex")


// Pass the password string and get hashed password back
// ( and store only the hashed string along with the salt in your database)
// {hashedPassword}${salt}

const getHash = (password) => scryptSync(password, salt, 32).toString("hex");

use import instead of const

i am using bcrypt.hash while creating user, will it be compatible with this?

Why not try it out?

ok

is your issue resolved?

nope

i think i'll have to refactor my logic

Once done, send the solution here and mark it as solution

i tried refactoring and using crypto, not working

I'll give you a solution when I get free, I'll try it in my own env

If i could just separate the password comparing logic smw else

also, if your issue is resolved, Let me know, As if it is resolved, I won't test it.

since you're trying a different solution

ya i'll post it as soon I get it working

Okay @Anay-208 I decided to let go of middleware file, but now a new issue arise

bcrypt.compare() always returns false! even if the password is correct

Can you send dependencies of your package.json? I'm currently opening a playground for testing it

sure,
"dependencies": {
"@radix-ui/react-icons": "^1.3.0",
"@radix-ui/react-label": "^2.0.2",
"@radix-ui/react-slot": "^1.0.2",
"argon2": "^0.40.1",
"bcrypt": "^5.1.1",
"class-variance-authority": "^0.7.0",
"clsx": "^2.1.1",
"mongoose": "^8.3.3",
"next": "14.1.0",
"next-auth": "^5.0.0-beta.13",
"react": "^18",
"react-dom": "^18",
"react-hook-form": "^7.51.4",
"tailwind-merge": "^2.3.0",
"tailwindcss-animate": "^1.0.7"
},
"devDependencies": {
"autoprefixer": "^10.4.19",
"eslint": "^8",
"eslint-config-next": "^14.1.0",
"postcss": "^8.4.38",
"tailwindcss": "^3.4.3"
}

alright, will try in a few mins

ty

@Spotted Rail let me clear some stuff up for you

first off, no, middlewares are not edge functions
edge functions are basically small pieces of code that run in the cloud on a network for global reach

bcrypt has nothing to do with the edge

alright

second off, try using the built in crypto node standard library

i dont know if it actually works in the cloud or not because some edge providers use a custom runtime

but try it

it might work

i tried, already

import error as well?

yes

does it just say module or file not found?

damn

okay

gimme one sec

i have ditched middleware

dw, middleware isnt the issue here

middleware always run on the edge runtime, which does not work with "crypto" node module. it only works with these browser crypto apis: https://nextjs.org/docs/app/api-reference/edge#crypto-apis

seems pretty up-to-date

well, middleware is the issue

true

lets just try using an npm package and pray 🙏

grab a package that works on the browser, then it should work in edge. grab a package that relies on nodejs apis then it most likely won't work on edge. middleware always runs on edge

lemme check if that bcrypt npm package works in the browser real quick

nevermind it does not

it doesnt

That doesn't because the node.js bcrypt is pretty much a c++ addon

And they don't tend to work on edge

+ it uses node apis

its stated in the package's description

so yeah

yep, since its a constrained environment

hmmm

if it is somehow possible for you not to do this client-side

that would be good

but we'll find packages

that work client-side

like i said I have now removed middleware file from my project, the problem is bcrypt.compare(), it always return false

https://github.com/parth-develops/mandarin-mastery
you may check it out here

So, the .hash function works just fine, but the .compare function doesn't?

yes

@Spotted Rail I'm using bcryptjs, and its working just fine

code:

import bcrypt from 'bcryptjs';

export async function GET(){
    const data = await bcrypt.hashSync("hello", 8)
    console.log(data)
    const compare = await bcrypt.compareSync("hello", data)
    const compare2 = await bcrypt.compareSync("hell", data)

    console.log(compare, compare2)
    return new Response("hello")
}

console

I'm using nextjs 14.2.3

what diff between hash and hashSync?

i am using .hash()

this version has a middleware redirect issue, u get redirected but the url in your browser stays the same until u reload it

with hashSync, you won't need to use await(I might have used await mistakenly)

I'll downgrade to 14.1.0

and test

also @Spotted Rail So the solution is to use bcryptjs. it should work

also working with 14.1.0

Ok ill first try swtiching to bcryptjs

If that works, mark the message as a solution, otherwise ping me

hasn't worked, im gonna try signing up with a new user and try again

yeah, didn't work

Share your code, and also, create a min repro repo

https://github.com/parth-develops/mandarin-mastery
you may check it out here

Sure I’ll check

@Spotted Rail I need a min repro repo only

Oh ok, I'll have to make one I see

@Anay-208 when I run this even using bcrypt i get correct output

so the problem seems to be when I store it mongodb and compare it

I've used [next-mongodb-api](https://npmjs.com/package/next-mongodb-api) once in a production project for authentication, and it works just fine!

(package is made by me)

are you sure mongodb driver is returning the right output

console.log it

yes, when the logs shows exact hash that is stord in DB

With mongodb Driver, I have faced a lot of issue because of the return types

i am using mongoose only

try converting it to a pure object

how

I also used mongoose, I faced a issue, which I was so confused on how to fix

I just had to add the method .toObject() on the return type

alright leme try it quickly

just to be clear, I need to convert hash into an object?

@Anay-208 just logged the hash and compared, they are a bit different actually, could that be an issue?

not sure how i do this, i did console.log(user.password.toObject()) this throws an err

ohh i got the issue

no matter what credentials i put, always the first user gets returned

Is this a correct way to find a user?
const user = await Users.findOne({ $or: [{ email: credentials.email }, { discordId: credentials.discordId }], });

user.toObject()

no

the object returned from mongodb

this is the issue @Anay-208

console.log credentials.email

that's user@gmail.com, but I always get the jack's record, is my query wrong?

does user@gmail.com exist on the db?

it could be because discordId is null

that's why I have used $or

you are right

I removed discordId from the array it worked

@Anay-208 Thanks a ton for helping me throughout this. Not sure what should I mark as an answer XD

Wait I’ll send a summary

I have something to send to, which might be helpful

for others

You can mark the above message as a solution

can be found here: https://nextjs.org/learn/dashboard-app/adding-authentication

Mark this message as a solution

Yes, thats why I told you bcrypt doesn't work on middleware