Gugustinette
Gugustinette
PostsComments
NNuxt
Created by ATL on 5/1/2024 in #❓・help
Nuxt3-leaflet not showing local image
Hi ! I made an exemple here : https://gugustinette.github.io/Nuxt-Leaflet/components/l-image-overlay.html But still haven't found a way to make the component work correctly :/
2 replies
NNuxt
Created by VVadim on 4/15/2024 in #❓・help
auth cookie
Yup, this is clearly something missing for a lot of people (that's why it is pretty much the next official module on the roadmap)
7 replies
NNuxt
Created by VVadim on 4/15/2024 in #❓・help
auth cookie
This is some Nuxt gymnastic to learn at the moment, but the in coming nuxt-auth official package will probably do some incredible black magic and cool DX. It should be released this year I think.
7 replies
NNuxt
Created by VVadim on 4/15/2024 in #❓・help
auth cookie
Also here is how my Nuxt App is defining the cookie in the API (I use Nuxt as a backend) : 
// /server/api/auth/login.ts
import { CryptoUtil } from 'crypto-util';
import { UserSchema } from '~/server/model/user.schema';

/**
 * Test route
 */
export default defineEventHandler(async (event) => {
  // Get the request body
  const body = await readBody(event);

  // Try to find the user with the given credentials
  const user = await UserSchema.findOne({
    email: body.email,
    password: body.password,
  });

  // If the user is not found, throw an error
  if (!user) {
    throw createError({
      statusCode: 404,
      statusMessage: 'User not found',
    });
  }

  // Generate a new access token
  const accessToken = CryptoUtil.generateRandomString(256);

  // Set the access token in the user
  user.accessToken = accessToken;
  await user.save();

  // Set the access token in a httpOnly cookie for the client
  setCookie(event, 'accessToken', accessToken, {
    secure: true,
    httpOnly: true,
    sameSite: 'strict',
    // Expires in 1 year
    expires: new Date(Date.now() + 1000 * 60 * 60 * 24 * 7 * 365),
  });

  // Redirect the user to the dashboard
  return sendRedirect(event, '/');
});
// /server/api/auth/login.ts
import { CryptoUtil } from 'crypto-util';
import { UserSchema } from '~/server/model/user.schema';

/**
 * Test route
 */
export default defineEventHandler(async (event) => {
  // Get the request body
  const body = await readBody(event);

  // Try to find the user with the given credentials
  const user = await UserSchema.findOne({
    email: body.email,
    password: body.password,
  });

  // If the user is not found, throw an error
  if (!user) {
    throw createError({
      statusCode: 404,
      statusMessage: 'User not found',
    });
  }

  // Generate a new access token
  const accessToken = CryptoUtil.generateRandomString(256);

  // Set the access token in the user
  user.accessToken = accessToken;
  await user.save();

  // Set the access token in a httpOnly cookie for the client
  setCookie(event, 'accessToken', accessToken, {
    secure: true,
    httpOnly: true,
    sameSite: 'strict',
    // Expires in 1 year
    expires: new Date(Date.now() + 1000 * 60 * 60 * 24 * 7 * 365),
  });

  // Redirect the user to the dashboard
  return sendRedirect(event, '/');
});
7 replies
NNuxt
Created by VVadim on 4/15/2024 in #❓・help
auth cookie
You'll probably be interested in the useCookie composable : https://nuxt.com/docs/api/composables/use-cookie Pretty good, but this will require you to write some middleware in your nuxt app to handle it correctly (redirection and more). From my experience, this is a bit harsh to configure (as their is still no magic nuxt-auth module for Nuxt3). Here is the kind of middleware I used. But things can change depending on how you are rendering your pages, what type of cookie you use,... 
// middleware/auth.global.ts
const userAuthenticated = (accessToken: string | null | undefined) => {
  return accessToken !== undefined && accessToken !== null;
};

/**
 * Auth middleware
 */
export default defineNuxtRouteMiddleware((to) => {
  // Skip this middleware on the client, as we are using an httpOnly cookie for authentication
  if (process.client) return;

  // Get the access token from the cookie
  const accessToken = useCookie('accessToken');

  // If the user tries to access any route (except /login) and is not authenticated
  if (
    to.path !== '/login' &&
    !userAuthenticated(accessToken.value)
  ) {
      // Redirect to /login
      return navigateTo('/login');
  }

  // If the user tries to access /login and is authenticated
  if (
    to.path === '/login' &&
    userAuthenticated(accessToken.value)
  ) {
    // Redirect to /
    return navigateTo('/');
  }

  // If the user is authenticated, allow the request to continue
  return;
});
// middleware/auth.global.ts
const userAuthenticated = (accessToken: string | null | undefined) => {
  return accessToken !== undefined && accessToken !== null;
};

/**
 * Auth middleware
 */
export default defineNuxtRouteMiddleware((to) => {
  // Skip this middleware on the client, as we are using an httpOnly cookie for authentication
  if (process.client) return;

  // Get the access token from the cookie
  const accessToken = useCookie('accessToken');

  // If the user tries to access any route (except /login) and is not authenticated
  if (
    to.path !== '/login' &&
    !userAuthenticated(accessToken.value)
  ) {
      // Redirect to /login
      return navigateTo('/login');
  }

  // If the user tries to access /login and is authenticated
  if (
    to.path === '/login' &&
    userAuthenticated(accessToken.value)
  ) {
    // Redirect to /
    return navigateTo('/');
  }

  // If the user is authenticated, allow the request to continue
  return;
});
7 replies