Help understanding actions and how to manage user session
I want to manage user sessions with firebase auth, how does it actually works? I'm new to SSR frameworks.
I want to make it such that my ViewWrapper ("server" I think) component redirects users to /login page, I know I can do auth.currentUser with firebase but that only works on the web client.
I was looking into actions in the docs wanting to get to know these patterns better so I can use them properly when required but I can't seem to make much sense on how to use actions in form components or how would I just get a login to work an create a cookie that allows my server components to check whether the user should be redirected to /login or not or just "what would be the correct way of making this work"
login:
Then the ViewWrapper:
I want to make it such that my ViewWrapper ("server" I think) component redirects users to /login page, I know I can do auth.currentUser with firebase but that only works on the web client.
I was looking into actions in the docs wanting to get to know these patterns better so I can use them properly when required but I can't seem to make much sense on how to use actions in form components or how would I just get a login to work an create a cookie that allows my server components to check whether the user should be redirected to /login or not or just "what would be the correct way of making this work"
login:
const isLogin = action(async (data: FormData, event) => {
// validate login and create session cookie (i guess)
});
export default function signin() {
return (
<Wrapper>
<main class="w-full h-full flex justify-center items-center">
<form method="post" action={isLogin} class="flex flex-col justify-center gap-4 w-[350px] ">
<input class="input" type="email" name="user name" placeholder="email" />
<input class="input" type="password" name="password" placeholder="password" />
<input type="submit" name="submit" />
<button class="app-button app-button-secondary mt-4">Sign In</button>
</form>
</main>
</Wrapper>
);
}
Then the ViewWrapper:
const Wrapper = ({ children, secure }: { children: JSX.Element; secure?: boolean }) => {
const cookie = getCookie("not sure what event means", "session cookie?");
if (!cookie && secure) {
redirect("/signin");
}
return (
<div class="relative bg-gradient-to-br from-fuchsia-600 from-30% to-white-bone w-screen h-screen">
{children}
</div>
);
};
