Utsuhoagie Posts - Answer Overflow

Utsuhoagie

Explore posts from servers

•Created by Utsuhoagie on 11/26/2023 in #support

Non-return part of <For>'s callback only seems to run once?

I have a page where I initially fetch a list of items, then I can type in a search box to filter that list on the client, which is part of a form (using createStore()) where it's a list of selected items. I tried to perform the checking logic to see if each "searched item" is part of the "selected items" list, and then do some styling + toggle logic on those items. However, if I do that logic outside the return of <For>'s callback and in the body, then it seems to only run once on first load, and then never again. But it does work if I put it inside the returned JSX for each item instead (which unfortunately means I can't reuse the check-if-already-selected logic). Anyone knows why this is so? It's probably some quirk with Solid that I'm not familiar with. I've done something similar in React and it does work, but it might be one of the big reactivity differences. (example code in next message)

11 replies

SSolidJS

•Created by Utsuhoagie on 11/18/2023 in #support

How to implement JWT authentication in SolidJS, without SolidStart?

I'm currently learning SolidJS for a SPA app with JWT-based auth. Right now I'm trying to implement that JWT auth but I have a lot of problems and not sure if my approach is proper. What I currently have is a <LoginPage/> that calls the API and then saves the token as a cookie.

    const onSubmit: JSX.EventHandler<HTMLFormElement, SubmitEvent> = async (
        event
    ) => {
        event.preventDefault();

        const res = await api.post('Auth/Login', { json: loginForm });
        const json: { Token: string } = await res.json();

        if (res.status !== 200) {
            window.alert('Login failed!');
        }

        // sets a cookie with the key & value
        setCookies('token', json.Token);

        navigate('/app/official-games');
    };

    const onSubmit: JSX.EventHandler<HTMLFormElement, SubmitEvent> = async (
        event
    ) => {
        event.preventDefault();

        const res = await api.post('Auth/Login', { json: loginForm });
        const json: { Token: string } = await res.json();

        if (res.status !== 200) {
            window.alert('Login failed!');
        }

        // sets a cookie with the key & value
        setCookies('token', json.Token);

        navigate('/app/official-games');
    };

Then I would try to read that cookie in a top-level route component called <AuthRedirector /> which is a root route with the app routes and auth routes as children.

import { Outlet, useNavigate } from '@solidjs/router';
import { getCookie } from '~/utils/CookieUtils';

export const AuthRedirector = () => {
    const navigate = useNavigate();

    const token = getCookie('token');

    if (!token) {
        navigate('/auth/login');
    } else {
        navigate('/app/official-games');
    }

    return <Outlet />;
};

import { Outlet, useNavigate } from '@solidjs/router';
import { getCookie } from '~/utils/CookieUtils';

export const AuthRedirector = () => {
    const navigate = useNavigate();

    const token = getCookie('token');

    if (!token) {
        navigate('/auth/login');
    } else {
        navigate('/app/official-games');
    }

    return <Outlet />;
};

These are the cookie utils:

export function getCookie(key: string) {
    // gets cookie as a JSON object
    const cookiesObj = getCookiesAsObject();
    return cookiesObj[key];
}

export function setCookie(key: string, value: any) {
    document.cookie = `${key}=${value}`;
}

export function getCookie(key: string) {
    // gets cookie as a JSON object
    const cookiesObj = getCookiesAsObject();
    return cookiesObj[key];
}

export function setCookie(key: string, value: any) {
    document.cookie = `${key}=${value}`;
}

However, this seems to only set the cookie for one path, specifically in my case /app/official-games. If I access any other /app/... route then I still get redirected to /auth/login and I check the browser's cookies and don't see cookies on these other routes. Plus, with this approach I still need to manually navigate to /app after successfully logging in

9 replies

Gaming

Programming