handling JWTs with vitedge

[calebeaires]

After some seeking at web on how to handling JWTs on frontend clients that fits vitedge, I did not had some success on finding the best way to do it. As usually we save token on localstorage then make requests with it, but this is not so simple at server sider rendering.

There is a to-do at docs about how to "Auth utilities/guide (passing JWT in requests as cookies)". Is there someone from vitedge community to help us delivery it?

[frandiox]

@calebeaires Yep, I added it to the roadmap because I thought this could be challenging.
I haven't done this myself yet so I don't have actual code but I can probably give you some pointers.

The main problem when using JWTs is that they can't be passed automatically when making a GET request for an SSR rendered page.
However, cookies are sent automatically by the browser.
Therefore, I think you can basically store your JWT inside a cookie (ideally HTTPOnly cookie, which is safer). That way, you'll be able to read cookies in your backend and get the JWT from there.
For example, here's a blog post about storing JWT in cookies.

This approach should work generally but I haven't tried it so there might be some wild bug. Please let me know when you try it.

[calebeaires]

Node version: v16.8.0
Vitedge: ^0.16.4
Vite: ^2.5.0
Vue: ^3.2.0

Script running: yarn dev (vitedge --ssr --force)

Here is the request I do, now working after setting manually the headers

// For a JS project, '.js' extension MUST be provided due to ESM limitations
import {ApiEndpoint} from 'vitedge'
import {staticImportTestWithExtension} from '../../utils/test1.js'
// For a TS project, '.js' extension can be optionally provided
import {staticImportTestWithoutExtension} from '../../utils/test2'
// JSON can be imported because --experimental-json-modules is provided in CLI dev
import json from '../../utils/test3.json'

import {JSONCookies} from 'cookie-parser'
import {parse} from "worktop/cookie";


export default <ApiEndpoint>{
    // @ts-ignore
    handler({query, request, headers}) {
        // @ts-ignore

        console.log(' try to get cookie (request.headers) ', request.headers.get('cookie'))
        console.log(' try to get directly (headers) ', headers.get('cookie'))

        if (request.method !== 'GET') {
            throw new Error('Method not supported!')
        }

        return {
            // Actual data returned to frontend
            data: {
                msg: 'Hello world!',
                staticImportTestWithExtension,
                staticImportTestWithoutExtension,
                json,
            },
            // Dynamic options for this request
            options: {
                cache: {
                    api: 90,
                },
            },
        }
    },
    // Default static options
    options: {
        cache: {
            api: 85,
        },
    },
}

But when I set manually headers, the cookie shows there:

[frandiox]

@calebeaires Hey sorry, I got quite busy recently because I'm changing jobs. I'll try to come back to this this week.

[frandiox]

@calebeaires Hey, can you try 0.17.0? I hope it works there. There are also more changes to cookies: if you use fetch for your API, the cookie header will be automatically injected during SSR.

[frandiox]

I've added a guide to the docs: https://vitedge.js.org/recipes/authentication.html

[calebeaires]

Hey... @frandiox .... this will change things on my code! so thankful