Costinha Comments - Answer Overflow

Costinha

•Created by Deimos on 5/24/2024 in #support

Empty Password while updating session.

oh, i just saw the

import.meta.env

import.meta.env

i dont think vite will handle the environment here, need to check on vinxi docs. you can use

process.env

process.env

it will work just fine

3 replies

SSolidJS

•Created by Deimos on 5/24/2024 in #support

Empty Password while updating session.

it is not finding the password used for encrypting the user session, in your case is the VITE_SESSION_SECRET environment variable, is it set in your .env file?

3 replies

SSolidJS

•Created by Costinha on 5/23/2024 in #support

Cloud Flare Context is not defined when using Session

I refactored the code a bit, based on the "with-auth" template it is probably a Cloud Flare Wrangler issue since on node-server preset it works as expected the erros happens when trying to call login or logout here it is some code

export interface UserSession {
    id?: number;
    avatarUrl: string;
}

function getSession() {
    'use server';
    return useSession<UserSession>({
        password: process.env.SESSION_SECRET!
    });
}

export const getSessionData = cache(async () => {
    'use server';
    const session = await getSession();
    if (!session.data.id) {
        return null;
    }
    return session.data;
}, 'getSessionData');

export const login = action(async () => {
    'use server';
    const session = await getSession();
    await session.update(() => ({
        id: 1,
        avatarUrl: '/public/profile.png'
    }));

    return revalidate('/');
});

export const logout = action(async () => {
    'use server';
    const session = await getSession();
    await session.update(() => ({ id: undefined }));

    return revalidate('/');
});

export interface UserSession {
    id?: number;
    avatarUrl: string;
}

function getSession() {
    'use server';
    return useSession<UserSession>({
        password: process.env.SESSION_SECRET!
    });
}

export const getSessionData = cache(async () => {
    'use server';
    const session = await getSession();
    if (!session.data.id) {
        return null;
    }
    return session.data;
}, 'getSessionData');

export const login = action(async () => {
    'use server';
    const session = await getSession();
    await session.update(() => ({
        id: 1,
        avatarUrl: '/public/profile.png'
    }));

    return revalidate('/');
});

export const logout = action(async () => {
    'use server';
    const session = await getSession();
    await session.update(() => ({ id: undefined }));

    return revalidate('/');
});

export default function AvatarDropdown() {
    const session = createAsync(() => getSessionData());

    const doLogin = useAction(login);
    const doLogout = useAction(logout);

    return (
        <DropdownMenu>
            <DropdownMenuTrigger>
                <Avatar class="size-9">
                    <AvatarImage alt="profile" src={session()?.avatarUrl} />
                    <AvatarFallback>CN</AvatarFallback>
                    <span class="sr-only">Toggle user menu</span>
                </Avatar>
            </DropdownMenuTrigger>
            <DropdownMenuContent>
                {!session() && (
                    <>
                        <DropdownMenuItem>
                            <span class="flex cursor-pointer items-center gap-2 text-lg" onClick={() => void doLogin()}>
                                <FiLogOut class="size-4" />
                                Login
                            </span>
                        </DropdownMenuItem>

                        <DropdownMenuSeparator />
                    </>
                )}
                <DropdownMenuItem>
                    <A class="flex items-center gap-2 text-lg" href="#">
                        <CgProfile class="size-4" />
                        Profile
                    </A>
                </DropdownMenuItem>
                <DropdownMenuItem>
                    <A class="flex items-center gap-2 text-lg" href="#">
                        <FiSettings class="size-4" />
                        Settings
                    </A>
                </DropdownMenuItem>
                <DropdownMenuSeparator />
                {session() && (
                    <DropdownMenuItem>
                        <span class="flex cursor-pointer items-center gap-2 text-lg text-red-500" onClick={() => void doLogout()}>
                            <FiLogOut class="size-4" />
                            Logout
                        </span>
                    </DropdownMenuItem>
                )}
            </DropdownMenuContent>
        </DropdownMenu>
    );
}

export default function AvatarDropdown() {
    const session = createAsync(() => getSessionData());

    const doLogin = useAction(login);
    const doLogout = useAction(logout);

    return (
        <DropdownMenu>
            <DropdownMenuTrigger>
                <Avatar class="size-9">
                    <AvatarImage alt="profile" src={session()?.avatarUrl} />
                    <AvatarFallback>CN</AvatarFallback>
                    <span class="sr-only">Toggle user menu</span>
                </Avatar>
            </DropdownMenuTrigger>
            <DropdownMenuContent>
                {!session() && (
                    <>
                        <DropdownMenuItem>
                            <span class="flex cursor-pointer items-center gap-2 text-lg" onClick={() => void doLogin()}>
                                <FiLogOut class="size-4" />
                                Login
                            </span>
                        </DropdownMenuItem>

                        <DropdownMenuSeparator />
                    </>
                )}
                <DropdownMenuItem>
                    <A class="flex items-center gap-2 text-lg" href="#">
                        <CgProfile class="size-4" />
                        Profile
                    </A>
                </DropdownMenuItem>
                <DropdownMenuItem>
                    <A class="flex items-center gap-2 text-lg" href="#">
                        <FiSettings class="size-4" />
                        Settings
                    </A>
                </DropdownMenuItem>
                <DropdownMenuSeparator />
                {session() && (
                    <DropdownMenuItem>
                        <span class="flex cursor-pointer items-center gap-2 text-lg text-red-500" onClick={() => void doLogout()}>
                            <FiLogOut class="size-4" />
                            Logout
                        </span>
                    </DropdownMenuItem>
                )}
            </DropdownMenuContent>
        </DropdownMenu>
    );
}

3 replies

SSolidJS

•Created by Deimos on 5/23/2024 in #support

Problem importing useSession from vinxi/http

3 replies

Gaming

Programming