Kinde est une solution d’authentification pour les applications modernes, conçue pour rendre l’intégration de la gestion des utilisateurs à la fois simple et sécurisée. Elle fournit une interface facile à utiliser, de nombreuses options de personnalisation et un excellent support pour les frameworks comme Next.js.
1. Introduction à Kinde
Dans le développement moderne d’applications, l’authentification sécurisée est essentielle pour garantir la sécurité et la gestion fluide des utilisateurs. Cependant, implémenter une solution d’authentification complète peut être fastidieux et complexe. C’est ici que Kinde entre en jeu. En effet, Kinde est une solution qui simplifie l’intégration d’un système d’authentification dans les applications modernes.
Avec Kinde , vous n’avez pas à vous soucier de la complexité de la gestion des utilisateurs. Tout est pensé pour vous offrir une approche simplifiée et performante. Alors, explorons pourquoi Kinde est un excellent choix pour ajouter l’authentification à votre application Next.js.
2. Pourquoi choisir Kinde pour l’authentification ?
Avant de plonger dans l’intégration technique, il est important de comprendre pourquoi Kinde est un outil de choix. Tout d’abord, Kinde permet de centraliser et de sécuriser la gestion des utilisateurs. Ensuite, il propose plusieurs avantages pour les développeurs et les entreprises.
- Gestion centralisée des utilisateurs : Avec Kinde, toutes les informations d’authentification et de gestion des utilisateurs sont centralisées. Autrement dit, vous n’avez plus besoin de manipuler manuellement les données de vos utilisateurs.
- Simplicité d’intégration : Grâce à sa documentation claire et ses outils intégrés, ajouter Kinde à une application Next.js devient un processus rapide et efficace.
- Protection des données : En utilisant Kinde, vous vous assurez que les données de vos utilisateurs sont protégées selon les meilleures pratiques du marché.
Dès lors, choisir Kinde vous permet de mettre en place une solution d’authentification de haute qualité sans vous encombrer de détails techniques complexes. Passons maintenant à la mise en place de Kinde dans un projet Next.js.
3. Mettre en place Kinde dans votre application Next.js
Pour commencer, l’installation de Kinde dans votre projet Next.js est une étape rapide. Avec npm ou yarn, installez le package Kinde comme suit :
npm install @kinde-oss/kinde-auth-nextjsUne fois le package installé, il ne reste plus qu’à intégrer Kinde dans les pages de votre application. Ainsi, vous pourrez gérer les sessions, vérifier l’authentification des utilisateurs et sécuriser l’accès aux différentes sections de votre site.
4. Exemple de code pour le tableau de bord
Voyons maintenant un exemple de code pour créer une page de tableau de bord sécurisée. Dans cette page, un utilisateur connecté peut voir ses informations personnelles, telles que son prénom, son nom de famille, son adresse e-mail et son ID utilisateur. Pour ce faire, utilisons les fonctionnalités offertes par Kinde pour récupérer les données de session.
import { LogoutLink } from "@kinde-oss/kinde-auth-nextjs/components";
import { getKindeServerSession } from "@kinde-oss/kinde-auth-nextjs/server";
import Image from "next/image";export default async function PageDashboard() {
const { getUser } = getKindeServerSession();
const user = await getUser();
console.log(user);return (
<section className="w-full h-screen flex items-center justify-center flex-col">
<h1 className="text-6xl uppercase font-black mb-2">PAGE DASHBOARD</h1>
<p className="text-lg text-muted-foreground">Bienvenue {user?.family_name}</p>
<Image src={user?.picture as string} width={100} height={100} alt="Photo de profil" className="rounded-full" />
<ul className="text-center my-4">
<li>
<span className="font-bold">ID:</span>
<span>{user?.id}</span>
</li>
<li>
<span className="font-bold">Email:</span>
<span>{user?.email}</span>
</li>
<li>
<span className="font-bold">Prénom:</span>
<span>{user?.given_name}</span>
</li>
</ul>
<LogoutLink>
<button className="bg-red-500 hover:bg-red-600 text-white p-2 rounded-md">Log out</button>
</LogoutLink>
</section>
);
}
Dans cet exemple :
- Tout d’abord, nous utilisons
getKindeServerSession()pour accéder aux informations de session et obtenir les données utilisateur. - Ensuite, nous affichons ces informations, telles que le prénom et l’e-mail de l’utilisateur connecté.
- Enfin, la balise
<LogoutLink>permet de se déconnecter de manière sécurisée, toujours en utilisant les fonctionnalités de Kinde.
En conséquence, cette page de tableau de bord est simple, mais elle remplit parfaitement son rôle. Voyons à présent comment protéger cette page et les autres pages de votre application avec Kinde.
5. Sécuriser les routes avec Kinde
Pour une application où l’accès à certaines pages est réservé aux utilisateurs connectés, protéger les routes devient crucial. Heureusement, Kinde offre des fonctionnalités pour garantir l’accès sécurisé aux pages de votre application. Par exemple, dans cette page Dashboard, nous allons limiter l’accès aux utilisateurs authentifiés.
import { getKindeServerSession } from "@kinde-oss/kinde-auth-nextjs/server";
import { LoginLink } from "@kinde-oss/kinde-auth-nextjs/components";export default async function DashboardLayout({ children }) {
const { isAuthenticated } = getKindeServerSession();
return (await isAuthenticated()) ? (
<>
{children}
</>
) : (
<section className="w-full h-screen flex items-center justify-center flex-col gap-2">
<p>Vous devez être connecté pour accéder à cette page</p>
<LoginLink>
<button className="bg-green-500 hover:bg-green-600 text-white p-2 rounded-md">Sign In</button>
</LoginLink>
</section>
);
}
En analysant ce code, on constate :
- D’abord, nous utilisons
isAuthenticated()pour vérifier si l’utilisateur est actuellement connecté. - Si l’utilisateur est bien connecté, nous affichons le contenu de la page. Sinon, un message d’avertissement et un bouton de connexion sont affichés, ce qui incite l’utilisateur à se connecter pour accéder au contenu sécurisé.
En utilisant ce layout, vous pouvez appliquer cette vérification d’authentification à toutes les pages protégées de votre application. Par conséquent, cela garantit que seules les personnes connectées accèdent aux sections sensibles de votre site.
6. Conclusion
En résumé, intégrer Kinde à une application Next.js est un excellent moyen de simplifier la gestion des utilisateurs tout en assurant un haut niveau de sécurité. Grâce aux composants comme getKindeServerSession et LogoutLink, Kinde offre une interface intuitive et une intégration sans tracas. Ainsi, vous pouvez vous concentrer sur l’ajout de nouvelles fonctionnalités sans vous soucier des complexités de l’authentification.
Finalement, avec des avantages tels que la simplicité d’intégration, la protection centralisée des utilisateurs et les options de personnalisation, Kinde est une solution d’authentification qui se démarque. En suivant ce guide, vous avez désormais toutes les clés en main pour offrir à vos utilisateurs une expérience de connexion fluide et sécurisée. Pour approfondir vos connaissances en Next JS et maîtriser ces nouvelles fonctionnalités, n’hésitez pas à rejoindre ma formation dédiée à Next JS, où vous apprendrez à créer des applications performantes et réactives.
je pense que la partie redux manque de TP
Merci beaucoup pour la formation c'est top
Bonjour certaines sections sont en cours d'écriture bien à vous Jonathan
Hello Gregory, Merci pour ton retour et ton soutien, Pour répondre à t'as question, non tu peut utiliser Yup sans…
Excellent Article mais est-on "obligé" d'utiliser React Hook Form ? Yup est une solution vraiment excellente et la mise en…