Merge pull request #4 from aulasoftwarelibre/auth-chapter

Auth chapter

docs/security-next-auth.md

@@ -0,0 +1,130 @@
+
+NextAuth.js es una librería de autenticación que se integra fácilmente con aplicaciones web basadas en Next.js. Esta potente librería simplifica la implementación de la autenticación de usuarios, incluyendo la autenticación social y el manejo de sesiones. Con NextAuth.js, puedes configurar la autenticación de manera eficiente y segura, permitiendo a los usuarios acceder a tus aplicaciones de forma sencilla a través de múltiples proveedores, como Google, Facebook, GitHub y más.
+
+## Instalación
+
+Lo primero es instalar el paquete, como siempre:
+
+```bash
+npm install next-auth
+```
+
+Y a continuación creamos el fichero de configuración:
+
+```ts title="src/app/api/auth/[...nextauth]/route.ts"
+import NextAuth, { NextAuthOptions } from 'next-auth'
+import GithubProvider from 'next-auth/providers/github'
+
+export const config: NextAuthOptions = {
+  providers: [
+    clientId: process.env.GITHUB_ID || '',
+    clientSecret: process.env.GITHUB_SECRET || '',
+],
+  secret: process.env.NEXTAUTH_SECRET,
+}
+
+const handler = NextAuth(config)
+
+export { handler as GET, handler as POST }
+```
+
+Y activamos el middleware que se encarga de garantizar que todas las llamadas a Next
+son seguras:
+
+```ts title="src/middleware.ts"
+export { default } from 'next-auth/middleware'
+
+export const config = { matcher: ['/counter'] }
+```
+
+!!! info
+    Por defecto el middleware asegura todas los accesos. Con `matcher` podemos restringir
+    qué rutas queremos proteger. Para este ejemplo solo vamos a asegurar nuestro contador.
+
+    Mira la documentación de [middleware en next](https://nextjs.org/docs/app/building-your-application/routing/middleware) para saber como funciona `matcher`.
+
+
+En este fichero registraremos que proveedores de identidad queremos usar, en el
+ejemplo usaremos GitHub, pero podemos usar muchísimos mas (Google, Spotify, Twitter,...).
+
+Ahora necesitamos poder leer la sesión del usuario cuando esta logueado. NextAuth
+nos da una función, pero como requiere pasarle un parámetro vamos a crear una propia
+que nos ahorre trabajo cada vez que la queremos usar:
+
+```ts title="src/lib/next/auth.ts"
+import type {
+  GetServerSidePropsContext,
+  NextApiRequest,
+  NextApiResponse,
+} from 'next'
+import { getServerSession } from 'next-auth'
+
+import { config } from '@/app/api/auth/[...nextauth]/route'
+
+export function auth(
+  ...args:
+    | [GetServerSidePropsContext['req'], GetServerSidePropsContext['res']]
+    | [NextApiRequest, NextApiResponse]
+    | []
+) {
+  return getServerSession(...args, config)
+}
+```
+
+## Registro de nuestra aplicación en Github
+
+Para que podamos hacer login usando Github, necesitamos registrar una aplicación
+OAuth. Para ello nos iremos a la web de registro de aplicaciones OAuth:
+[https://github.com/settings/applications/new](https://github.com/settings/applications/new)
+
+Necesitamos tres datos:
+
+* **Application name**: El que queramos, por ejemplo: `Curso de NextJS del Aula de Software Libre`
+* **Homepage URL**: Esta sería la url de nuestra web si estuviera publicada, por ahora usaremos: `http://localhost:3000/`
+* **Authorization callback URL**: Esta es la url de NextAuth que finalizará el proceso de autenticación, debemos poner: `http://localhost:3000/api/auth/callback/github`
+
+![Registro de aplicación OAuth en Github](images/github-oauth-registry.png)
+
+
+Una vez eso ya tendremos el primero de los dos datos que necesitamos el `GITHUB_ID`, es la cadena hexadecimal que 
+aparece en la web de la aplicación. A continuación debemos pulsar a `Generate a new client secret` para
+conseguir el segundo dato necesario `GITHUB_SECRET`
+
+
+![Credenciales de aplicación OAuth en Github](images/github-oauth-credentials.png)
+
+Y por último vamos a crear un archivo de credenciales donde guardar esos datos:
+
+```env title=".env.local"
+GITHUB_ID=tu Client ID de la web de Github
+GITHUB_SECRET=tu Client Secret de la web de Github
+NEXTAUTH_URL=http://localhost:3000/api/auth
+NEXTAUTH_SECRET=CHANGE_ME
+```
+
+!!! info
+    Recuerda que las credenciales son secretas, nunca las subas a Github.
+    El fichero `.env.local` está en el `.gitignore` así que no tienes que preocuparte.
+
+## Acceso a la web asegurara
+
+Si intentamos acceder ahora a nuestro contador, veremos que nos saltará la página
+para loguearnos en Github. Solo si nos identificamos podremos verla.
+
+Para conseguir ver los datos del usuario es tan facil como hacer lo siguiente en cualquier 
+lugar donde lo necesitemos:
+
+```ts
+import { Session } from 'next-auth'
+
+import { auth } from '@/lib/next/auth'
+
+export default async function DashboardPage() {
+  const session: Session | null = await auth()
+
+  // Si la variable `session` no es null, podemos conseguir los siguientes datos.
+  if (session) {
+    const { user: { email, image, name } = {} } = session
+  }
+}
+```

docs/security.md

@@ -0,0 +1,11 @@
+La seguridad en aplicaciones web es esencial para proteger la información confidencial y garantizar la privacidad de los usuarios. Al trabajar con Next.js y React, es fundamental tener en cuenta aspectos clave de seguridad, como el manejo de cookies y tokens JWT.
+
+## Cookies
+
+Las cookies son pequeños archivos de texto que se almacenan en el navegador del usuario. En el contexto de aplicaciones web, las cookies se utilizan para almacenar información, como sesiones de usuario. En el caso de Next.js y React, las cookies pueden ser empleadas para gestionar la autenticación y la autorización de usuarios. Es importante asegurarse de que las cookies se utilicen de manera segura y se protejan contra ataques como la manipulación de cookies o el acceso no autorizado.
+
+## Tokens JWT (JSON Web Tokens)
+
+Los tokens JWT son una forma común de autenticación y autorización en aplicaciones web. Estos tokens son emitidos por un servidor de autenticación y contienen información codificada, como los roles del usuario o la fecha de expiración. En una aplicación Next.js y React, los tokens JWT se pueden utilizar para verificar la identidad de los usuarios y permitirles acceder a recursos protegidos. Es crucial implementar prácticas sólidas para la generación, gestión y validación de tokens JWT, además de asegurarse de que se transmitan de manera segura entre el cliente y el servidor.
+
+Mantener un enfoque en la seguridad de las aplicaciones es fundamental para garantizar la confidencialidad y la integridad de los datos. Tanto el uso de cookies como de tokens JWT son herramientas esenciales en la construcción de aplicaciones seguras con Next.js y React.

mkdocs.yml

@@ -115,15 +115,18 @@ markdown_extensions:
 # Page tree
 nav:
   - Inicio: index.md
-  - Introducción: new-project.md
-  - Dependencias: dependencies.md
-  - Creando el boilerplate: install.md
-  - Configurando NextUI: nextui.md
-  - Storybook: storybook.md
+  - Crear el proyecto base:
+    - Introducción: new-project.md
+    - Dependencias: dependencies.md
+    - Creando el boilerplate: install.md
+    - Configurando NextUI: nextui.md
+    - Storybook: storybook.md
   - Gestión del estado: 
-      - Componente contador: state.md
-      - Componentes con estado: state-internal.md
-      - Componentes sin estado: state-external.md
-      - Context API: state-context.md
-      - Uso de reducers: state-reducer.md
-
+    - Componente contador: state.md
+    - Componentes con estado: state-internal.md
+    - Componentes sin estado: state-external.md
+    - Context API: state-context.md
+    - Uso de reducers: state-reducer.md
+  - Seguridad:
+    - Introducción: security.md
+    - Instalar NextAuth: security-next-auth.md