SolidJS•4mo ago

how to redirect from form actions

I want to redirect to the index page from signin form action on successful with Any insight would be helpful My current code doesn't redirect

const signIn = action(async (formData: FormData) => {
    'use server';
    const email = String(formData.get('email'));
    const password = String(formData.get('password'));

    const [user] = await db
        .select({ id: users.id, passwordHash: users.passwordHash })
        .from(users)
        .where(eq(users.email, email));

    if (!user) return new Error('Invalid Credentials');

    if (!(await bcrypt.compare(password, user.passwordHash))) return new Error('Invalid Credentials');

    const token = jwt.sign({ id: user.id }, process.env.AUTH_SECRET!, {
        expiresIn: '3 days'
    });

    const event = getRequestEvent()!;
    setCookie(event.nativeEvent, 'accessToken', token, {
        httpOnly: true,
        secure: true,
        path: '/',
        sameSite: 'lax'
    });
    return redirect('/');
}, 'signin');

const signIn = action(async (formData: FormData) => {
    'use server';
    const email = String(formData.get('email'));
    const password = String(formData.get('password'));

    const [user] = await db
        .select({ id: users.id, passwordHash: users.passwordHash })
        .from(users)
        .where(eq(users.email, email));

    if (!user) return new Error('Invalid Credentials');

    if (!(await bcrypt.compare(password, user.passwordHash))) return new Error('Invalid Credentials');

    const token = jwt.sign({ id: user.id }, process.env.AUTH_SECRET!, {
        expiresIn: '3 days'
    });

    const event = getRequestEvent()!;
    setCookie(event.nativeEvent, 'accessToken', token, {
        httpOnly: true,
        secure: true,
        path: '/',
        sameSite: 'lax'
    });
    return redirect('/');
}, 'signin');

14 Replies

Brendonovich•4mo ago

hmm this should work

Raqueebuddin AzizOP•4mo ago

onClick={async () => {
    'use server';

    const event = getRequestEvent()!;
    deleteCookie(event.nativeEvent, 'accessToken');
    return redirect('/signin');
}}

onClick={async () => {
    'use server';

    const event = getRequestEvent()!;
    deleteCookie(event.nativeEvent, 'accessToken');
    return redirect('/signin');
}}

should this work? it doesn't the signin one is weird it works if I remove everything b/w getRquestevent and use server even if it get pasts all the early returns, because the cookie is set correctly it just doesn't redirect

export const route = {
    load: cache(async () => {
        const user = await getUser()
        if (!user) {
            return redirect('/signin')
        }
    }, '(protected) load')
};

export const route = {
    load: cache(async () => {
        const user = await getUser()
        if (!user) {
            return redirect('/signin')
        }
    }, '(protected) load')
};

also this only redirects if it's wrapped in cache, is that intended? if yes is this documented somewhere? thanks for any help, really appreciate it 🙂

Brendonovich•4mo ago

This won’t work as the redirect helper only works if the function is wrapped in cache/action

Raqueebuddin AzizOP•4mo ago

Got it, couldn't find the documentation saying that I see the examples have cache, I still think it could help if its added to the text as well, is the docs repo accepting PRs? Thank you for all the help Brendon 🙂

Brendonovich•4mo ago

yeah it's open to PRs

Raqueebuddin AzizOP•4mo ago

https://github.com/solidjs/solid-docs-next/issues/820 apparently someone is already on it

GitHub

[Request]: When to use useNavigate vs redirect · Issue #820 · solid...

What is this request related to? Request 📋 Suggested https://docs.solidjs.com/solid-router/reference/data-apis/response-helpers#redirect And maybe in here as well: https://docs.solidjs.com/solid-ro...

Raqueebuddin AzizOP•4mo ago

figured out why the original redirect wasn't working, my auth guard would redirect back to sign in, must have something to do with the order in which cookies are updated and requests being made Is there a way to make sure my layout load runs after the cookies are set? removing cache from getUser fixed it getUser was used in the layout guard

Brendonovich•4mo ago

ah btw cache functions should be kept at the top level, not declared inline like this

Raqueebuddin AzizOP•4mo ago

can I ask the reason?

Brendonovich•4mo ago

the idea is that you declare the data fetcher once and then reuse it so you'd reuse that cached function anywhere you need the user

Raqueebuddin AzizOP•4mo ago

got it, I think in this case the cache function would still be only called once

Brendonovich•4mo ago

so no matter where you request user data that redirect will happen and you can call it both in the preload + use it in your markup

Raqueebuddin AzizOP•4mo ago

you mean in the getUser function? if I use cache there it doesn't redirect properly or invalidate properly I should say removing it fixed the issue I understand that means getUsers is called on every navigation but I think thats whats supposed to happen with auth guards

Brendonovich•4mo ago

i'd argue otherwise but whatever works

Gaming

Programming

how to redirect from form actions