Tu ne me déranges pas du tout, le forum est là pour ça!
Tu n’as pas besoin de configurer de cookie puisque tout est géré par ton Nuxt Strapi.
Dans ton nuxt.config.ts, dans ta configuration de Strapi, tu as les paramètres cookie et cookieName.
Voici comment je l’ai configuré de mon côté et ça fonctionne bien!
strapi: {
url: 'https://admin.lesbunkers.com',
prefix: '/api',
version: 'v4',
cookie: {},
cookieName: 'strapi_jwt',
},
Le truc c’est que j’avais déjà mis ça dans ma config et le cookie apparaissait, mais le truc c’est qu’il disparait aussitôt que je refresh ma page.
Aussi, quand j’inspecte le code source de ma page, le cookie n’apparait pas même avant que je refresh. J’ai fait un appel avec un gars sur reddit hier et il m’a dis que c’était quelque chose côté serveur qui clashait avec mon cookie. Est-ce que j’ai quelque chose à faire pour mon cookie sur Strapi ou il est 100% pris en charge par Nuxt-Strapi. Merci d’avance !!
Est-ce que ça se peut que le problème se trouve au niveau de ton navigateur? Est-ce que tu utilises un truc qui supprimes les cookies? Extension chrome ou autre?
Lorsque tu vas dans ta console sous stockage > cookies, ça donne quoi? Moi, j’ai ça:
C’est pris en charge par Nuxt-Strapi. Tu n’es pas sensé avoir besoin de faire quoi que ce soit.
C’est normal! C’est comme ça que ta console fonctionne alors pas de stress pour ça.
J’ai l’impression que ton problème est vraiment du côté de ton environnement de test.
Tu devrais te monter un petit serveur pour déployer ton instance strapi sur le web. Prends-toi la Droplet Digital Ocean la moins cher. Par la suite, tu peux déployer ton application Nuxt directement à partir de GitHub via Netlify!
Ça va te prendre un petit nom de domaine pour avoir un SSL, je te recommande de l’acheter via Cloudflare. Achète n’importe quoi, ce n’est pas important.
Si tu déploies ton app avec un bon nom de domaine, SSL et tout le reste, d’après-moi ça va régler ton trouble authentification.
Non, j’avais désactiver tout mes extensions.
Perso ça ressemble à ça:
Est-ce que Digital Ocean sert à tester le backend de mon site ?
Sinon pour Netlify, est-ce que render est une bonne alternative ou c’est un peu trop crappy. Je l’avais utiliser pour mon premier site mais il y avais pas de backend.
Merci pour les source je vais aller voir ça !
Un gars m’a référé des personnes qui avaient le même problème si ça peut t’aider: useStrapiUser or fetchUser Reload Issue · Issue #229 · nuxt-modules/strapi · GitHub
Ta droplet est un serveur qui va te permettre d’héberger ton instance de Strapi.
Netlify est gratuit et Nuxt est directement optimisé pour être déployé dessus alors profites-en!
Ton cookies a une bonne expiration et ne devrait théoriquement pas être réinitialisé.
Une fois que tu vas avoir ton serveur Strapi en ligne, tu vas pouvoir me passer ton lien github et je pourrai faire un test à partir de chez moi!
J’ai effacé les modifications que j’avais fait à mon cookie en voyant ta config et maintenant la date d’expiration est réglé à « session ». Est-ce que ça marche aussi ?
Parfait ! Je viens de tout finir mes style alors je vais aller héberger ça et je te l’envoie quand j’aurais finis. Un gros merci pour ton aide !!
C’est à session moi aussi et ça fonctionne alors ça devrait marcher pour toi aussi! 
Salut Oli, j’étais sur le point de host mon app et je me suis rendu compte que mon menu hamburger fonctionnait bizarrement, quand je vais sur mon register form et que j’essaye de l’ouvrir, ça bloque et j’arrive pas à l’ouvrir ni le fermer alors que sur mes autres tabs qui ont pas le plugin Strapi-Nuxt et le script setup, ça fonctionne. On dirais que les fonctionnalités de mon menu hamburger et de mon login/register form clash ensemble.
Je me demandais si c’était normal et que ça allait s’arranger quand j’allais host mon app ou j’ai mal configuré certaines choses ?
Au cas où, voici la template et le script de ma NavBar:
<template>
<nav
class="navbar"
:style="{ backgroundColor: navBarColor, position: navBarPosition }"
>
<div class="navbar__container">
<router-link to="/" id="navbar__logo" @click="logoClicked">
<img class="VR-logo" src="../assets/logo.png" />
VR RUSH</router-link
>
<div class="navbar__toggle" id="mobile-menu">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
<ul class="navbar__menu">
<li class="navbar__item">
<router-link to="/Experience" class="navbar__links"
>Experience</router-link
>
</li>
<li class="navbar__item">
<router-link to="/Faq" class="navbar__links">Faq</router-link>
</li>
<li class="navbar__item">
<router-link to="/Pricing" class="navbar__links">Pricing</router-link>
</li>
<li class="navbar__item">
<router-link to="/Contact" class="navbar__links">Contact</router-link>
</li>
<li class="navbar__item">
<router-link to="/login" v-if="!avatarUrl" class="navbar__links">Login</router-link>
</li>
<li class="navbar__btn">
<router-link to="/register" v-if="!avatarUrl" class="button">Sign up</router-link>
</li>
<li class="navbar__avatar" @click="dropdownVisible = !dropdownVisible">
<img v-if="avatarUrl" class="avatar" :src="avatarUrl" alt="Avatar">
<div class="dropdown" :class="{ 'active': dropdownVisible }">
<div class="logout__btn" @click.prevent="onClick">Logout</div>
</div>
</li>
</ul>
</div>
</nav>
</template>
<script>
import "@fortawesome/fontawesome-free/css/all.min.css";
export default {
props: {
avatarUrl: {
type: String,
required: true,
},
},
setup() {
const { logout } = useStrapiAuth();
const router = useRouter();
const onClick = () => {
logout();
router.push('/');
};
const dropdownVisible = ref(false);
const mountedd = () => {
const handleOutsideClick = (event) => {
const target = event.target;
const dropdown = document.querySelector(".dropdown");
if (!dropdown.contains(target)) {
dropdownVisible.value = false;
}
};
document.addEventListener("click", handleOutsideClick);
}
return {
onClick,
dropdownVisible,
};
},
mounted() {
const menu = document.querySelector("#mobile-menu");
const menuLinks = document.querySelector(".navbar__menu");
const navbarItems = document.querySelectorAll(
".navbar__item, .navbar__btn"
);
navbarItems.forEach((item) => {
item.addEventListener("click", () => {
menu.classList.remove("is-active");
menuLinks.classList.remove("active");
menuLinks.style.right = "-1000px";
});
});
menu.addEventListener("click", function () {
menu.classList.toggle("is-active");
menuLinks.classList.toggle("active");
});
window.addEventListener("scroll", this.handleScroll);
const dropdownVisible = ref(false);
const handleOutsideClick = (event) => {
const target = event.target;
const dropdown = document.querySelector(".dropdown");
if (!dropdown.contains(target)) {
dropdownVisible.value = false;
}
};
document.addEventListener("click", handleOutsideClick);
},
beforeUnmount() {
window.removeEventListener("scroll", this.handleScroll);
},
methods: {
handleScroll() {
const scrollPosition = window.scrollY;
if (scrollPosition > 0) {
this.navBarColor = "black";
this.navBarPosition = "fixed";
} else {
this.navBarColor = "rgba(128, 128, 128, 0.5)";
this.navBarPosition = "absolute";
}
},
logoClicked() {
if (this.$route.path === "/") {
window.location.reload();
window.scrollTo(0, 0);
} else {
this.$router.push("/");
}
},
},
};
</script>
Merci d’avance !!
C’est un problème de front-end, rien à voir avec le backend alors si ça ne marche pas en dev, ça ne marchera pas en prod!
Si tu as exactement le même code sur d’autres pages et que ça fonctionne ailleurs, regarde dans ta console pour être certains de ne pas avoir d’erreur JavaScript!
Si tu n’as pas d’erreur, je dirais qu’il s’agit probablement d’une erreur de logique dans ton code dans ta fonction setup ou mounted.
By the way, tu devrais utiliser le <script setup> de vue3, c’est pas mal plus simple comme ça!
Worth watching:
Aussi, tu devrais te familiariser avec un framework CSS tout de suite! Perso, je prends Vuetify et il rends vraiment plus simple l’usage de popup, menu, etc.
Tailwind est vraiment beau aussi et très très simple à utiliser! Je le trouve encore plus beau que Vuetify, mais la bibliothèque de composantes coûte quelque chose.
Finalement j’ai réussi à trouver le problème, ça venait de cette ligne dans mon login/register form:
<NavBar :avatarUrl="avatarUrl" />
J’ai mis ma component dans tous mes pages à la place de la mettre dans mon file « app.vue » et ça à marché.
Parfait, je vais allez lire là dessus, merci pour la référence !
Btw, je me demandais si j’avais vraiment besoin d’un nom de domaine parce que vu que c’est pas un vrai site web, je sais pas vraiment à quoi ça servirait. Est-ce que ça réglerait mon problème d’authentification ?
Aussi pour la droplet, je suis prêt à mettre de l’argent dessus mais je me demandais si il existait une alternative gratuite. Pour mon dernier site, j’avais utiliser un truc un peu crappy qui avait marcher mais qui permettait pas de register des nouveaux utilisateurs donc si au cas ou tu as une référence ça me permettrait de voir un peu les choix.
En attendant de savoir sur quoi je vais host mon instance je te met mon lien Github pour l’erreur avec le cookie: GitHub - renaudlandry123/vrrush: A website to discover the beautiful world of vr
Merci pour ton aide !!
Ton nom de domaine va te permettre d’avoir un formulaire de sécurité (SSL), ce qui enlève souvent des bugs au niveau de l’authentication. Ça va aussi te permettre d’héberger ton instance de Strapi Publiquement et me permettre de mieux t’aider dans le debugging. Ça va aussi te permettre d’héberger ton APP démo publiquement, ce qui va t’aider à éventuellement trouver des contrats!
Prends genre renaudlandry.com et héberge tes trucs sur le sous-domaine. Genre strapi.renaudlandry.com, demo.renaudlandry.com, etc.
Tu es mieux d’apprendre comment déployer avec un fournisseur professionnel, comme ça tu sauras comment faire quand tu vas avoir à le faire avec un client! En plus, c’est tellement abordable (4$/mois) que ça ne vaut pas vraiment la peine de cheaper là-dessus. Tu iras au McDonalds 2 fois de moins dans l’année.
Si je ne peux pas me connecter à ton instance Strapi, ça ne sert à rien que je l’installe en local. 
Je vais avoir pleins d’erreur!
Tout est beau finalement ! j’ai hébergé mon instance sur render pour 0$ avec PostgreSQL et j’ai utilisé l’app que tu m’as conseillé (netlify) pour host mon app. J’ai testé sur mon cell et mon site à le petit cadenas de sécurité donc je pense que netlify s’en est chargé.
Haha, le truc c’est que dans la doc strapi il est écris ça:
The $6/mo plan is currently unsupported as Strapi will not build with 1G of RAM. At the moment, deploying the Strapi Admin interface requires more than 1g of RAM. Therefore, a minimum standard Droplet of $12/mo or larger instance is needed."
j’aurais dû me priver de 10 menus mcdo par année 
J’ai pas réussi à mettre un nom custom à mon site alors il est un peu dégueu mais au moins ça marche, si tu as un peu de temps, hésite pas à jeter un coup d’oeil ! Le voici:
Un énorme merci pour tout ton aide, tu m’a énormément aidé et fait sauver de temps, j’aurais galéré sur un moyen temps si t’étais pas là alors merci !