Este repositorio contiene el código fuente para un panel de administración desarrollado con React, Next.js, Vercel, Tailwind CSS, TypeScript, Auth0 y componentes de UI como Preline y React Icons. El panel de administración utiliza las siguientes APIs: jsonplaceholder y dicebear (biblioteca de avatares) para servir datos de usuarios que solo son visibles para usuarios autenticados.
Este ejemplo muestra cómo puedes usar @auth0/nextjs-auth para agregar fácilmente soporte de autenticación a tu aplicación Next.js aplicando los siguientes flujos de autenticación:
- Iniciar sesión
- Cerrar sesión
- Cargar el usuario en el lado del cliente y usar páginas SSR rápidas/caché (pages/index.tsx)
- Cargar el usuario en el lado del cliente y verificar la autenticación en páginas CSR (pages/profile.tsx)
- Crea controladores de ruta internos que realizan diferentes partes del flujo de autenticación (pages/auth/[...auth0].tsx)
Antes de ejecutar la aplicación en tu sistema local, asegúrate de tener instalados los siguientes requisitos:
- Node.js (versión 12 o superior) | nodejs.org
- npm (administrador de paquetes de Node.js) | npmjs.com
- Auth0 | auth0.com
- Vercel | vercel.com (opcional)
Sigue los siguientes pasos para instalar y ejecutar la aplicación:
- Clona este repositorio en tu máquina local:
git clone https://github.com/tu-usuario/admin-panel.git- Navega al directorio del repositorio clonado:
cd admin-panel- Instala las dependencias del proyecto:
npm install- Accede al panel de control de Auth0 y crea una nueva aplicación de tipo Single Page Application asegurándote de configurar lo siguiente:
- Ve a la página de configuración de la aplicación.
- Configura los siguientes ajustes:
- Allowed Callback URLs: Debe establecerse como http://localhost:3000/api/auth/callback cuando pruebes localmente o típicamente como https://myapp.com/api/auth/callback al implementar tu aplicación.
- Allowed Logout URLs: Debe establecerse como http://localhost:3000/ cuando pruebes localmente o típicamente como https://myapp.com/ al implementar tu aplicación.
- Guarda los ajustes.
-
Para conectar la aplicación con Auth0, necesitarás agregar los ajustes de tu aplicación de Auth0 como variables de entorno.
-
Copia el archivo .env.local.example de este directorio a .env.local (que será ignorado por Git):
cp .env.local.example .env.local- Luego, abre .env.local y agrega las variables de entorno faltantes::
NEXT_PUBLIC_API_URL=https://api.example.com
NEXT_PUBLIC_AUTH0_CLIENT_ID=your-auth0-client-id
NEXT_PUBLIC_AUTH0_DOMAIN=your-auth0-domain
AUTH0_ISSUER_BASE_URL=your-auth0-issuer-base-url
AUTH0_CLIENT_SECRET=your-auth0-client-secret
AUTH0_BASE_URL=your-auth0-base-url
AUTH0_SECRET=your-auth0-secretUna vez que hayas completado la instalación y configuración, puedes ejecutar la aplicación localmente con el siguiente comando:
npm run devEsto iniciará el servidor de desarrollo y podrás acceder a la aplicación en tu navegador en http://localhost:3000.
Puedes inplementar esta aplicación en la nube con Vercel siguiendo la documentación de Auth0 aquí. Que contempla todos los pasos necesarios para configurar tu aplicación en Vercel y Auth0.
Aquí: panel-admin-next-typescript-auth0.vercel.app
Aquí hay algunos enlaces útiles para obtener más información sobre las tecnologías utilizadas en este proyecto:
- Documentación de React aquí
- Documentación de Next.js aquí
- Documentación de Vercel aquí
- Documentación de Tailwind CSS aquí
- Documentación de Auth0 aquí
- Documentación de Preline aquí
- Documentación de React Icons aquí
Si deseas contribuir a este proyecto, puedes hacerlo siguiendo estos pasos:
- Haz un fork del proyecto.
- Crea una nueva rama (
git checkout -b feature/feature-name). - Haz commit de tus cambios (
git commit -m 'Add some feature'). - Haz push de la rama (
git push origin feature/feature-name). - Abre un pull request.
- Espera a que tu pull request sea revisado y aceptado.
- ¡Comienza a contribuir!
Este proyecto está bajo la Licencia MIT. Consulta el siguiente archivo para obtener más detalles: LICENCIA