stefanpeev
Need to set cookies in headers and figure out how to use useState
</script>
import { createError, eventHandler, readBody } from 'h3';
import { z } from 'zod';
import { sign } from 'jsonwebtoken';
const refreshTokens: Record<number, Record<string, any>> = {};
export const SECRET = '';
export default eventHandler(async (event) => {
const body = await readBody(event);
const result = z.object({ username: z.string().min(1), password: z.string().min(1) }).safeParse(body) if (!result.success) { throw createError({ statusCode: 400, statusMessage: 'Bad Request' }) }
const { username, password } = result.data;
try { const loginResponse = await fetch('http://localhost:8000/api/login/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ username, password }) });
if (!loginResponse.ok) { throw createError({ statusCode: loginResponse.status, statusMessage: loginResponse.statusText }); }
const { access, refresh, user, user_type } = await loginResponse.json();
const expiresIn = 30; const accessToken = sign({ ...user, scope: ['test', 'user'] }, SECRET, { expiresIn });
refreshTokens[refresh] = { accessToken: accessToken, user: user };
console.log('Access Token:', accessToken); console.log('Refresh Token:', refresh); console.log('user:', user); console.log('user_type:', user_type);
ctx.res.setHeader('Set-Cookie', [
return { token: { accessToken: accessToken, refreshToken: refresh, user: user, user_type: user_type } }; } catch (error) { throw createError({ statusCode: 500, statusMessage: 'Internal Server Error' }); } });
const result = z.object({ username: z.string().min(1), password: z.string().min(1) }).safeParse(body) if (!result.success) { throw createError({ statusCode: 400, statusMessage: 'Bad Request' }) }
const { username, password } = result.data;
try { const loginResponse = await fetch('http://localhost:8000/api/login/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ username, password }) });
if (!loginResponse.ok) { throw createError({ statusCode: loginResponse.status, statusMessage: loginResponse.statusText }); }
const { access, refresh, user, user_type } = await loginResponse.json();
const expiresIn = 30; const accessToken = sign({ ...user, scope: ['test', 'user'] }, SECRET, { expiresIn });
refreshTokens[refresh] = { accessToken: accessToken, user: user };
console.log('Access Token:', accessToken); console.log('Refresh Token:', refresh); console.log('user:', user); console.log('user_type:', user_type);
ctx.res.setHeader('Set-Cookie', [
accessToken=${accessToken}; HttpOnly; Secure; SameSite=Strict;,
refreshToken=${refresh}; HttpOnly; Secure; SameSite=Strict;
]);
return { token: { accessToken: accessToken, refreshToken: refresh, user: user, user_type: user_type } }; } catch (error) { throw createError({ statusCode: 500, statusMessage: 'Internal Server Error' }); } });
3 replies
New at nuxt.. and frontend as a whole.
Hi.... Ive been beating my head with nuxt for 2 weeks, I find the documentation very hard to understand.
I am trying to connect my backend with my frontend.I am using sidebase and authjs.. So far ive managed to make an authorized login, but im having a lot of trouble with fetching data with authentication and setting a useState global variable.Basically i want to login, get a jwt token and set a part of the user's data -"usertype" to a global variable because that one changes my layouts and what can the user see on a page. And I want to request data that required authentication.. send my jwt token from my cookies to the backend, fetch the data and show it on my nuxt frontend.
Also I am facing troubles with a vuetify button whichs @click doesnt work..i tried .native and many other ways still not working.
42 replies