Autenticación de usuarios con Clerk

¿Qué es la autenticación?

La autenticación en programación se refiere al proceso de verificar la identidad de un usuario o sistema para permitir el acceso a recursos o funcionalidades. Es esencial para garantizar la seguridad y la privacidad en aplicaciones y sistemas. Normalmente, implica el uso de credenciales como contraseñas, huellas dactilares o tokens, que son verificados por el sistema para conceder el acceso adecuado. Existen diversos métodos de autenticación, como la autenticación de un solo factor (contraseña), la autenticación de dos factores (2FA) que agrega una capa adicional de seguridad, y la autenticación mediante terceros (como OAuth). Una sólida implementación de autenticación es crucial para prevenir el acceso no autorizado y proteger la integridad de los sistemas informáticos.

¿Cómo configurar autenticación con Clerk?

Para permitir a los usuarios identificarse vamos a utilizar el Clerk, esta herramienta se integra de manera muy sencilla con nuestro proyecto y permite a los usuarios utilizar diferentes formas de identificarse en nuestro sitio web.

1. Vamos al Sitio Oficial de Clerk.

2. Creamos una cuenta si no la tenemos, podemos usar github para ello.

3. Da click en Add Application (Agregar Aplicación) y elige un nombre.

4. Elige Discord como método de identificación.

   Se generarán las credenciales para hacer uso de Clerk dentro de nuestro proyecto.

   NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=****
   CLERK_SECRET_KEY=****
   

   Copia y pega las credenciales dentro de tu archivo .env así como dentro de vercel dentro del area de variables de entorno Settings > Environment Variables.

5. Instalamos Clerk como libreria de node.

   pnpm add @clerk/nextjs
   

6. Agregamos el provider dentro del archivo src/pages/_app.tsx de manera que este provea del estado de identificación a todos los componentes del proyecto.

   // src/pages/_app.tsx
   import { ClerkProvider } from '@clerk/nextjs'
   import { type AppType } from 'next/app'
   import '~/styles/globals.css'
   import { api } from '~/utils/api'
   
   const MyApp: AppType = ({ Component, pageProps }) => {
       return (
           <ClerkProvider {...pageProps}>
               <Component {...pageProps} />
           </ClerkProvider>
       )
   }
   
   export default api.withTRPC(MyApp)
   

7. Agrega el middleware para la funcionalidad del lado del servidor.

   import { authMiddleware } from '@clerk/nextjs'
   
   export default authMiddleware({
       // permitir que el home sea publico
       publicRoutes: ['/'],
   })
   
   export const config = {
       matcher: ['/((?!.*\\..*|_next).*)', '/', '/(api|trpc)(.*)'],
   }
   

   En este punto si abrimos la aplicación, nos enviará a la autenticación de Clerk.

8. Agregamos los botones de autenticación en el home.

   <main className="flex min-h-screen flex-col items-center justify-center bg-gradient-to-b from-[#2e026d] to-[#15162c]">
       <p className="text-2xl text-white">
           {user.isSignedIn ? <SignOutButton /> : <SignIn />}
       </p>
   </main>
   

9. Entramos a localhost:3000 y vamos a ver el formulario de autenticación de Clerk y la opción sign-in sign-out disponible.

En esta lección pudimos habilitar la autenticación de usuario utilizando Clerk y la librería @clerk/nextjs que permite integrar este sistema de autenticación directamente en Nextjs. Clerk permite usar una amplia gama de medios de autenticación de manera sencilla y proveer de funciones y componentes directamente a trpc y React.