avril 10, 2025

Comment construire une application SaaS multi-locataire avec Next.js (Frontend Integration) –

Dans le Première partie de cette série d’articlesnous avons implémenté le backend avec AppWrite, installé certaines dépendances et configuré un permis pour gérer l’autorisation et le contrôle d’accès basé sur les rôles.

Voyons maintenant comment nous pouvons intégrer le frontend avec le backend pour une application EDTech entièrement fonctionnelle.

Intégration frontale: mise en œuvre de l’autorisation dans Next.js

Maintenant que vous avez une autorisation backend en place en utilisant le permis, intégrez-le dans votre frontend Next.js. Le frontend devrait:

Répondez aux autorisations des utilisateurs du backend pour contrôler ce que les utilisateurs peuvent voir et faire.
Assurez-vous que les demandes d’API respectent le contrôle d’accès basé sur les rôles (RBAC).
Masquer les éléments de l’interface utilisateur pour les utilisateurs non autorisés (par exemple, empêcher les étudiants de voir «créer un affectation»).

1. Configuration des appels API avec autorisation

Étant donné que seul le backend applique les autorisations, votre frontend ne décide jamais d’accès directement – au lieu, il:

Envoie des demandes au backend
Attend la réponse d’autorisation du backend
Affiche les données ou les éléments d’interface utilisateur en conséquence

Pour commencer, vous devrez installer Node.js sur votre ordinateur.

Ensuite, suivez ces étapes, suivez les étapes ci-dessous:

npx create-next-app@latest frontend
cd frontend

2. Initialiser Shadcn

Ce que vous observerez après la création de votre projet NextJS, c’est que Tailwind CSS V4 est installé pour vous dès la sortie de la boîte, ce qui signifie que vous n’avez rien à faire d’autre. Parce que nous utilisons une bibliothèque de composants, nous allons installer Oignon shadcn.

Pour ce faire, nous devons exécuter la commande init pour créer un fichier composants.json dans la racine du dossier:

Après initialisation, vous pouvez commencer à ajouter des composants à votre projet:

npx shadcn@latest add button card dialog input label table select tabs

Si vous vous demandez, si vous devez utiliser Force en raison de la compatibilité de la version NextJS 15 avec Shadcn, appuyez sur Entrée pour continuer.

3. Installez les packages nécessaires

Installez les packages suivants:

npm i lucide-react zustand
npm i --save-dev axios

Maintenant que nous avons installé tout ce dont nous avons besoin pour créer notre application, nous pouvons commencer à créer nos autres composants et itinéraires.

Pour maintenir la cohérence de l’interface utilisateur tout au long de l’application, collez ce code dans votre fichier global.css (collez-le en dessous de votre importation de tailwindcss):

@layer base {
  :root {
    --background: 75 29% 95%;           
    --foreground: 0 0% 9%;              

    --card: 0 0% 100%;                  
    --card-foreground: 0 0% 9%;         

    --popover: 0 0% 99%;                
    --popover-foreground: 0 0% 9%;      

    --primary: 0 0% 0%;                 
    --primary-foreground: 60 100% 100%; 

    --secondary: 75 31% 95%;            
    --secondary-foreground: 0 0% 9%;    

    --muted: 69 30% 95%;                
    --muted-foreground: 0 0% 45%;       

    --accent: 252 29% 97%;              
    --accent-foreground: 0 0% 9%;       

    --destructive: 0 84.2% 60.2%;       
    --destructive-foreground: 0 0% 98%; 

    --border: 189 0% 45%;               
    --input: 155 0% 45%;                
    --ring: 0 0% 0%;                    

    --radius: 0.5rem;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}
body {
  font-family: Arial, Helvetica, sans-serif;
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}

4. Fichiers de composants

Créez les fichiers de composants suivants et collez leur code correspondant:

AddAssignmentDialog.tsx déposer:

"use client"

import type React from "react"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { Assignment } from "@/types"

interface AddAssignmentDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  onAddAssignment: (data: Assignment) => void
  creatorEmail: string
}

export function AddAssignmentDialog({ open, onOpenChange, onAddAssignment, creatorEmail }: AddAssignmentDialogProps) {
  const [title, setTitle] = useState("")
  const [subject, setSubject] = useState("")
  const [teacher, setTeacher] = useState("")
  const [className, setClassName] = useState("")
  const [dueDate, setDueDate] = useState("")

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    
    const newAssignment = { title, subject, teacher, className, dueDate, creatorEmail }
    onAddAssignment(newAssignment)
    console.log("New assignment:", { title, subject, class: className, dueDate, creatorEmail })
    onOpenChange(false)
  }

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Add New Assignment</DialogTitle>
          <DialogDescription>
            Enter the details of the new assignment here. Click save when you're done.
          </DialogDescription>
        </DialogHeader>
        <form onSubmit={handleSubmit}>
          <div className="grid gap-4 py-4">
            <div className="grid grid-cols-4 items-center gap-4">
              <Label htmlFor="title" className="text-right">
                Title
              </Label>
              <Input id="title" value={title} onChange={(e) => setTitle(e.target.value)} className="col-span-3" />
            </div>
            <div className="grid grid-cols-4 items-center gap-4">
              <Label htmlFor="subject" className="text-right">
                Subject
              </Label>
              <Input id="subject" value={subject} onChange={(e) => setSubject(e.target.value)} className="col-span-3" />
            </div>
            <div className="grid grid-cols-4 items-center gap-4">
              <Label htmlFor="teacher" className="text-right">
                Teacher
              </Label>
              <Input id="teacher" value={teacher} onChange={(e) => setTeacher(e.target.value)} className="col-span-3" />
            </div>
            <div className="grid grid-cols-4 items-center gap-4">
              <Label htmlFor="class" className="text-right">
                Class
              </Label>
              <Input
                id="class"
                value={className}
                onChange={(e) => setClassName(e.target.value)}
                className="col-span-3"
              />
            </div>
            <div className="grid grid-cols-4 items-center gap-4">
              <Label htmlFor="dueDate" className="text-right">
                Due Date
              </Label>
              <Input
                id="dueDate"
                type="date"
                value={dueDate}
                onChange={(e) => setDueDate(e.target.value)}
                className="col-span-3"
              />
            </div>
          </div>
          <DialogFooter>
            <Button type="submit">Save changes</Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  )
}

