Blazor et Supabase, Authentification - Part 2

Banner Image

English version here

Part 1 : Base de données
Part 2 : Authentification
Part 3 : Temps réel

Introduction:

Un des atouts de Supabase, c'est de gérer tout ce qui concerne l'authentification ainsi que les autorisations de votre application.
Plusieurs providers sont disponibles comme le mail/mot de passe mais également la pluspart des providers du marché (SAML, Microsoft, Facebook, Google, Apple, Linkedin, ...)

La mise en place dans une application Blazor n'était pas très simple car il y a peu de documentation sur ce sujet.
C'est la raison pour laquelle j'ai décidé de créer ces articles.
Certaines classes C# proviennent d'anciens projets persos ou de classes découvertes sur GitHub. Mais pour vous, ce sera très simple à implémenter !

Comme précédemment, ne pas oublier de cloner ou parcourir le projet GitHub de référence : https://github.com/phnogues/Blazor.Supabase/

Le type d'authentification que j'ai choisi sera l'utilisation d'un Token JWT.
Il y a de nombreuses possibilités que je décrirai pas ici. N'hésitez pas à me laisser un commentaire pour en savoir plus.

C'est parti !

Mise en place:

Ici, je ne vais pas copier le code, ce serait trop difficile à digérer, prenez le temps de parcourir le projet GitHub.

Prérequis:

• Avoir suivi la partie 1 sur la mise en place de Supabase

• Vérifier que les informations présentes dans votre appsettings.json soient bonnes.

  • ValidIssuser : l'url de votre api supabase suivie de /auth/v1
  • ValidAudience : authenticated
  • JwtSecret : votre clé, qui se trouve dans Project settings / API / JWT Secret

• Depuis Supabase, trois pages seront importantes :

  • La base de données des utilisateurs : Authentication
  • Le paramétrage des providers : Authentication / Providers
  • Le paramétrage de l'authentification : Project Settings / Authentication

Dans le code je vous invite à regarder les classes suivantes :

• Program.cs

// Authenticated services
builder.Services.AddTransient<AuthService>();
builder.Services.AddTransient<UserService>();
builder.Services.AddScoped<AuthenticationStateProvider, SupabaseAuthenticationStateProvider>();
builder.Services.AddSingleton<IAuthorizationMiddlewareResultHandler, BlazorAuthorizationMiddlewareResultHandler>();
builder.Services.TryAddSingleton<IHttpContextAccessor, HttpContextAccessor>();

• SupabaseAuthenticationStateProvider : Ce sera notre gestionnaire d'état pour le Token JWT
• AuthService : Cette classe permettera de se logger, s'enregistrer, mettre à jour son compte ou son mot de passe. Le token sera persister dans le local storage.
  • Dans la méthode RegisterAsync, on pourra ajouter autant de données additionnelles que l'on souhaite, comme le prénom ou le nom.
• Pour l'envoi de mail, je vous invite à utiliser un SMTP (moi j'utilise Brevo), car celui de Supabase est très limité dans la version gratuite.
• UserService : Récupére l'utilisateur connecté via son Token JWT
• Routes.razor : Utiliser une balise CascadingAuthenticationState

Part 3 -> https://pierrehenri.fr/fr/blog/blazor-et-supabase-temps-reel-part-3

Commentaires :