Being new to sveltekit, I have made a login form based on realworldapp, which receives JWT token upon successful login.
<script context="module">
export async function load({ session }) {
if (session.user) {
return {
status: 302,
redirect: '/'
};
}
return {};
}
</script>
<script>
import { session } from '$app/stores';
import { goto } from '$app/navigation';
import { post } from '$lib/utils.js';
import { fade } from 'svelte/transition';
let username = '';
let password = '';
let errors = null;
let message = '';
let hasError = false
async function submit(event) {
errors = response.errors;
if (response.token) {
$session.access_token = response.token.access_token;
//how to save this token in a cookie?
goto('/profile');
} else {
message= response.message;
hasError = true
setTimeout(() => {hasError=false}, 5000);
}
}
</script>
<form on:submit|preventDefault={submit} >
<h3 class="form-title">Login</h3>
{#if hasError}
<div transition:fade class="err-msg">{message}</div>
{/if}
<input type="text" bind:value={username} placeholder="username">
<input type="password" bind:value={password} placeholder="password">
<input type="submit" value="send">
</form>
It works fine and I can get the token in a response like:
{
message: "successully logged in!"
token: {access_token: 'eyJhbGciOiJIUzI1....'
}
Now, I'm wondering what is the safe and idomatic way to save the token to a cookie and retrive it, so that usr does not need toauthenticate each time that opens the browser?
I looket at the official docs but could not find any hints about it. Nor could I find a working example in a tutorial about it. Hence the quesiton.
Your core concern is "how do I save a value in a cookie, then retrieve it later?"
Cookies are stored in the browser as a string that requires parsing to read or update. There are many libraries in JavaScript to help you do this, one popular one being js-cookie. While you don't need a library, you may find it more convenient than parsing the string yourself.
A basic example of how to write and read a cookie is:
import Cookies from 'js-cookie'
Cookies.set('name', 'value');
Cookies.get('name') // => 'value'
There are more options you can set too, like the path, the expiry, etc.