Ce fichier définit un composant React, addAssignmentDialog, qui rend un formulaire de dialogue pour ajouter de nouvelles affectations. Il gère l’état de formulaire à l’aide d’Usestate et soumet les données d’attribution à un composant parent via l’offre OnAddAssignment. La boîte de dialogue comprend des champs d’entrée pour le titre, la matière, l’enseignant, la classe et la date d’échéance, et se ferme lors de la soumission.

AddStudentDialog.tsx déposer:

'use client'

import { useState } from 'react'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import { Student } from '@/types'

interface AddStudentDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  onAddStudent: (data: Student) => void
  loading: boolean
  creatorEmail: string
}

export function AddStudentDialog({ open, onOpenChange, onAddStudent, loading, creatorEmail }: AddStudentDialogProps) {
  const [firstName, setFirstName] = useState('')
  const [lastName, setLastName] = useState('')
  const [className, setClassName] = useState('')
  const [gender, setGender] = useState('')
  const [age, setAge] = useState("")

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    
    onAddStudent({
      firstName,
      lastName,
      className,
      gender,
      age: Number(age),
      creatorEmail
    })
    console.log('New student:', { firstName, lastName, className, gender, age })
    onOpenChange(false)
  }

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Add New Student</DialogTitle>
          <DialogDescription>
            Enter the details of the new student here. Click save when you're done.
          </DialogDescription>
        </DialogHeader>
        <form onSubmit={handleSubmit}>
          <div className="grid gap-4 py-4">
            <div className="grid grid-cols-4 items-center gap-4">
              <Label htmlFor="firstName" className="text-right">
                First Name
              </Label>
              <Input
                id="firstName"
                value={firstName}
                onChange={(e) => setFirstName(e.target.value)}
                className="col-span-3"
              />
            </div>
            <div className="grid grid-cols-4 items-center gap-4">
              <Label htmlFor="lastName" className="text-right">
                Last Name
              </Label>
              <Input
                id="lastName"
                value={lastName}
                onChange={(e) => setLastName(e.target.value)}
                className="col-span-3"
              />
            </div>
            <div className="grid grid-cols-4 items-center gap-4">
              <Label htmlFor="class" className="text-right">
                Class
              </Label>
              <Input
                id="class"
                value={className}
                onChange={(e) => setClassName(e.target.value)}
                className="col-span-3"
              />
            </div>
            <div className="grid grid-cols-4 items-center gap-4">
              <Label htmlFor="gender" className="text-right">
                Gender
              </Label>
              <Select onValueChange={setGender} value={gender}>
                <SelectTrigger className="col-span-3">
                  <SelectValue placeholder="Select gender" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="boy">Boy</SelectItem>
                  <SelectItem value="girl">Girl</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div className="grid grid-cols-4 items-center gap-4">
              <Label htmlFor="age" className="text-right">
                age
              </Label>
              <Input
                id="age"
                type="number"
                step="0.1"
                value={age}
                min={"4"}
                max={"99"}
                placeholder='enter a valid age'
                onChange={(e) => setAge(e.target.value)}
                className="col-span-3"
              />
            </div>
          </div>
          <DialogFooter>
            <Button disabled={loading} type="submit">{loading ? "Saving..." : "Save Changes"}</Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  )
}

Ce fichier définit un composant React, AddStudentDialog, qui rend un formulaire de dialogue pour ajouter de nouveaux étudiants. Il gère l’état de formulaire à l’aide d’Usestate et soumet les données de l’élève à un composant parent via l’offre OnAddDstudent. La boîte de dialogue comprend des champs d’entrée pour le prénom, le nom de famille, la classe, le sexe (avec une liste déroulante) et l’âge, et gère les états de chargement pendant la soumission.

Affectationstable.tsx déposer:

import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import type { AssignmentsTable } from "@/types"

