Aprende a crear una aplicación web que permita a tus usuarios autenticarse en tu aplicación a través de Clerk, un servicio que permite hacer Login y registro de usuarios a través de distintos métodos como correo, numero de Telefono, OAuth (Google, Twitter, Facebook, Apple, etc), integrándose de una forma muy sencilla, además de ofrecer un plan gratuito.
Crea un proyecto de Nextjs
npx create-next-app nextjs-clerk-tutorial
Escoge las siguientes opciones en nextjs:
√ Would you like to use TypeScript? ... No
√ Would you like to use ESLint? ... Yes
√ Would you like to use Tailwind CSS? ... Yes
√ Would you like to use `src/` directory? ... Yes
√ Would you like to use App Router? (recommended) ... Yes
√ Would you like to customize the default import alias? ... No / Yes
Instalación de Clerk
npm install @clerk/nextjs
Luego copia las variables de entorno que te da clerk en el archivo .env:
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_aG9uZXN0LWphY2thbC0yNS5jbGVyay5hY2NvdW50cy5kZXYj
CLERK_SECRET_KEY=sk_test_OM7hsysBHkME87LQZ0u4dZ4WxIKGmbqJa57Z3rzHz0
Luego añade un middleware:
import { authMiddleware } from "@clerk/nextjs";
// This example protects all routes including api/trpc routes
// Please edit this to allow other routes to be public as needed.
// See https://clerk.com/docs/nextjs/middleware for more information about configuring your middleware
export default authMiddleware({});
export const config = {
matcher: ["/((?!.*\\..*|_next).*)", "/", "/(api|trpc)(.*)"],
};