Spctr Posts - Answer Overflow

Spctr

Explore posts from servers

RReactiflux DIAdiscord.js - Imagine an app NNuxt PPrisma

Posts Comments

NNuxt

•Created by Spctr on 10/31/2024 in #❓・help

JWT issue

I have a problem with my backend or frontend that I don't have a cookie parameter on prod

7 replies

NNuxt

•Created by Spctr on 10/30/2024 in #❓・help

Production Port in Pterodactyl [ SOLVED ]

Hey all, I'm trying to change the production port in Nuxt3. It's easy to set for development but how can I do this for prod. I'm using Pterodactyl for all of my containers. I'm using the NodeJS:21 configuration and I can only set the ./<path>/index.mjs and environment arguments what could be --port="3005" as an example but that doesn't work. How can I set the port for production?

5 replies

NNuxt

•Created by Spctr on 10/15/2024 in #❓・help

Frontend middleware auth with backend auth

hello all, I'm tryin to create an auth system for my webpage My problem is that I can't log in. When I can I can't use $store.user.value it's null most of the time. my userStore

// stores/userStore.ts
import { ref } from 'vue';

export const useUserStore = () => {
    const user = useState('user', () => {
        if (process.client) {
            const storedUser = localStorage.getItem('user');
            return storedUser ? JSON.parse(storedUser) : null;
        }
        return null;
    });

    const setUser = (newUser) => {
        user.value = newUser;
        if (newUser && process.client) {
            localStorage.setItem('user', JSON.stringify(newUser));
        } else {
            if (process.client) {
                localStorage.removeItem('user');
            }
        }
    };

    const clearUser = () => {
        user.value = null;
        if (process.client) {
            localStorage.removeItem('user');
        }
    };

    return { user, setUser, clearUser };
};

// stores/userStore.ts
import { ref } from 'vue';

export const useUserStore = () => {
    const user = useState('user', () => {
        if (process.client) {
            const storedUser = localStorage.getItem('user');
            return storedUser ? JSON.parse(storedUser) : null;
        }
        return null;
    });

    const setUser = (newUser) => {
        user.value = newUser;
        if (newUser && process.client) {
            localStorage.setItem('user', JSON.stringify(newUser));
        } else {
            if (process.client) {
                localStorage.removeItem('user');
            }
        }
    };

    const clearUser = () => {
        user.value = null;
        if (process.client) {
            localStorage.removeItem('user');
        }
    };

    return { user, setUser, clearUser };
};

my storePlugin

// ~/plugins/storePlugin.ts
import {useUserStore} from "~/stores/userStore";

export default defineNuxtPlugin((nuxtApp) => {
    const userStore = useUserStore();

    if (process.client) {
        const storedUser = localStorage.getItem('user');
        if (storedUser) {
            userStore.setUser(JSON.parse(storedUser));
        }
    }

    nuxtApp.provide('store', {
        user: userStore.user,
        setUser: userStore.setUser,
        clearUser: userStore.clearUser,
    });
});

// ~/plugins/storePlugin.ts
import {useUserStore} from "~/stores/userStore";

export default defineNuxtPlugin((nuxtApp) => {
    const userStore = useUserStore();

    if (process.client) {
        const storedUser = localStorage.getItem('user');
        if (storedUser) {
            userStore.setUser(JSON.parse(storedUser));
        }
    }

    nuxtApp.provide('store', {
        user: userStore.user,
        setUser: userStore.setUser,
        clearUser: userStore.clearUser,
    });
});

and my middleware

import { Middleware } from '@nuxt/types'
import axios from 'axios';
import {useUserStore} from "~/stores/userStore";


const protectedRouteNames = [
    {
        name: 'index',
        isLoginRequired: false,
        requiredRole: []
    },
    {
        name: 'dashboard',
        isLoginRequired: true,
        requiredRole: []
    },
    {
        name: 'admin-user-management',
        isLoginRequired: true,
        requiredRole: ['admin']
    },
]

function getRouteProtectionInfo(routeName: string | any) {
    return protectedRouteNames.find(obj => obj.name === routeName);
}

async function isUserAuthenticated(): Promise<any> {
    const { user, setUser } = useUserStore();
    if (user.value) {
        return { user: user.value };
    }

    try {
        const response = await axios.get("http://localhost:4000/api/auth/verify", { withCredentials: true });
        user.value = response.data.user;
        return { user: response.data.user };
    } catch (error) {
        return { user: null };
    }
}

export default defineNuxtRouteMiddleware(async (to, from) => {
    const routeProtectionInfo = getRouteProtectionInfo(to.name);
    const { user, setUser } = useUserStore();

    if (routeProtectionInfo) {
        if (routeProtectionInfo.isLoginRequired) {
            const userAuthData = await isUserAuthenticated();
            console.log('User: ', user)

            if (userAuthData && userAuthData.user) {
                setUser(userAuthData.user);
                console.log('User: ', user)

                const userRole = userAuthData.user.role;

                if (routeProtectionInfo.requiredRole.length > 0 && !routeProtectionInfo.requiredRole.includes(userRole)) {
                    return navigateTo('/unauthorized');
                }
            } else {
                console.log("User is not authenticated");
                return navigateTo('/');
            }
        }
    }
});

import { Middleware } from '@nuxt/types'
import axios from 'axios';
import {useUserStore} from "~/stores/userStore";


const protectedRouteNames = [
    {
        name: 'index',
        isLoginRequired: false,
        requiredRole: []
    },
    {
        name: 'dashboard',
        isLoginRequired: true,
        requiredRole: []
    },
    {
        name: 'admin-user-management',
        isLoginRequired: true,
        requiredRole: ['admin']
    },
]

function getRouteProtectionInfo(routeName: string | any) {
    return protectedRouteNames.find(obj => obj.name === routeName);
}

async function isUserAuthenticated(): Promise<any> {
    const { user, setUser } = useUserStore();
    if (user.value) {
        return { user: user.value };
    }

    try {
        const response = await axios.get("http://localhost:4000/api/auth/verify", { withCredentials: true });
        user.value = response.data.user;
        return { user: response.data.user };
    } catch (error) {
        return { user: null };
    }
}

export default defineNuxtRouteMiddleware(async (to, from) => {
    const routeProtectionInfo = getRouteProtectionInfo(to.name);
    const { user, setUser } = useUserStore();

    if (routeProtectionInfo) {
        if (routeProtectionInfo.isLoginRequired) {
            const userAuthData = await isUserAuthenticated();
            console.log('User: ', user)

            if (userAuthData && userAuthData.user) {
                setUser(userAuthData.user);
                console.log('User: ', user)

                const userRole = userAuthData.user.role;

                if (routeProtectionInfo.requiredRole.length > 0 && !routeProtectionInfo.requiredRole.includes(userRole)) {
                    return navigateTo('/unauthorized');
                }
            } else {
                console.log("User is not authenticated");
                return navigateTo('/');
            }
        }
    }
});

The funny thing is that I can go on pages which are not listed in protectedRouteNames

12 replies

Gaming

Programming