Maîtriser l’authentification dans Nuxt avec le rendu côté serveur

Obtenez les conseils d’un développeur pour l’approche minimaliste de l’authentification dans Nuxt 3.

Après avoir passé une grande partie de mon temps à travailler avec Nuxt 3 cet été, j’ai dû me concentrer sur la conception de quelques systèmes d’authentification. J’ai exploré diverses approches et découvert que certaines sont bien plus simples et plus efficaces que d’autres.

Dans cet article, je partagerai avec vous mon approche la plus simple de la gestion de l’authentification dans Nuxt 3. 👩‍💻

Quelles solutions sont disponibles ?

Avec la transition de Nuxt 2 vers Nuxt 3, de nombreux développeurs remarqueront peut-être que des packages familiers comme @nuxtjs/auth ne sont plus viables. Heureusement pour nous, l’équipe Nuxt développe activement un nouveau module officiel pour Nuxt 3. 🏋️‍♀️

En attendant, trois solutions principales sont actuellement disponibles :

1. Utilitaires Nuxt 3 intégrés: Les utilitaires natifs de Nuxt 3 offrent une approche simple et intégrée de la gestion des sessions et de l’authentification. C’est la méthode sur laquelle je vais me concentrer dans cet article.

2. nuxt-auth-utils: Un module minimaliste entretenu par Sébastien Chopin, nuxt-auth-utils fournit des outils essentiels pour la gestion de session et l’intégration OAuth. Il est léger mais puissant pour de nombreux projets.

3. @sidebase/nuxt-auth: Si vous recherchez une solution plus riche en fonctionnalités, ce package est un concurrent sérieux. Il prend en charge les fournisseurs OAuth, l’authentification par courrier électronique avec les URL magiques et bien plus encore. Tirant parti de l’écosystème Auth.js/NextAuth.js bien établi, il est idéal pour les projets plus complexes.

Différences clés entre nuxt-auth-utils et @sidebase/nuxt-auth

Alors que les deux nuxt-auth-utils et @sidebase/nuxt-auth sont d’excellentes options, elles répondent à différents besoins. nuxt-auth-utils est une solution plus rationalisée, axée sur les utilitaires de base pour la gestion des sessions et OAuth. D’autre part, @sidebase/nuxt-auth offre une gamme plus large de fonctionnalités, notamment la prise en charge de plusieurs fournisseurs d’authentification et des capacités améliorées de gestion de session, ce qui en fait un choix robuste pour les applications complexes. 🦹‍♀️

Je n’ai pas encore eu l’occasion d’utiliser aucun de ces packages en production, je ne les aborderai donc pas dans cet article. J’ai pensé qu’ils méritaient d’être mentionnés, car ils pourraient être plus adaptés aux exigences de votre projet si la solution que je m’apprête à présenter ne répond pas à vos besoins. 🤗

Tirer parti des utilitaires Nuxt 3 intégrés

Cette approche est celle que j’utilise fréquemment dans diverses applications en raison de sa simplicité et de son intégration directe avec Nuxt 3. Cette solution suppose que votre backend gère l’authentification à l’aide de jetons, tels que JWT, et que ces jetons sont accessibles via une API.

Pour implémenter cela, vous aurez besoin de trois composants : une simple fonction composable (ou un magasin Pinia), un middleware pour gérer SSR et un plugin Axios pour attacher le jeton aux en-têtes de requête. Bien que vous puissiez utiliser fetch ou tout autre client HTTP, je préfère Axios en raison de sa familiarité. 😅

Étape 1 : Créer une fonction composable

Commençons par créer une fonction composable pour gérer l’authentification :

export function useAuth() {
  
  const api = useApi()

  
  const user = ref<null | User>(null)
  const opaqueToken = useState<null | string>('opaqueToken')

  
  const loginWithEmail = async (params: {
    email: string
    password: string
  }) => {
    try {
      const { data: { opaqueToken, user } } = await api.auth.loginWithEmail({
        email: params.email,
        password: params.password,
      })

      opaqueToken.value = opaqueToken
      user.value = user

      return { user }
    } catch (error) {
      return Promise.reject(error)
    }
  }

  
  const loginWithGoogle = async (params: {
    code: string
  }) => {
    try {
      const { data: { opaqueToken, user } } = await api.auth.loginWithGoogle({
        code: params.code,
      })

      opaqueToken.value = opaqueToken
      user.value = user

      return { user }
    }
    catch (error) {
      return Promise.reject(error)
    }
  }

  
  const logout = async () => {
    try {
      await api.auth.logout()

      opaqueToken.value = null
      user.value = null
    } catch (error) {
      return Promise.reject(error)
    }
  }

  
  watch(opaqueToken, (newVal) => {
    const cookie = useCookie('opaqueToken')

    if (cookie.value !== newVal)
      cookie.value = newVal
  })

  return {
    opaqueToken,
    user,
    loginWithEmail,
    loginWithGoogle,
    logout,
  }
}

En invoquant le loginWithEmail fonctionner n’importe où dans votre application, vous aurez accès à la fois aux données utilisateur et au jeton opaque.

Étape 2 : Créer un middleware pour SSR

Créons maintenant un middleware global pour partager le jeton opaque entre le serveur et le client. Comme vous pouvez le constater, nous utilisons le useCookie composable en tant que proxy pour partager le jeton opaque entre le serveur et le client. useState doit être initialisé sur le serveur pendant SSR afin qu’il soit disponible immédiatement lorsque le client s’hydrate.

export default defineNuxtRouteMiddleware(() => {
  
  
  const state = useState('opaqueToken')

  
  
  
  state.value = useCookie('opaqueToken').value
})

De cette façon, le jeton est toujours disponible et synchronisé entre SSR et CSR, maintenant ainsi une session utilisateur cohérente.

Étape 3 : configurer un plugin Axios

Enfin, configurons un plugin Axios pour inclure automatiquement le token opaque dans les en-têtes d’autorisation pour chaque requête :

export default defineNuxtPlugin(() => {
  
  const opaqueToken = useCookie('opaqueToken').value

  
  axios.interceptors.request.use((config) => {
    if (opaqueToken.value) {
      config.headers.Authorization = `Bearer ${opaqueToken.value}`
    }

    return config
  })
})

Avec ce plugin, le jeton opaque est inclus dans les en-têtes d’autorisation de chaque requête, permettant au backend d’authentifier l’utilisateur.

Conclusion

Et c’est tout ce dont vous avez besoin pour mettre en œuvre un système d’authentification basique mais efficace à l’aide des utilitaires intégrés de Nuxt 3 ! 🧚‍♀️

Parfois, les solutions les plus simples sont les plus efficaces. Après d’innombrables heures d’essais et d’erreurs, cette approche s’est avérée la plus fiable et la plus simple à mettre en œuvre. Que vous construisiez un petit projet ou une application plus complexe, cette méthode constitue une base solide pour une authentification sécurisée et efficace. 🤓

Si vous avez trouvé cet article utile, n’hésitez pas à me contacter sur Twitter @RifkiNada. Pour plus d’articles et d’informations, consultez mon travail sur www.nadarifki.com. 😉

Merci d’avoir lu! 🙏