SolidJSS
SolidJS•3y ago•
8 replies
Utsuhoagie

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');
    };


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 />;
};


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}`;
}


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
Was this page helpful?