stefanpeev
Help with button,someone else coded it.Vuetify
yeah its a built in button i think you need to reference it in the template ....I also separated it in a difference component. I had made it into one because I didnt know I could use props the .value stayed tho
8 replies
Help with button,someone else coded it.Vuetify
Nope, i just found it like that doesnt make sense and I dont know where they read the documentation from.When you click outside the card it closes but when you click the button it doesnt.Trying to find it in the documentation but cant still. I could just make it navigate to the same page, but the close function of the card is more dynamic and i like it , i want it to work like that
8 replies
New at nuxt.. and frontend as a whole.
and this login post
i have succesfully set the tokens as cookies... but i dont know how to make the status authenticated like it happends with the nuxt auth handler... now when i login i get everything but it stays on the login page and the console gives me ncaught (in promise)
Error: Invalid reference token: token
at jsonPointerGet (helpers.mjs?v=79dfd484:33:13)
at signIn (useAuth.mjs?v=79dfd484:23:26)
login.vue:22 status is unauthenticated
42 replies
New at nuxt.. and frontend as a whole.
import { createError, eventHandler, readBody } from 'h3';
import { z } from 'zod';
import { sign } from 'jsonwebtoken';
const refreshTokens: Record<number, Record<string, any>> = {};
export const SECRET = 'ibasimamata';
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); setCookie(event, 'jwt', accessToken ) setCookie(event, 'refresh', refresh ) return accessToken; } 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); setCookie(event, 'jwt', accessToken ) setCookie(event, 'refresh', refresh ) return accessToken; } catch (error) { throw createError({ statusCode: 500, statusMessage: 'Internal Server Error' }); } });
42 replies
New at nuxt.. and frontend as a whole.
so far i have this login page
<template>
<div class="d-flex align-center justify-center" style="height: 100vh">
<v-sheet width="400" class="mx-auto">
<v-form fast-fail @submit.prevent="loginHandle">
<v-text-field v-model="cred.username" label="User Name"></v-text-field>
<v-text-field type='password' v-model="cred.password" label="Password"></v-text-field>
<v-btn type="submit" color="primary" block class="mt-2">Login</v-btn>
</v-form>
<div class="mt-2">
<p class="text-body-2">Don't have an account? <a href="/register">Sign Up</a></p>
</div>
</v-sheet>
</div>
</template>
<script setup lang="ts">
import { reactive } from 'vue'
const { signIn, status, getSession } = useAuth()
console.log('status is', status.value)
definePageMeta({
auth: {
unauthenticatedOnly: true,
navigateAuthenticatedTo: '/',
},
})
const cred = reactive({
username: undefined,
password: undefined
})
async function loginHandle() {
signIn(cred);
}
</script>
42 replies
Need to set cookies in headers and figure out how to use useState
Managed to put them in cookies
setCookie(event, 'jwt', accessToken ) setCookie(event, 'refresh', refresh ) return {accessToken}; } catch (error) { throw createError({ statusCode: 500, statusMessage: 'Internal Server Error' }); } }); like this but im still unauthenticated and it keeps me in the same page because of my globalappmiddleware... i would prefer to continue using it, how do I change the status ?
setCookie(event, 'jwt', accessToken ) setCookie(event, 'refresh', refresh ) return {accessToken}; } catch (error) { throw createError({ statusCode: 500, statusMessage: 'Internal Server Error' }); } }); like this but im still unauthenticated and it keeps me in the same page because of my globalappmiddleware... i would prefer to continue using it, how do I change the status ?
3 replies
Need to set cookies in headers and figure out how to use useState
I have a login page that passes creds and this is mylogin.post.ts
Everything works it returns all the information I need. But now Im trying to figure out how to set these tokens so I can do Authorized requests with them in other pages, and to be authenticated in general because it stays on the login page const { signIn, status } = useAuth()
console.log('status is', status.value) and status remains unauthenticated
also i need to store the user_type variable in state so I can use it through the application in different components and pages.
Please assist im very new at frontend and ive been having touble understanding the documentation.
3 replies
New at nuxt.. and frontend as a whole.
ok I can make it return the token.. but how can i set that token in my headers so i can make requests like const headers = useRequestHeaders(['cookie']) as HeadersInit
console.log("headers is", headers);
const { data: usertype } = await useFetch('http://localhost:8000/api/authuser', { headers })
console.log("data is", usertype); and they work ?
And the other battle... to put it in state
42 replies
New at nuxt.. and frontend as a whole.
callbacks: {
async signIn({ user, account, profile, email, credentials }) {
// if you return the user or token, it will be in the user argument
console.log(user)
if (user.token) {
// validate the token here via request to backend
const res = await fetch('/some/route', {
method: 'POST',
body: { token: user.token }
})
if (res.ok) {
// token is valid, permit login
return true
}
}
return false
}
}
so i just put this code here pages/api/auth/[...nextauth].js ?
Isnt that what it does anyway the signIn? isnt it built in? I already managed to do the authorization with NuxtAuthHandler.. its the authentication that im having trouble with
42 replies