@Renaud Est-ce que tu as fais yarn develop et est-ce que tu as accès à ton instance de Strapi?
Ça ressemble à ça:
Pour ton authentication, passe par le plugin Strapi-Nuxt directement!
<script setup lang="ts">
const { login } = useStrapiAuth()
const router = useRouter()
const onSubmit = async () => {
try {
await login({ identifier: '', password: '' })
router.push('/authenticated-page')
} catch (e) {}
}
</script>
La doc est ici:
Oui! J’ai utilisé npm à la place mais j’ai bien accès à mon admin.
Est-ce que tu me recommande d’utiliser typescript ?, j’hésite à le loader parce que dans les exemples de nuxt ils l’utilisent mais je sais pas si ça en vaut vrm la peine. Aussi, je n’arrive pas à comprendre comment les requests arrivent à se faire si il n’y à aucun lien pour rediriger vers mon api. Est-ce que je dois créer un file et mettre le lien de mon api ? Merci pour le doc !
Pas besoin de prendre TypeScript tout de suite, mais il va falloir que tu finissent par te familiariser avec ça puisque ça représente pas mal l’avenir de JavaScript!
Lorsque tu créer ta « collection » dans Strapi, ça créer l’endpoint automtiquement.
Exemple, voici ma collection « Studio »:
Et si je visite https://admin.lesbunkers.com/api/studios:
"data": [
{
"id": 1,
"attributes": {
"createdAt": "2022-11-12T16:26:20.147Z",
"updatedAt": "2022-11-12T18:16:56.726Z",
"publishedAt": "2022-11-12T16:33:39.460Z",
"Nicename": "Bunker Mtl",
"slug": "bunker-mtl"
}
},
{
"id": 2,
"attributes": {
"createdAt": "2022-11-12T16:27:29.185Z",
"updatedAt": "2022-11-12T18:18:17.043Z",
"publishedAt": "2022-11-12T16:33:43.979Z",
"Nicename": "Bunker de Trois-Rivières",
"slug": "bunker-3r"
}
},
{
"id": 3,
"attributes": {
"createdAt": "2022-11-12T16:28:28.040Z",
"updatedAt": "2022-11-12T18:18:45.665Z",
"publishedAt": "2022-11-12T16:33:47.762Z",
"Nicename": "Bunker de Québec",
"slug": "bunker-qc"
}
},
{
"id": 4,
"attributes": {
"createdAt": "2022-11-12T16:28:46.745Z",
"updatedAt": "2023-01-11T21:30:42.029Z",
"publishedAt": "2023-01-11T21:30:42.006Z",
"Nicename": "Bunker de Sherbrooke",
"slug": "bunker-sherby"
}
}
],
"meta": {
"pagination": { "page": 1, "pageSize": 25, "pageCount": 1, "total": 4 }
}
}
Ça se peut que tu aies une erreur si ta route est protégée. Tu peux aller rendre tes routes publiques quand tu vas dans « Settings » > « Roles » > « Public »:
Par contre, tu n’as pas besoin de faire ça pour l’authentication.
Dans ta page de login, tu devrais avoir du code qui ressemble à ça:
<script setup>
const { login, register } = useStrapiAuth()
const userData = ref( {
email: null,
first_name: null,
last_name: null,
password: null,
validate_password: "",
} )
const checkPassword = async () => {
loading.value = true
try {
await login( { identifier: userData.value.email, password: userData.value.password } )
layout.dialog.status = false
let path = "/"
if(route.query.path) path = route.query.path
navigateTo(path)
} catch ( e ) {
wrongPassword.value = true
loading.value = false
error.value = e.error.message
}
}
const createAccount = async () => {
try {
await register( userData.value )
navigateTo( '/' )
} catch ( e ) {
accountNumber.value++
setUsername()
}
}
</script>
Oups, désolé je voulais plus dire comment est-ce que vue fait pour savoir si les utilisateurs sont déjà enregistrés si le lien vers l’api n’est pas spécifié. Je sais que c’est nuxt qui s’en occupe mais j’arrive pas à comprendre comment il fait pour savoir si l’utilisateur est déjà connecté sans avoir de lien vers l’api ?
Pourquoi est-ce qu’il faut faire une const pour « register »:
si le script est sensé représenter le login form, est-ce que c’est pour les users n’ayant pas de compte qui essayerais de se login ? Sinon, est-ce que ça veut dire que le login form et le register form doivent être sur la même component ?
Finalement, je ne comprend pas à quoi sert la section Authenticated et la section public dans « Settings » > « Roles » >, est-ce que j’ai besoin de créer un content-type « login » pour Authenticated et « register » pour Public ? En tous cas j’ai créé un content-type « register » mais je n’arrive pas à comprendre si je dois l’utiliser pour les deux et savoir quelle case à cocher pour les réglages de chacun. Merci d’avance et merci beaucoup pour ton aide ! @robolivier tu peux tenter de répondre !
Salut Renaud! Je vais essayer de répondre à tes questions une par une.
Pour comprendre comment Nuxt sait si un utilisateur est déjà connecté, il faut regarder du côté du module d’authentification de Nuxt. Généralement, lorsqu’un utilisateur se connecte avec succès, un token est créé et stocké dans le navigateur (par exemple, dans un cookie ou dans le local storage). Ce token est ensuite utilisé pour chaque requête API qui nécessite une authentification. Ainsi, si le token est présent et valide, Nuxt considère que l’utilisateur est connecté.
Concernant la constante register dans le script, elle provient de la fonction useStrapiAuth() qui est utilisée pour gérer l’authentification avec Strapi. Elle expose plusieurs méthodes utiles, dont login pour se connecter et register pour s’inscrire. Dans l’exemple que j’ai donné, le script représente à la fois le formulaire de connexion et le formulaire d’inscription (c’est pourquoi register est utilisé). Cependant, tu peux choisir de les séparer et de créer deux composants distincts pour les formulaires de connexion et d’inscription si tu le souhaites.
Les sections « Authenticated » et « Public » dans « Settings » > « Roles » servent à définir les permissions pour les différentes routes API. Les routes « Authenticated » sont celles qui nécessitent qu’un utilisateur soit connecté pour y accéder, tandis que les routes « Public » sont accessibles à tous, même sans connexion. Tu n’as pas besoin de créer un content-type « login » ou « register ». En fait, Strapi gère déjà l’authentification et l’inscription des utilisateurs grâce à son plugin « Users & Permissions ». Il te suffit de configurer les permissions pour les routes d’authentification et d’inscription dans les paramètres de ce plugin.
Pour résumer, tu n’as pas besoin de créer un content-type « login » ou « register ». Strapi gère déjà ces fonctionnalités avec son plugin « Users & Permissions ». Tu peux simplement configurer les permissions pour les routes correspondantes dans les paramètres du plugin.
J’espère que ça répond à tes questions! Si tu as d’autres questions ou si quelque chose n’est pas clair, n’hésite pas à me le dire.
Dans ma login page, je commence par demander l’adresse courriel des gens pour vérifier si la personne a déjà un compte.
const verifyEmail = async () => {
loading.value = true
const { valid } = await emailForm.value.validate()
if ( valid ) {
emailError.value = false
const response = await find( 'email', { 'email': userData.value.email } )
console.log( response )
loading.value = false
if ( response !== 0 ) {
step.value = "password"
userData.value.username = response
emailError.value = false
} else {
step.value = "badEmail"
emailError.value = true
}
} else {
console.log( "oops!" )
emailError.value = true
loading.value = false
}
}
J’utilise step.value = "badEmail" pour changer les éléments affichés avec des v-if.
Ensuite, j’utilise la fonction register s’il s’agit d’un nouveau compte et login pour les comptes existants.
Pour le reste, Robolivier a bien répondu!
J’ai essayer d’utiliser const { register } = useStrapiAuth(); mais je reçois une erreur à useStrapiAuth() qui me dis que la variable est pas définie, pourtant j’ai installer la dependencie strapi-nuxt. J’ai essayer d’importer import { useStrapiAuth } from "@nuxtjs/strapi"; mais j’ai reçu plein d’erreur avec le node_module.
Aussi robolivier à répondue à un aspect de ma question mais ne m’a pas répondue sur comment Vue faisait pour savoir ou envoyer la request si aucun lien dans mon projet pointe vers mon api, comment il sais de quelle projet Strapi je réfère ? Est-ce que j’ai besoin de créer un file apart où je met le link de l’api ou nuxt fait toute tout seul?
Finalement, je viens d’aller voir sur mon folder « data base » et je crois que strapi utilise sqlite: const client = env('DATABASE_CLIENT', 'sqlite'); pourtant j’avais bien coché mongo, est-ce j’ai juste besoin de changer ‹ sqlite › par ‹ mongo › ou c’est beaucoup plus complexe à changer?
Merci pour l’explication sur ton login form !
C’est dans ta config Nuxt!
{
url: process.env.STRAPI_URL || 'http://localhost:1337',
prefix: '/api',
version: 'v4',
cookie: {},
cookieName: 'strapi_jwt'
}
J’ai oublié que c’est ta première fois avec Nuxt! 
Effectivement, ça ne faisait pas trop de sens!
Perso, ma config ressemble à ça:
// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
modules: ['@nuxtjs/strapi'],
strapi: {
url: 'https://admin.lesbunkers.com',
prefix: '/api',
version: 'v4',
cookie: {},
cookieName: 'strapi_jwt',
},
}
J’ai un paquet d’autres scripts dans le document, mais ça c’est mon bout pour strapi!
Par ici pour en savoir plus sur le document de configuration de Nuxt:
En gros, tu as un fichier nuxt.config qui contient les instructions, plugins et autres modifications. Ce fichier est lue et utilisée quand tu fais yarn dev, build, etc.
Ne te stress pas avec le type de base de donnée que tu as, ça n’a pas vraiment d’impact pour l’instant. L’usage de Strapi est le même peu importe le type de BD utilisé, vas-y avec ce que tu as!
Pour le defineNuxtConfig Je reçois une erreur qui me dis qu’il n’est pas définie alors que dans la doc il est écris qu’on à pas besoin de l’importer, est-ce que je peux l’enlever et simplement faire export default ou il est nécessaire ?
Aussi, est-ce que je dois importer ma config nuxt dans mon login et sign up form parce que je reçois toujours une erreur à useStrapiAuth().
Merci pour les docs !
Est-ce que tu as installé Nuxt correctement?
Quand tu installes, ton fichier nuxt.config se créer automatiquement avec les bonnes configurations.
Tu ne peux pas « installer » Nuxt sur un projet existant. Tu dois en refaire un et importer tes trucs vue à l’intérieur.
Repart de zéro, suis la documentation étape par étape et essaie de te faire une dummy page qui dit « Hello World ».
Ensuite, installe Nuxt-Strapi, créer ton formulaire de login et valide que ça marche.
Finalement, importe le reste de ton projet Vue dans ton nouveau projet Nuxt!
Should work alright. 
Yes! J’ai réussi à créer mon projet et je suis entrain de regarder un tuto pour importer mon projet Vue sur mon projet nuxt. je galère depuis pas mal toute la journée mais je devrais être capable de faire fonctionner ça. Un GROS merci pour tout l’aide et pour m’avoir fait découvrir Nuxt, tu m’a fait gagner un temp fou donc merci ! Bonne soirée !
Ça fait plaisir! J’ai hâte de voir ton app, lâche pas. 
@Olivier_Lambert Salut Oli, j’écris un message ici parce que je viens de replongé dans mes forms et j’ai eu quelques erreurs inattendues.
J’ai suivi la doc de strapi et Nuxt-Strapi, j’ai créer une content-type « register » et j’ai créer mes 2 form mais je reçois une « bad request » quand je viens pour m’inscrire:
POST http://localhost:1337/api/auth/local/register 400 (Bad Request)
Mon register form :
<script>
const { register } = useStrapiAuth()
const router = useRouter()
export default {
name: "RegisterView",
data() {
return {
username: "",
email: "",
password: "",
};
},
methods: {
async handleSubmit() {
try {
await register({ username: this.username, identifier: this.email, password: this.password })
router.push('/')
} catch (e) {
console.log(e)
}
},
},
};
</script>
Ma config:
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig ({
modules: ['@nuxtjs/strapi'],
strapi: {
url: process.env.STRAPI_URL || 'http://localhost:1337',
prefix: '/api',
version: 'v4',
cookie: {},
cookieName: 'strapi_jwt',
},
})
Ensuite, quand je refresh ma register page, je reçois une erreur 500:
[nuxt] A composable that requires access to the Nuxt instance was called outside of a plugin, Nuxt hook, Nuxt middleware, or Vue setup function. This is probably not a Nuxt bug. Find out more at https://nuxt.com/docs/guide/concepts/auto-imports#using-vue-and-nuxt-composables.
at Module.useRuntimeConfig (./node_modules/nuxt/dist/app/nuxt.js:240:10)
at Module.useStrapiUrl (./node_modules/@nuxtjs/strapi/dist/runtime/composables/useStrapiUrl.mjs:4:63)
at Module.useStrapiAuth (./node_modules/@nuxtjs/strapi/dist/runtime/composables/useStrapiAuth.mjs:12:37)
at ./pages/register.js:11:44
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async ViteNodeRunner.directRequest (./node_modules/vite-node/dist/client.mjs:331:5)
at async ViteNodeRunner.cachedRequest (./node_modules/vite-node/dist/client.mjs:171:14)
at async ViteNodeRunner.dependencyRequest (./node_modules/vite-node/dist/client.mjs:220:14)
at async Object.setup (./node_modules/nuxt/dist/pages/runtime/plugins/router.js:85:96)
Donc voilà, si tu aurais une réponse à ces problèmes ça m’aiderait bcp ! Merci pour ton aide !!
Finalement c’était juste à cause que j’avais écris identifier au lieu de email ici:
tout est beau !
Hahaha! Content que tu aies finalement trouvé le problème. J’ai été assez occupé de mon côté et j’ai manqué de temps pour analyser ton code.
Pas de trouble, finalement j’ai pas réellement réussi à faire fonctionner mon form, il à recommencé à me donner une erreur 400 avec comme message: « Register action is currently disabled » 10 minutes après que j’ai écris mon message 
. Vu que je venais d’écrire sur la tranchée que tout était beau, j’étais un peu mal à l’aise de dire que finalement ça marchait pas alors j’ai posé ma questions sur plein de forum un peu ghetto et j’ai tester mes request sur postman mais ça à rien donné.
Donc finalement si tu as une piste d’où proviendrait ce problème, ça m’aiderait bcp ! Merci d’avance !
Hmmmm est-ce que ton instance de Strapi est en route?
Et si oui, est-ce que tu as désactivé les inscriptions sans faire exprès?
That was it ! J’ai cru que enable voulait dire « désactiver » 
. Un gros merci pour ton aide !
Hahaha! 
Parfois, tout ce qu’il faut, c’est une nouvelle paire de yeux!
Salut Oli, désolé de te déranger encore, j’ai essayé mon form et tout avait l’air de fonctionner bien, j’ai essayé de refresh et d’aller sur d’autres pages de mon app mais j’étais logout à chaque fois et mon jwt token disparaissait constamment de mon cookie.
J’ai demandé sur un sub reddit la cause de l’erreur et il m’on dit que je devais configurer mon cookie, le problème c’est que j’ai aucune idée de comment m’y procéder. Un gars m’a dis d’utiliser la composable useCookie pour mettre un timeout à chaque session mais ça à pas marcher pour moi:
const newCookie = useCookie('your_coockie_name', {
maxAge: 600*60,
})
newCookie.value = userToken
Donc voilà, si tu aurais une idée de comment je pourrais configurer mon cookie ça m’aiderait bcp, merci d’avance !!