Application d'authentification Next.js

Ceci est une application Next.js qui implémente l'authentification à l'aide de NextAuth.js. L'application propose des routes protégées qui nécessitent que les utilisateurs soient authentifiés pour accéder à certaines pages.

Structure du projet

nextjs-auth-app
├── components
│   ├── Layout.js          # Composant de mise en page pour une structure cohérente
│   ├── Navbar.js          # Composant de barre de navigation
│   └── ProtectedRoute.js   # Composant pour protéger les routes
├── pages
│   ├── _app.js            # Composant App personnalisé
│   ├── _document.js       # Structure Document personnalisé
│   ├── api
│   │   └── auth
│   │       └── [...nextauth].js # Configuration NextAuth.js
│   ├── dashboard.js       # Page Dashboard protégée
│   ├── index.js           # Page d'accueil
│   ├── login.js           # Page de connexion
│   └── profile.js         # Page de profil utilisateur
├── public                 # Ressources statiques
├── styles
│   ├── Home.module.css    # Module CSS pour le composant Home
│   └── globals.css        # Styles CSS globaux
├── utils
│   └── auth.js            # Fonctions utilitaires pour l'authentification
├── .env.local             # Variables d'environnement
├── next.config.js         # Configuration Next.js
├── package.json           # Configuration npm
└── README.md              # Documentation du projet

Pour commencer

Pour démarrer avec ce projet, suivez ces étapes :

1. Cloner le dépôt :

   root@kitploit:~

   git clone <url-du-dépôt>
   cd nextjs-auth-app
   

2. Installer les dépendances :

   root@kitploit:~

   npm install
   

3. Configurer les variables d'environnement : Créez un fichier .env.local dans le répertoire racine et ajoutez vos variables d'environnement, telles que les clés API et les secrets.

4. Lancer le serveur de développement :

   root@kitploit:~

   npm run dev
   

5. Ouvrir votre navigateur : Rendez-vous sur http://localhost:3000 pour visualiser l'application.

Fonctionnalités

• Authentification : Les utilisateurs peuvent se connecter et accéder aux routes protégées.
• Routes protégées : Le composant ProtectedRoute garantit que seuls les utilisateurs authentifiés peuvent accéder à certaines pages comme le Dashboard et le Profil.
• Design responsive : L'application est conçue pour être réactive et conviviale.

Contribution

Si vous souhaitez contribuer à ce projet, veuillez forker le dépôt et soumettre une pull request avec vos modifications.

Licence

Ce projet est sous licence MIT. Voir le fichier LICENSE pour plus de détails.