OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Token is generated at the endpoint but does not arrive on the page

  • Thread starter Thread starter Martin Weissenboeck
  • Start date Start date
M

Martin Weissenboeck

Guest
I want to create a website with Svelte/Kit and use JWT. I have found instructions on the internet, for example: Svelte JWT Authentication https://morioh.com/p/1d95522418b2 SvelteKit Session Authentication Using Cookies
But unfortunately no instructions for Svelte Kit and JWT. So I tried it myself.

The token is generated at the endpoint, but does not arrive on the page (or is not callable). I suspect that some setting in the headers is wrong, but can't figure out what is wrong. This is my highly simplified test environment:

(1) I call the endpoint login.js from the page index.svelte. For testing, I omit checking email and password and send JWT right back. Data arrives, but I don't see the JWT.

(2) The JWT should be sent to another endpoint. What is the best way to do this?

The "page" index.svelte (simplified):

Code:
<script>
  let email="", password="";
    
  const doLogin = async () => {
    const response = await fetch("/auth/login", {
      method: 'POST',
      headers: {
    "Content-Type": "application/json",
      },
      credentials: 'include',
      body: JSON.stringify({
    email,
    password
      })
    }); 
    
    if (response.status == 200) {
      const { done, value } = 
        await response.body.getReader().read();
      await console.log("done, value=", done, 
        JSON.parse(new TextDecoder("utf-8").decode(value)));
      await console.log("headers=", response.headers);
    }
  }
</script>

<h1>Welcome to MyAuth</h1>
<input type=email bind:value={email}/><br/>
<input type=password bind:value={password}/><br/>
<button on:click={doLogin}>Submit</button>

The "endpoint" login.js (simplified):

Code:
import jwt from "jsonwebtoken";  

export function post(request, context) {
  const token = jwt.sign({
    data: { text: "test" },
    "topsecret", 
  });  
    
  const response = {
    status: 200,
    headers: {
      'content-type': 'application/json',
      'Authorization': `Bearer ${token}`,
    },
    body: {
      passwordOk: true,
    }
  };
  return response;
}

The console shows:

Code:
done, value= false {passwordOk: true}
index.svelte:59 headers= Headers {}
index.svelte:44 Fetch finished loading: POST "http://localhost:3000/auth/login".
doLogin @ index.svelte:44

<p>I want to create a website with Svelte/Kit and use JWT.
I have found instructions on the internet, for example:
Svelte JWT Authentication <a href="https://morioh.com/p/1d95522418b2" rel="nofollow noreferrer">https://morioh.com/p/1d95522418b2</a>
SvelteKit Session Authentication Using Cookies <a href="
" rel="nofollow noreferrer">
</a>
But unfortunately no instructions for Svelte Kit and JWT. So I tried it myself.</p>
<p>The token is generated at the endpoint, but does not arrive on the page (or is not callable). I suspect that some setting in the headers is wrong, but can't figure out what is wrong. This is my highly simplified test environment:</p>
<p>(1) I call the endpoint login.js from the page index.svelte. For testing, I omit checking email and password and send JWT right back. Data arrives, but I don't see the JWT.</p>
<p>(2) The JWT should be sent to another endpoint. What is the best way to do this?</p>
<p>The "page" <code>index.svelte</code> (simplified):</p>
<pre class="lang-js prettyprint-override"><code><script>
let email="", password="";

const doLogin = async () => {
const response = await fetch("/auth/login", {
method: 'POST',
headers: {
"Content-Type": "application/json",
},
credentials: 'include',
body: JSON.stringify({
email,
password
})
});

if (response.status == 200) {
const { done, value } =
await response.body.getReader().read();
await console.log("done, value=", done,
JSON.parse(new TextDecoder("utf-8").decode(value)));
await console.log("headers=", response.headers);
}
}
</script>

<h1>Welcome to MyAuth</h1>
<input type=email bind:value={email}/><br/>
<input type=password bind:value={password}/><br/>
<button on:click={doLogin}>Submit</button>
</code></pre>
<p>The "endpoint" login.js (simplified):</p>
<pre class="lang-js prettyprint-override"><code>import jwt from "jsonwebtoken";

export function post(request, context) {
const token = jwt.sign({
data: { text: "test" },
"topsecret",
});

const response = {
status: 200,
headers: {
'content-type': 'application/json',
'Authorization': `Bearer ${token}`,
},
body: {
passwordOk: true,
}
};
return response;
}
</code></pre>
<p>The console shows:</p>
<pre><code>done, value= false {passwordOk: true}
index.svelte:59 headers= Headers {}
index.svelte:44 Fetch finished loading: POST "http://localhost:3000/auth/login".
doLogin @ index.svelte:44
</code></pre>
 
Top