Gestion du lien d'invitation Supabase avec connexion automatique

Mise en situation

Pour une plateforme développée avec nuxt3 et utilisant supabase, j'ai besoin de gérer des liens d'inscription. Les administrateurs de cette plateforme pré-inscrivent des membres. A la fin de cette pré-inscription, un lien pour initialiser son mot de passe est envoyé au membre. Je souhaite qu'une fois le mot de passe initialisé, le membre soit connecté.

Dans cet article, je me focalise sur le parcours et le fonctionnement principal, toutes les validations et sécurisations sont à ajouter.

Mise en place

1 - Envoi de l'invitation

Depuis l'interface administrateur, à la validation du formulaire, j'utilise un endpoint pour faire l'appel à la fonction Supabase permettant d'envoyer un lien d'invitation par mail. Le formulaire permet d'ajouter le membre dans la base de donnée, avec les infos nécessaires à mon site, mais surtout l'email donné par le client.

import { createClient } from '@supabase/supabase-js'

const config = useRuntimeConfig()

const supabaseAdmin = createClient(
  config.public.supabase_url,
  config.supabase_service_role_key
)

export default defineEventHandler(async (event) => {
  assertMethod(event, ['PUT', 'POST'])

  const confirmationUrl = config.public.apiBase+'invite-mot-de-passe' // Url de redirection depuis le mail
  const { email } = await readBody(event)

  const { data, error } = await supabaseAdmin.auth.admin.inviteUserByEmail(
    email, 
    { confirmationURL: confirmationUrl }
  )

  if (error) {
    ...
  }
  ...
})

2 - Contenu du mail Supabase

Dans supabase, il suffit de paramétrer le template du mail "Invite user" avec le lien donné en exemple.

...
<p>Votre pré-inscription sur {{ .SiteURL }} a été réalisée par un membre de notre équipe.</p>
...
<p><a href="{{ .ConfirmationURL }}">Finaliser mon inscription</a></p>
...

3 - Du mail à la plateforme

Une fois que le client clique sur le lien reçu, il est redirigé vers l'url définie. Pour rappel, l'url est celle donnée dans le code (paragraphe 1).

Dans la vue correspondante, on peut récupérer les informations transmises par Supabase :

const supabase = await useSupabaseClient()
const { data: { user } } = await supabase.auth.getUser()
const email = user?.email // Si besoin avec magic link

Le formulaire de cette page permet au membre d'initialiser son mot de passe.

A la validation du formulaire, il suffit d'utiliser la fonction de supabase pour mettre à jour le User.
Dans mon cas, je redigire vers une page me permettant de mettre à jour mon store et toutes les informations nécessaires au fonctionnement de mon site.

const handleUpdatePassword = async(values) => {

  try {
    // Vérification si une session existe
    const { data: { session } } = await supabase.auth.getSession()

    if (session) {
      // Cas 1, l'utilisateur s'est déjà connecté sur ce navigateur
      const { error: updateError } = await supabase.auth.updateUser({
        password: values.password
      })

      if (updateError) throw Error

      navigateTo('/login')

    } else {
      // Cas 2, pas de session, on utilise le code de récupération
      const url = new URL(window.location.href)
      const code = url.searchParams.get('code')

      if (!code) {
        throw new Error('Code de récupération manquant')
      }

      const { data, error } = await supabase.auth.updateUser(code, {
        password: values.password
      })

      if (error) throw error

      navigateTo('/login')
    }
  } catch (e) {
    ...
  }

  ...

}

Et le système d'invitation par mail avec connexion automatique suite à l'initialisation du mot de passe est en place et fonctionnelle.