Setting cookies() httpOnly aren't set in localhost

Answered

StoicWanderer posted this in #help-forum

2024-02-04T12:00:55.000Z

Hello everyone,

Why is that in localhost, the cookies aren't set, when I add the httpOnly attribute to the setter function like in the example in the official docs?

cookiestore.set({
name: 'userSessionID',
value: nanoid(24),
httpOnly: true,
path: '/'});

But when I only use this way:

cookiestore.set('userSessionID',nanoid(24));

it gets set.

Answered by Ray

ok could you update the code to this and try again?

"use server";

import { loginType } from "@/lib/loginType";
import { redirect } from "next/navigation";
import { cookies } from 'next/headers';
import { nanoid } from "nanoid";
import bcrytp from 'bcrypt'
import { isRedirectError } from "next/dist/client/components/redirect";

export default async function userLoginDB(login: loginType): Promise<void> {
  try {
    const cookieStore = cookies();

    const passwordHash = await bcrypt.hash(login.password, 8);
    const matched = await bcrypt.compare(login.password, passwordHash);

    if (!matched) redirect("/signin");
    
     console.log(matched);
     cookieStore.set("userSessionID", nanoid(24), { httpOnly: true });
    
  } catch (error) {
    if (isRedirectError(error)) throw error
    redirect("/signin");
  }
}

View full answer

24 Replies

@StoicWanderer Hello everyone, Why is that in localhost, the cookies aren't set, when I add the httpOnly attribute to the setter function like in the example in the official docs? js cookiestore.set({ name: 'userSessionID', value: nanoid(24), httpOnly: true, path: '/'}); But when I only use this way: js cookiestore.set('userSessionID',nanoid(24)); it gets set.

Ray

2024-02-04T12:06:30.000Z

where do you set the cookie? route handler or server action?

StoicWandererOP

2024-02-04T12:06:55.000Z

I am using a seeparate file with 'use server' directive

But now it doens't even want to set the cookie at all, no matter what I rewrite in vscode

@StoicWanderer I am using a seeparate file with 'use server' directive

Ray

2024-02-04T12:07:49.000Z

could you show the code? and the code on where you call it

StoicWandererOP

2024-02-04T12:08:10.000Z

moment please

'use server'

import { loginType } from '@/lib/loginType';
import { redirect } from 'next/navigation';
import { cookies } from 'next/headers';
import { nanoid } from 'nanoid';

const bcrypt = require('bcrypt');

export default async function userLoginDB(login:loginType): Promise<void> {

    const cookieStore = cookies();

    const logger = () => {
        bcrypt.hash(login.password, 8, async function (err:string, hash:string) {
            bcrypt.compare(login.password, hash, async function (err: string, result: boolean) {
                try {
                    if (result) {
                        console.log(result);
                        cookieStore.set('userSessionID', nanoid(24));
                    }
                }
                catch (err) {
                    return redirect('/signin')
                }
            })
        })
    };

    logger();
}

@Ray https://github.com/wesnoth-hu/wesnoth-custom/blob/51a3f9ce46ad1824c4bed82823b202da9334eb22/src/app/(public)/signin/page.tsx#L46

the bcrypt.compare works fine, only the cookies.set() isnt

@StoicWanderer js 'use server' import { loginType } from '@/lib/loginType'; import { redirect } from 'next/navigation'; import { cookies } from 'next/headers'; import { nanoid } from 'nanoid'; const bcrypt = require('bcrypt'); export default async function userLoginDB(login:loginType): Promise<void> { const cookieStore = cookies(); const logger = () => { bcrypt.hash(login.password, 8, async function (err:string, hash:string) { bcrypt.compare(login.password, hash, async function (err: string, result: boolean) { try { if (result) { console.log(result); cookieStore.set('userSessionID', nanoid(24)); } } catch (err) { return redirect('/signin') } }) }) }; logger(); }

Ray

2024-02-04T12:13:07.000Z

why are you hashing the password and compare it?

it will always match

StoicWandererOP

2024-02-04T12:13:20.000Z

yes, and it works ok as far as I know

but the if checks if it is TRUE right?

in the try catch

or am i understanding Javascript wrong?

@StoicWanderer yes, and it works ok as far as I know

Ray

2024-02-04T12:16:05.000Z

ok could you update the code to this and try again?

"use server";

import { loginType } from "@/lib/loginType";
import { redirect } from "next/navigation";
import { cookies } from 'next/headers';
import { nanoid } from "nanoid";
import bcrytp from 'bcrypt'
import { isRedirectError } from "next/dist/client/components/redirect";

export default async function userLoginDB(login: loginType): Promise<void> {
  try {
    const cookieStore = cookies();

    const passwordHash = await bcrypt.hash(login.password, 8);
    const matched = await bcrypt.compare(login.password, passwordHash);

    if (!matched) redirect("/signin");
    
     console.log(matched);
     cookieStore.set("userSessionID", nanoid(24), { httpOnly: true });
    
  } catch (error) {
    if (isRedirectError(error)) throw error
    redirect("/signin");
  }
}