export function AssignmentsTables({ assignments }: { assignments: AssignmentsTable[] }) {
  console.log("Assignments", assignments)

  return (
    <Table>
      <TableCaption>A list of recent assignments.</TableCaption>
      <TableHeader>
        <TableRow>
          <TableHead>Title</TableHead>
          <TableHead>Subject</TableHead>
          <TableHead>Class</TableHead>
          <TableHead>Teacher</TableHead>
          <TableHead>Due Date</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {assignments.map((assignment) => (
          <TableRow key={assignment.$id}>
            <TableCell>{assignment.title}</TableCell>
            <TableCell>{assignment.subject}</TableCell>
            <TableCell>{assignment.className}</TableCell>
            <TableCell>{assignment.teacher}</TableCell>
            <TableCell>{assignment.dueDate}</TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  )
}

Ce fichier définit un composant React, affectationStables, qui rend une table pour afficher une liste des affectations. Il faut un éventail d’affectations en tant qu’accessoires et cartes à travers eux pour remplir les lignes de table avec des détails tels que le titre, le sujet, la classe, le professeur et la date d’échéance. Le tableau comprend une légende et des en-têtes pour une meilleure lisibilité.

import type React from "react"

interface AuthLayoutProps {
    children: React.ReactNode
    title: string
    description?: string
}

export function AuthLayout({ children, title, description }: AuthLayoutProps) {
    return (
        <div className="min-h-screen grid lg:grid-cols-2">
            {}
            <div className="flex items-center justify-center p-8">
                <div className="mx-auto w-full max-w-sm space-y-6">
                    <div className="space-y-2 text-center">
                        <h1 className="text-3xl font-bold tracking-tight">{title}</h1>
                        {description && <p className="text-sm text-muted-foreground">{description}</p>}
                    </div>
                    {children}
                </div>
            </div>

            {}
            <div className="hidden lg:block relative bg-black">
                <div className="absolute inset-0 bg-[url('https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-xOOAKcDxPyvxlDygdNGtUvjEA6QHBO.png')] bg-cover bg-center opacity-50" />
                <div className="relative h-full flex items-center justify-center text-white p-12">
                    <div className="space-y-6 max-w-lg">
                        <h2 className="text-4xl font-bold">Keep Your Children's Success</h2>
                        <p className="text-lg text-gray-200">
                            Connect with teachers, track progress, and stay involved in your child's education journey.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    )
}

Ce fichier définit un composant React, Authlayout, qui fournit une mise en page pour les pages d’authentification. Il comprend un côté gauche pour les formulaires (avec un titre et une description facultative) et un côté droit avec une image d’arrière-plan et un texte de motivation. La disposition est réactive, cachant l’image sur des écrans plus petits.

import { Book, BarChart, MessageCircle } from "lucide-react"

const features = [
  {
    name: "Comprehensive Dashboard",
    description: "View student's overall academic performance, including average grades and progress over time.",
    icon: BarChart,
  },
  {
    name: "Easy Communication",
    description: "Direct messaging system between school administrators and teachers for quick and efficient communication.",
    icon: MessageCircle,
  },
  {
    name: "Academic Tracking",
    description:
      "Monitor assignments, upcoming tests, and project deadlines to help your students stay on top of their studies.",
    icon: Book,
  },
]

export function Features() {
  return (
    <div className="py-12 bg-white" id="features">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="lg:text-center">
          <h2 className="text-base text-primary font-semibold tracking-wide uppercase">Features</h2>
          <p className="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
            Everything you need to stay connected
          </p>
          <p className="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
            Our platform offers a range of features designed to enhance communication between school administrators and teachers.
          </p>
        </div>

        <div className="mt-10">
          <dl className="space-y-10 md:space-y-0 md:grid md:grid-cols-3 md:gap-x-8 md:gap-y-10">
            {features.map((feature) => (
              <div key={feature.name} className="relative">
                <dt>
                  <div className="absolute flex items-center justify-center h-12 w-12 rounded-md bg-primary text-white">
                    <feature.icon className="h-6 w-6" aria-hidden="true" />
                  </div>
                  <p className="ml-16 text-lg leading-6 font-medium text-gray-900">{feature.name}</p>
                </dt>
                <dd className="mt-2 ml-16 text-base text-gray-500">{feature.description}</dd>
              </div>
            ))}
          </dl>
        </div>
      </div>
    </div>
  )
}

Ce fichier définit un composant React, fonctionnalités, qui présente les fonctionnalités de plate-forme clés dans une disposition visuellement attrayante. Il comprend un titre, une description et une grille de cartes de fonctionnalités, chacune avec une icône, un nom et une description détaillée. Le composant est conçu pour mettre en évidence les capacités de la plate-forme pour les administrateurs scolaires et les enseignants.

Ce fichier définit un composant React, Footer, qui affiche un pied de page simple avec des icônes de médias sociaux (Facebook et Twitter) et un avis de droit d’auteur. Le pied de page est centré et réactif, avec des liens sociaux à droite et le texte du droit d’auteur à gauche pour les écrans plus grands.

Ce fichier définit un composant React, Hero, qui crée une section de héros visuellement engageante pour un site Web. Il comprend un titre audacieux, un paragraphe descriptif et deux boutons d’appel à l’action («démarrer» et «en savoir plus»). La disposition présente un design réactif avec une forme d’arrière-plan et une image sur le côté droit pour les écrans plus grands.

Ce fichier définit un composant React, MobileMenu, qui crée un menu de navigation mobile réactif. Il bascule la visibilité avec un bouton et comprend des liens vers les fonctionnalités, les sections de contact et de contact, ainsi que les boutons de connexion et d’inscription. Le menu est conçu avec un design propre et moderne et se ferme lorsque vous cliquez sur l’icône de fermeture.

Ce fichier définit un composant React, Navbar, qui crée une barre de navigation réactive avec des liens vers des fonctionnalités, des sections de contact et de contact. Il comprend des boutons de connexion et d’inscription pour les écrans plus grands et intègre un composant MobileMenu pour les écrans plus petits. Le Navbar est stylé avec une ombre et une disposition centrée.

NotAuthorizedDialog.tsx déposer:

Ce fichier définit un composant React, NotAuthorizedDialog, qui affiche une boîte de dialogue lorsqu’un utilisateur n’est pas autorisé à effectuer une action. Il comprend un titre et une description incitant l’utilisateur à contacter un administrateur, et sa visibilité est contrôlée via les accessoires ouverts et Open enquête.

Ce fichier définit un composant React, Studentstables, qui rend un tableau pour afficher une liste d’étudiants. Il faut un éventail d’élèves comme accessoires et cartes à travers eux pour remplir les lignes de table avec des détails tels que le prénom, le nom de famille, la classe, le sexe et l’âge. Le tableau comprend une légende et des en-têtes pour une meilleure lisibilité.

Reportez-vous au code GitHub pour le code respectif des composants mentionnés ci-dessus.

Gestion des États et types

Maintenant, pour la prochaine étape, nous créerons l’état et les types que nous utiliserons tout au long de l’application. Créer le magasin et tYPES dossiers dans la racine du dossier du projet.

À l’intérieur du dossier Store, créez les fichiers suivants et collez le code correspondant:

import { create } from "zustand"
import { persist } from "zustand/middleware"

interface User {
  $id: string
  firstName: string
  lastName: string
  email: string
}

interface AuthState {
  user: User | null
  setUser: (user: User | null) => void
  token: string | null;
  setToken: (token: string | null) => void;
  logout: () => void
}

export const useAuthStore = create<AuthState>()(
  persist(
    (set) => ({
      user: null,
      setUser: (user) => set({ user }),
      token: null,
      setToken: (token) => set({ token }),
      logout: () => set({ user: null }),
    }),
    {
      name: "auth-storage", // Persist state in localStorage
    }
  )
)

Ce fichier définit une boutique Zustand, UseAuthstore, pour gérer l’état d’authentification. Il comprend des états d’utilisateur et de jeton, ainsi que des méthodes pour définir l’utilisateur, définir le jeton et se déconnecter. L’État est persisté dans LocalStorage en utilisant le middleware persistant.

import { create } from "zustand";
import { persist } from "zustand/middleware";

interface Profile {
  firstName: string;
  lastName: string;
  email: string;
  role: string;
  userId: string;
  $id: string;
  $createdAt: string;
}

interface ProfileStore {
  profile: Profile | null;
  setProfile: (profile: Profile) => void;
  clearProfile: () => void;
}

export const useProfileStore = create<ProfileStore>()(
  persist(
    (set) => ({
      profile: null,
      setProfile: (profile) => set({ profile }),
      clearProfile: () => set({ profile: null }),
    }),
    {
      name: "profile-storage", 
    }
  )
);

Ce fichier définit une boutique Zustand, useProfiLestore, pour gérer les données de profil utilisateur. Il comprend un état de profil et des méthodes pour définir et effacer le profil. L’État est persisté dans LocalStorage en utilisant le middleware persistant.

Dans le dossier Types, créez le fichier suivant et collez le code suivant dans le index.ts déposer:

export interface Assignment {
  title: string;
  subject: string;
  className: string;
  teacher: string;
  dueDate: string;
  creatorEmail: string;
}

export interface AssignmentsTable extends Assignment {
  $id: string;
  }

export interface Student {
  firstName: string;
  lastName: string;
  gender: string;
  className: string;
  age: number;
  creatorEmail: string;
}

export interface StudentsTable extends Student {
  $id: string;
}

Ce fichier définit les interfaces TypeScript pour la mission, la mission, étudiant et étudiant. Il étend l’affectation de base et les interfaces étudiants avec des propriétés supplémentaires comme $ id pour les enregistrements de base de données, garantissant un typage cohérent à travers l’application.

Itinéraires

Maintenant, nous voyons comment les composants et le magasin que nous venons de créer sont utilisés dans l’application.

Remplacez le code dans le fichier app / page.tsx par le code ci-dessous:

import { Navbar } from "@/components/Navbar"
import { Hero } from "@/components/Hero"
import { Features } from "@/components/Features"
import { Footer } from "@/components/Footer"

export default function Home() {
  return (
    <div className="min-h-screen flex flex-col">
      <Navbar />
      <main className="flex-grow">
        <Hero />
        <Features />
      </main>
      <Footer />
    </div>
  )
}

Ce fichier définit le composant principal de la page d’accueil, qui structure la mise en page à l’aide des composants Navbar, Hero, Fonctionnals et Foote. Il assure une conception réactive avec une disposition flexible et une hauteur pleine page.

Créez les dossiers suivants dans le dossier de l’application et collez ce code dans leurs fichiers Page.TSX respectifs:

Créez un dossier d’inscription et collez ce code dans son fichier page.tsx:

"use client"

import { useState } from "react"
import Link from "next/link"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { AuthLayout } from "@/components/auth-layout"
import { useAuthStore } from "@/store/auth" 

export default function SignupPage() {
  const router = useRouter()
  const { setUser, setToken } = useAuthStore() 
  const [isLoading, setIsLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)

  async function onSubmit(e: React.FormEvent) {
    e.preventDefault();
    setIsLoading(true);
    setError(null);

    const formData = new FormData(e.currentTarget as HTMLFormElement);
    const userData = {
        name: `${formData.get("firstName")} ${formData.get("lastName")}`,
        email: formData.get("email"),
        password: formData.get("password"),
    };

    try {
        const response = await fetch("https://edtech-saas-backend.vercel.app/api/auth/signup", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify(userData),
        });

        const result = await response.json();

        if (!response.ok || !result.success) {
            throw new Error("Signup failed. Please try again.");
        }

        console.log("Signup successful:", result);

        
        const [firstName, ...lastNameParts] = result.user.name.split(" ");
        const lastName = lastNameParts.join(" ") || ""; 

        
        setUser({
            $id: result.user.$id,
            firstName,
            lastName,
            email: result.user.email,
        });
        setToken(result.token);
        console.log("User:", result.user);
        console.log("Token:", result.token)
        router.push("/role-selection");
    } catch (err) {
        const error = err as Error;
        setError(error.message || "An error occurred");
        console.error("Error:", error);
    } finally {
        setIsLoading(false);
    }
}

  return (
    <AuthLayout title="Create an account" description="Enter your details to get started">
      <form onSubmit={onSubmit} className="space-y-4">
        <div className="grid gap-4 grid-cols-2">
          <div className="space-y-2">
            <Label htmlFor="firstName">First name</Label>
            <Input name="firstName" id="firstName" placeholder="John" disabled={isLoading} required />
          </div>
          <div className="space-y-2">
            <Label htmlFor="lastName">Last name</Label>
            <Input name="lastName" id="lastName" placeholder="Doe" disabled={isLoading} required />
          </div>
        </div>
        <div className="space-y-2">
          <Label htmlFor="email">Email</Label>
          <Input name="email" id="email" placeholder="name@example.com" type="email" autoComplete="email" disabled={isLoading} required />
        </div>
        <div className="space-y-2">
          <Label htmlFor="password">Password</Label>
          <Input name="password" id="password" type="password" disabled={isLoading} required />
        </div>
        {error && <p className="text-red-500 text-sm">{error}</p>}
        <Button className="w-full" type="submit" disabled={isLoading}>
          {isLoading ? "Creating account..." : "Create account"}
        </Button>
      </form>
      <div className="text-center text-sm">
        <Link href="/login" className="underline underline-offset-4 hover:text-primary">
          Already have an account? Sign in
        </Link>
      </div>
    </AuthLayout>
  )
}

Ce fichier définit un composant de sociétés pour l’enregistrement des utilisateurs, le traitement de la soumission du formulaire avec validation et gestion des erreurs. Il utilise Zustand pour stocker les données des utilisateurs et un jeton lors de l’inscription réussie, puis redirige vers une page de sélection de rôles. Le formulaire comprend des champs pour le prénom, le nom de famille, le courrier électronique et le mot de passe, avec un lien vers la page de connexion pour les utilisateurs existants.

Créez un dossier de sélection de rôles et collez ce code dans son fichier page.tsx:

"use client"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { GraduationCap, Users } from "lucide-react"
import { useAuthStore } from "@/store/auth"
import { useProfileStore } from "@/store/profile"

const roles = [
  {
      id: "Admin",
      title: "Admin",
      description: "Manage teachers, classes, and more",
      icon: GraduationCap,
  },
  {
    id: "Teacher",
    title: "Teacher",
    description: "Access your class dashboard, manage grades, and communicate with students",
    icon: GraduationCap,
  },
  {
    id: "Student",
    title: "Student",
    description: "Monitor your progress and communicate with teachers",
    icon: Users,
  },
]

export default function RoleSelectionPage() {
  const { user, token } = useAuthStore()
  const { setProfile } = useProfileStore()
  console.log("User:", user);
  const router = useRouter()
  const [selectedRole, setSelectedRole] = useState<string | null>(null)
  console.log("Selected Role:", selectedRole);
  const [isLoading, setIsLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)

  async function onSubmit(e: React.FormEvent) {
    e.preventDefault()
    if (!selectedRole || !user) return
    setIsLoading(true)
    setError(null)

    const formattedRole =
      selectedRole.charAt(0).toUpperCase() + selectedRole.slice(1).toLowerCase(); 

    const payload = {
      firstName: user?.firstName,
      lastName: user?.lastName,
      email: user?.email,
      role: formattedRole,
      userId: user?.$id,
    }
    console.log("Payload", payload)

    try {
      const response = await fetch("https://edtech-saas-backend.vercel.app/api/profile", {
        method: "POST",
        headers: {
          "Authorization": `Bearer ${token}`,
          "Content-Type": "application/json"
        },
        body: JSON.stringify(payload),
      })

      const data = await response.json()
      if (!response.ok) {
        throw new Error(data.message || "Failed to create profile")
      }
      console.log("Profile Data", data)
      setProfile({
        firstName: data?.user?.firstName,
        lastName: data?.user?.lastName,
        email: data?.user?.email,
        role: data?.user?.role,
        userId: data?.user?.userId,
        $id: data?.user?.$id,
        $createdAt: data?.user?.$createdAt,
      })
      router.push("/dashboard")
    } catch (err) {
      const error = err as Error
      setError(error.message)
      console.error("Error:", error)
    } finally {
      setIsLoading(false)
    }
  }

  return (
      <div className="min-h-screen flex items-center justify-center bg-gray-50 p-4">
        <div className="max-w-md w-full space-y-8">
          <div className="text-center space-y-2">
            <h1 className="text-3xl font-bold">Select your role</h1>
            <p className="text-gray-500">Choose your role to access the appropriate dashboard</p>
          </div>
          {error && <p className="text-red-500 text-center">{error}</p>}
          <form onSubmit={onSubmit} className="space-y-4">
            <div className="grid gap-4">
              {roles.map((role) => {
                const Icon = role.icon
                return (
                    <Card
                    key={role.id}
                    className={`cursor-pointer transition-colors ${selectedRole === role.id ? "border-black" : ""}`}
                    onClick={() => setSelectedRole(role.title)}
                    >
                      <CardContent className="flex items-start gap-4 p-6">
                        <div className="rounded-full p-2 bg-gray-100">
                          <Icon className="h-6 w-6" />
                        </div>
                        <div className="space-y-1">
                          <h3 className="font-medium">{role.title}</h3>
                          <p className="text-sm text-gray-500">{role.description}</p>
                        </div>
                      </CardContent>
                    </Card>
                )
              })}
            </div>

            <Button className="w-full" type="submit" disabled={!selectedRole || isLoading}>
              {isLoading ? "Confirming..." : "Continue"}
            </Button>
          </form>
        </div>
      </div>
  )
}

Ce fichier définit un composant RolelelectionPage où les utilisateurs sélectionnent leur rôle (administrateur, enseignant ou étudiant) après s’être inscrit. Il gère la sélection des rôles, soumet les données pour créer un profil et redirige vers le tableau de bord lors du succès. L’interface utilisateur comprend des cartes pour chaque rôle, un bouton de confirmation et une gestion des erreurs.

Créez un dossier de connexion et collez ce code dans son fichier page.tsx:

"use client";

import { useState } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { AuthLayout } from "@/components/auth-layout";
import { useAuthStore } from "@/store/auth";
import { useProfileStore } from "@/store/profile";

export default function LoginPage() {
  const router = useRouter();
  const [isLoading, setIsLoading] = useState(false);
  const { setUser, setToken } = useAuthStore() 
  const [formData, setFormData] = useState({ email: "", password: "" });
  const [error, setError] = useState<string | null>(null)

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setFormData({ ...formData, [e.target.name]: e.target.value });
  };

  async function onSubmit(e: React.FormEvent) {
    e.preventDefault();
    setIsLoading(true);
    setError(null);
 
    console.log("FormData", formData);
 
    try {
      
      const authResponse = await fetch("https://edtech-saas-backend.vercel.app/api/auth/login", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(formData),
      });
 
      if (!authResponse.ok) throw new Error("Invalid credentials");
 
      const authData = await authResponse.json();
      console.log("Auth Result:", authData);
 
      const token = authData.token;
      setToken(token);
 
      setUser({
        $id: authData.session.$id,
        firstName: "",
        lastName: "",
        email: authData.session.providerUid,
      });
 
      
      const profileResponse = await fetch(`https://edtech-saas-backend.vercel.app/api/profile/${formData.email}`, {
        method: "GET",
        headers: {
          Authorization: `Bearer ${token}`,
          "Content-Type": "application/json",
        },
      });
 
      if (!profileResponse.ok) throw new Error("Failed to fetch user profile");
 
      const profileData = await profileResponse.json();
      console.log("Profile Data:", profileData);
 
      if (profileData.profile) {
        
        useProfileStore.getState().setProfile(profileData.profile);
        router.push("/dashboard");
      } else {
        router.push("/role-selection");
      }
    } catch (err) {
      const error = err as Error;
      setError(error.message || "An error occurred");
    } finally {
      setIsLoading(false);
    }
  }
 

  return (
    <AuthLayout title="Welcome back" description="Enter your credentials to access your account">
      <form onSubmit={onSubmit} className="space-y-4">
        <div className="space-y-2">
          <Label htmlFor="email">Email</Label>
          <Input
            id="email"
            name="email"
            placeholder="name@example.com"
            type="email"
            autoCapitalize="none"
            autoComplete="email"
            autoCorrect="off"
            disabled={isLoading}
            required
            onChange={handleChange}
          />
        </div>
        <div className="space-y-2">
          <Label htmlFor="password">Password</Label>
          <Input
            id="password"
            name="password"
            type="password"
            disabled={isLoading}
            required
            onChange={handleChange}
          />
        </div>
        {error && <p className="text-red-500 text-sm">{error}</p>}
        <Button className="w-full" type="submit" disabled={isLoading}>
          {isLoading ? "Signing in..." : "Sign in"}
        </Button>
      </form>
      <div className="text-center text-sm">
        <Link href="/signup" className="underline underline-offset-4 hover:text-primary">
          Don't have an account? Sign up
        </Link>
      </div>
    </AuthLayout>
  );
}

Ce fichier définit un composant LoginPage pour l’authentification des utilisateurs, gérer la soumission du formulaire avec e-mail et mot de passe. Il utilise Zustand pour stocker les données de l’utilisateur et un jeton, récupère le profil de l’utilisateur et redirige vers la page de sélection de tableau de bord ou de rôle en fonction de l’état du profil. Le formulaire comprend la gestion des erreurs et un lien vers la page d’inscription pour les nouveaux utilisateurs.

Créez un dossier de tableau de bord et collez ce code dans son fichier page.tsx:

"use client";

import { useState, useEffect } from "react";
import { StudentsTables } from "@/components/StudentsTable";
import { Button } from "@/components/ui/button";
import { NotAuthorizedDialog } from "@/components/NotAuthorizedDialog";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { useAuthStore } from "@/store/auth";
import { useProfileStore } from "@/store/profile";
import { AddStudentDialog } from "@/components/AddStudentDialog";
import { AddAssignmentDialog } from "@/components/AddAssignmentDialog";
import {Assignment,  AssignmentsTable, Student, StudentsTable } from "@/types";
import { AssignmentsTables } from "@/components/AssignmentsTable";
import axios from "axios";

export default function TeacherDashboard() {
  const { token, logout } = useAuthStore();
  const { profile, clearProfile } = useProfileStore();
  const [isNotAuthorizedDialogOpen, setIsNotAuthorizedDialogOpen] = useState(false);
  const [isAddStudentDialogOpen, setIsAddStudentDialogOpen] = useState(false);
  const [isAddAssignmentDialogOpen, setIsAddAssignmentDialogOpen] = useState(false);
  const [students, setStudents] = useState<StudentsTable[]>([]);
  const [assignments, setAssignments] = useState<AssignmentsTable[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");
 

  const API_URL_STUDENTS = "https://edtech-saas-backend.vercel.app/api/students";
  const API_URL_ASSIGNMENTS = "https://edtech-saas-backend.vercel.app/api/assignments/create";

 

  async function fetchData() {
    setLoading(true);
    setError("");
 
    const headers = {
      "Content-Type": "application/json",
      Authorization: `Bearer ${token}`,
    };
 
    const email = profile?.email;
    if (!email) {
      setError("Email is required");
      return;
    }
 
    
    const studentsUrl = `https://edtech-saas-backend.vercel.app/api/students/${email}`;
    const assignmentsUrl = `https://edtech-saas-backend.vercel.app/api/assignments/${email}`;
 
    
    try {
      const studentsRes = await axios.get(studentsUrl, { headers });
      console.log("Students Data:", studentsRes.data);
      setStudents(studentsRes.data);
    } catch (err) {
      console.warn("Failed to fetch students data:", err);
      setStudents([]); 
    }
 
    
    try {
      const assignmentsRes = await axios.get(assignmentsUrl, { headers });
      console.log("Assignments Data:", assignmentsRes.data);
      setAssignments(assignmentsRes.data);
    } catch (err) {
      console.error("Error fetching assignments data:", err);
      setError((err as Error).message);
    } finally {
      setLoading(false);
    }
  }
 
 
 
  useEffect(() => {
    if (!token) return;

    fetchData();
  }, [token]);

    const handleAddStudent = async (data: Omit<Student, 'creatorEmail'>) => {
    setLoading(true);
    setError("");
 
    const payload = {
      firstName: data.firstName,
      lastName: data.lastName,
      gender: data.gender,
      className: data.className,
      age: data.age,
      creatorEmail: profile?.email,
    };
    console.log("Students payload:", payload);
 
    try {
      const response = await fetch(API_URL_STUDENTS, {
        method: "POST",
        headers: {
          Authorization: `Bearer ${token}`,
          "Content-Type": "application/json",
        },
        body: JSON.stringify(payload),
      });
 
      const result = await response.json(); 
      console.log("Student Result", result);
 
      if (response.status === 403 && result.message === "Not authorized") {
        setIsAddStudentDialogOpen(false);
        setIsNotAuthorizedDialogOpen(true);
        return; 
      }
 
      if (!response.ok) throw new Error(result.message || "Failed to add student");
 
      setStudents((prevStudents: Student[]) => [...prevStudents, result]); 
      setIsAddStudentDialogOpen(false);
      await fetchData();
    } catch (err) {
      if ((err as Error & { code?: number }).code === 403 && (err as Error).message === "Not authorized") {
        setIsAddStudentDialogOpen(false);
        setIsNotAuthorizedDialogOpen(true);
        return;
      }
      setError((err as Error).message);
      console.error("Error:", err);
    } finally {
      setLoading(false);
    }
  };
 

    const handleAddAssignment = async (data: Assignment) => {
    setLoading(true);
    setError("");
 
    const payload = {
      title: data.title,
      subject: data.subject,
      className: data.className,
      teacher: data.teacher,
      dueDate: data.dueDate,
      creatorEmail: profile?.email,
    };
 
    try {
      const response = await fetch(API_URL_ASSIGNMENTS, {
        method: "POST",
        headers: {
          Authorization: `Bearer ${token}`,
          "Content-Type": "application/json",
        },
        body: JSON.stringify(payload),
      });
 
      const result = await response.json(); 
 
      if (response.status === 403 && result.message === "Not authorized") {
        setIsAddAssignmentDialogOpen(false);
        setIsNotAuthorizedDialogOpen(true);
        return; 
      }
 
      if (!response.ok) throw new Error(result.message || "Failed to add assignment");
 
      setAssignments((prevAssignments: Assignment[]) => [...prevAssignments, result]); 
      setIsAddAssignmentDialogOpen(false);
    } catch (err) {
      if ((err as Error & { code?: number }).code === 403 && (err as Error).message === "Not authorized") {
        setIsAddAssignmentDialogOpen(false);
        setIsNotAuthorizedDialogOpen(true);
        return;
      }
      setError((err as Error).message);
      console.error("Error:", err);
    } finally {
      setLoading(false);
    }
  };

  const handleLogout = () => {
    clearProfile();
    logout();
    window.location.href = "/login";
  };

  return (
    <div className="container mx-auto p-4">
      <div className="flex items-center justify-between mb-4">
        <div>
          <h1 className="text-2xl font-bold mb-2">Welcome {profile?.firstName}</h1>
          <p className="text-gray-600 mb-6">
            You are logged in as {profile?.role === "Admin" ? "an" : "a"} {profile?.role}.
          </p>
        </div>
        <Button variant="default" onClick={handleLogout}>Log out</Button>
      </div>

      {profile?.role === 'Student'
      ?  (
        <div>
          <AssignmentsTables assignments={assignments} />
        </div>
        )
        : (
          <Tabs defaultValue="students" className="w-full">
            <TabsList className="grid w-full grid-cols-2">
              <TabsTrigger value="students">Students</TabsTrigger>
              <TabsTrigger value="assignments">Assignments</TabsTrigger>
            </TabsList>

            <TabsContent value="students">
              <StudentsTables students={students} />
              <Button onClick={() => setIsAddStudentDialogOpen(true)}>Add a Student</Button>
            </TabsContent>

            <TabsContent value="assignments">
              <AssignmentsTables assignments={assignments} />
              <Button onClick={() => setIsAddAssignmentDialogOpen(true)}>Add Assignment</Button>
            </TabsContent>
          </Tabs>
        )}

      {error && <p className="text-red-500 mt-4">{error}</p>}

      <NotAuthorizedDialog open={isNotAuthorizedDialogOpen} onOpenChange={setIsNotAuthorizedDialogOpen} />
      <AddStudentDialog creatorEmail={profile?.email || ""} loading={loading} open={isAddStudentDialogOpen} onOpenChange={setIsAddStudentDialogOpen} onAddStudent={handleAddStudent} />
      <AddAssignmentDialog creatorEmail={profile?.email || ""} open={isAddAssignmentDialogOpen} onOpenChange={setIsAddAssignmentDialogOpen} onAddAssignment={handleAddAssignment} />
    </div>
  );
}

Ce fichier définit un composant TeacherDashboard qui affiche un tableau de bord pour les enseignants ou les administrateurs, leur permettant de gérer les élèves et les devoirs. Il comprend des onglets pour basculer entre les étudiants et les missions, les boutons pour ajouter de nouvelles entrées et gère les erreurs d’autorisation. Le composant récupère et affiche des données en fonction du rôle de l’utilisateur, avec une option de déconnexion et une gestion des erreurs.

Après avoir créé tous les fichiers et composants ci-dessus et les avoir utilisés comme je vous l’ai montré, votre application devrait fonctionner lorsque vous exécutez cette commande ci-dessous:

L’application sera disponible sur http: // localhost: 3000 /.

Testez la demande maintenant en créant une école, en vous inscrivant et en vous connectant en tant qu’administrateur, enseignant ou étudiant, et en effectuant certaines actions.

Construire une application Multi-locataire EdTech SaaS avec Next.js, AppWrite et Permis a fourni plusieurs informations sur l’autorisation, la sécurité et l’évolutivité. Voici les principaux points à retenir:

Le contrôle d’accès simplifié basé sur les rôles (RBAC): avec permis, définissant et appliquant les rôles administratifs, enseignants et étudiants était simple. Au lieu de coder en dur, je pouvais les gérer dynamiquement via l’interface utilisateur du permis.
Les politiques conscientes des locataires de permis ont assuré que les écoles (locataires) sont restées isolées les unes des autres. Cela était important pour la sécurité des données dans une application SaaS multi-locataire.
Au lieu d’écrire et de gérer la logique d’autorisation personnalisée dans des dizaines de routes API, permettez le contrôle d’accès géré de manière centralisée pour réduire la complexité et faciliter les mises à jour futures.
Étant donné que tous les contrôles d’autorisation ont été appliqués au backend, le frontend n’a affiché que des éléments d’interface utilisateur en fonction des autorisations, assurant une expérience utilisateur fluide.
La mise en œuvre de l’authentification personnalisée à partir de zéro aurait pu prendre des semaines. Mais en utilisant AppWrite pour l’authentification et le permis pour l’autorisation, j’ai pu me concentrer sur la création de fonctionnalités de base au lieu de réinventer le contrôle d’accès.

Conclusion

Le permis d’intégration avec next.js & appwrite m’a permis de simplifier l’autorisation dans mon application EDTech multi-locataire. En déchargeant la logique d’autorisation complexe à permettre, j’ai pu me concentrer sur les fonctionnalités de la construction, ne pas gérer le contrôle d’accès manuellement.

Si vous construisez une application SaaS avec des autorisations et plusieurs tenues complexes, le permis est un excellent outil à utiliser pour rationaliser votre flux de travail.

Accéder au dépôt github du projet fini pour le backend ici et le frontend ici.

Source link

Blog ARC Optimizer

avril 10, 2025

Comment construire une application SaaS multi-locataire avec Next.js (Frontend Integration) –

Intégration frontale: mise en œuvre de l’autorisation dans Next.js

1. Configuration des appels API avec autorisation

2. Initialiser Shadcn

3. Installez les packages nécessaires

4. Fichiers de composants

Gestion des États et types

Itinéraires

Conclusion

Articles similaires

Blog ARC Optimizer

Intégration frontale: mise en œuvre de l’autorisation dans Next.js

1. Configuration des appels API avec autorisation

2. Initialiser Shadcn

3. Installez les packages nécessaires

4. Fichiers de composants

Gestion des États et types

Itinéraires

Conclusion

Partager :

Articles similaires