مفاتيح المرور و WebAuthn مع Next.js 15: بناء مصادقة بدون كلمة مرور في 2026

npx create-next-app@latest passkeys-demo --typescript --tailwind --app --src-dir --use-npm
cd passkeys-demo

npm install @simplewebauthn/server @simplewebauthn/browser
npm install @prisma/client
npm install -D prisma @simplewebauthn/types

npx prisma init --datasource-provider postgresql

generator client {
  provider = "prisma-client-js"
}
 
datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}
 
model User {
  id          String       @id @default(cuid())
  email       String       @unique
  name        String?
  credentials Credential[]
  challenges  Challenge[]
  createdAt   DateTime     @default(now())
  updatedAt   DateTime     @updatedAt
}
 
model Credential {
  id                  String   @id @default(cuid())
  credentialId        String   @unique
  credentialPublicKey Bytes
  counter             BigInt   @default(0)
  credentialDeviceType String
  credentialBackedUp  Boolean  @default(false)
  transports          String[] @default([])
  userId              String
  user                User     @relation(fields: [userId], references: [id], onDelete: Cascade)
  createdAt           DateTime @default(now())
}
 
model Challenge {
  id        String   @id @default(cuid())
  challenge String
  userId    String?
  user      User?    @relation(fields: [userId], references: [id], onDelete: Cascade)
  expiresAt DateTime
  createdAt DateTime @default(now())
}

npx prisma migrate dev --name init

import { PrismaClient } from "@prisma/client";
 
const globalForPrisma = globalThis as unknown as {
  prisma: PrismaClient | undefined;
};
 
export const prisma = globalForPrisma.prisma ?? new PrismaClient();
 
if (process.env.NODE_ENV !== "production") {
  globalForPrisma.prisma = prisma;
}

import type {
  GenerateRegistrationOptionsOpts,
  GenerateAuthenticationOptionsOpts,
} from "@simplewebauthn/server";
 
// إعدادات الطرف المعتمد
export const rpName = "Passkeys Demo";
export const rpID = process.env.WEBAUTHN_RP_ID || "localhost";
export const origin =
  process.env.WEBAUTHN_ORIGIN || `http://localhost:3000`;
 
// مساعد للحصول على المصادر المتوقعة (يدعم عدة مصادر)
export function getExpectedOrigins(): string[] {
  const origins = [origin];
  if (process.env.WEBAUTHN_ADDITIONAL_ORIGINS) {
    origins.push(
      ...process.env.WEBAUTHN_ADDITIONAL_ORIGINS.split(",")
    );
  }
  return origins;
}

DATABASE_URL="postgresql://user:password@localhost:5432/passkeys_demo"
WEBAUTHN_RP_ID="localhost"
WEBAUTHN_ORIGIN="http://localhost:3000"

import { NextRequest, NextResponse } from "next/server";
import { generateRegistrationOptions } from "@simplewebauthn/server";
import { prisma } from "@/lib/prisma";
import { rpName, rpID } from "@/lib/webauthn";
 
export async function POST(request: NextRequest) {
  try {
    const { email, name } = await request.json();
 
    if (!email) {
      return NextResponse.json(
        { error: "البريد الإلكتروني مطلوب" },
        { status: 400 }
      );
    }
 
    // البحث عن المستخدم أو إنشائه
    let user = await prisma.user.findUnique({
      where: { email },
      include: { credentials: true },
    });
 
    if (!user) {
      user = await prisma.user.create({
        data: { email, name: name || email.split("@")[0] },
        include: { credentials: true },
      });
    }
 
    // الحصول على بيانات الاعتماد الموجودة لاستثنائها
    const excludeCredentials = user.credentials.map((cred) => ({
      id: cred.credentialId,
      type: "public-key" as const,
      transports: cred.transports as AuthenticatorTransport[],
    }));
 
    // توليد خيارات التسجيل
    const options = await generateRegistrationOptions({
      rpName,
      rpID,
      userName: user.email,
      userDisplayName: user.name || user.email,
      attestationType: "none",
      excludeCredentials,
      authenticatorSelection: {
        residentKey: "preferred",
        userVerification: "preferred",
        authenticatorAttachment: "platform",
      },
      supportedAlgorithmIDs: [-7, -257],
    });
 
    // تخزين التحدي مع تاريخ الانتهاء
    await prisma.challenge.create({
      data: {
        challenge: options.challenge,
        userId: user.id,
        expiresAt: new Date(Date.now() + 5 * 60 * 1000),
      },
    });
 
    return NextResponse.json({
      options,
      userId: user.id,
    });
  } catch (error) {
    console.error("خطأ في خيارات التسجيل:", error);
    return NextResponse.json(
      { error: "فشل في توليد خيارات التسجيل" },
      { status: 500 }
    );
  }
}

import { NextRequest, NextResponse } from "next/server";
import { verifyRegistrationResponse } from "@simplewebauthn/server";
import { prisma } from "@/lib/prisma";
import { rpID, getExpectedOrigins } from "@/lib/webauthn";
 
export async function POST(request: NextRequest) {
  try {
    const { credential, userId } = await request.json();
 
    // البحث عن التحدي المخزن
    const storedChallenge = await prisma.challenge.findFirst({
      where: {
        userId,
        expiresAt: { gt: new Date() },
      },
      orderBy: { createdAt: "desc" },
    });
 
    if (!storedChallenge) {
      return NextResponse.json(
        { error: "انتهت صلاحية التحدي أو لم يُعثر عليه" },
        { status: 400 }
      );
    }
 
    // التحقق من استجابة التسجيل
    const verification = await verifyRegistrationResponse({
      response: credential,
      expectedChallenge: storedChallenge.challenge,
      expectedOrigin: getExpectedOrigins(),
      expectedRPID: rpID,
      requireUserVerification: false,
    });
 
    if (!verification.verified || !verification.registrationInfo) {
      return NextResponse.json(
        { error: "فشل التحقق" },
        { status: 400 }
      );
    }
 
    const {
      credential: registrationCredential,
      credentialDeviceType,
      credentialBackedUp,
    } = verification.registrationInfo;
 
    // تخزين بيانات الاعتماد
    await prisma.credential.create({
      data: {
        credentialId: registrationCredential.id,
        credentialPublicKey: Buffer.from(
          registrationCredential.publicKey
        ),
        counter: registrationCredential.counter,
        credentialDeviceType,
        credentialBackedUp,
        transports: credential.response.transports || [],
        userId,
      },
    });
 
    // تنظيف التحدي المستخدم
    await prisma.challenge.delete({
      where: { id: storedChallenge.id },
    });
 
    return NextResponse.json({
      verified: true,
      credentialDeviceType,
      credentialBackedUp,
    });
  } catch (error) {
    console.error("خطأ في التحقق من التسجيل:", error);
    return NextResponse.json(
      { error: "فشل التحقق" },
      { status: 500 }
    );
  }
}

import { NextRequest, NextResponse } from "next/server";
import { generateAuthenticationOptions } from "@simplewebauthn/server";
import { prisma } from "@/lib/prisma";
import { rpID } from "@/lib/webauthn";
 
export async function POST(request: NextRequest) {
  try {
    const { email } = await request.json();
 
    let allowCredentials: {
      id: string;
      type: "public-key";
      transports?: AuthenticatorTransport[];
    }[] = [];
 
    if (email) {
      const user = await prisma.user.findUnique({
        where: { email },
        include: { credentials: true },
      });
 
      if (user) {
        allowCredentials = user.credentials.map((cred) => ({
          id: cred.credentialId,
          type: "public-key" as const,
          transports: cred.transports as AuthenticatorTransport[],
        }));
      }
    }
 
    const options = await generateAuthenticationOptions({
      rpID,
      userVerification: "preferred",
      allowCredentials:
        allowCredentials.length > 0 ? allowCredentials : undefined,
    });
 
    const user = email
      ? await prisma.user.findUnique({ where: { email } })
      : null;
 
    await prisma.challenge.create({
      data: {
        challenge: options.challenge,
        userId: user?.id || null,
        expiresAt: new Date(Date.now() + 5 * 60 * 1000),
      },
    });
 
    return NextResponse.json({ options });
  } catch (error) {
    console.error("خطأ في خيارات المصادقة:", error);
    return NextResponse.json(
      { error: "فشل في توليد خيارات المصادقة" },
      { status: 500 }
    );
  }
}

import { NextRequest, NextResponse } from "next/server";
import { verifyAuthenticationResponse } from "@simplewebauthn/server";
import { prisma } from "@/lib/prisma";
import { rpID, getExpectedOrigins } from "@/lib/webauthn";
import { cookies } from "next/headers";
 
export async function POST(request: NextRequest) {
  try {
    const { credential } = await request.json();
 
    // البحث عن بيانات الاعتماد في قاعدة البيانات
    const storedCredential = await prisma.credential.findUnique({
      where: { credentialId: credential.id },
      include: { user: true },
    });
 
    if (!storedCredential) {
      return NextResponse.json(
        { error: "لم يُعثر على بيانات الاعتماد" },
        { status: 400 }
      );
    }
 
    // البحث عن التحدي المخزن
    const storedChallenge = await prisma.challenge.findFirst({
      where: {
        expiresAt: { gt: new Date() },
        OR: [
          { userId: storedCredential.userId },
          { userId: null },
        ],
      },
      orderBy: { createdAt: "desc" },
    });
 
    if (!storedChallenge) {
      return NextResponse.json(
        { error: "انتهت صلاحية التحدي أو لم يُعثر عليه" },
        { status: 400 }
      );
    }
 
    // التحقق من استجابة المصادقة
    const verification = await verifyAuthenticationResponse({
      response: credential,
      expectedChallenge: storedChallenge.challenge,
      expectedOrigin: getExpectedOrigins(),
      expectedRPID: rpID,
      credential: {
        id: storedCredential.credentialId,
        publicKey: new Uint8Array(storedCredential.credentialPublicKey),
        counter: Number(storedCredential.counter),
        transports:
          storedCredential.transports as AuthenticatorTransport[],
      },
      requireUserVerification: false,
    });
 
    if (!verification.verified) {
      return NextResponse.json(
        { error: "فشلت المصادقة" },
        { status: 400 }
      );
    }
 
    // تحديث العداد (مهم للأمان)
    await prisma.credential.update({
      where: { id: storedCredential.id },
      data: {
        counter: verification.authenticationInfo.newCounter,
      },
    });
 
    // تنظيف التحدي
    await prisma.challenge.delete({
      where: { id: storedChallenge.id },
    });
 
    // إنشاء جلسة
    const cookieStore = await cookies();
    cookieStore.set("session", storedCredential.userId, {
      httpOnly: true,
      secure: process.env.NODE_ENV === "production",
      sameSite: "strict",
      maxAge: 60 * 60 * 24 * 7,
      path: "/",
    });
 
    return NextResponse.json({
      verified: true,
      user: {
        id: storedCredential.user.id,
        email: storedCredential.user.email,
        name: storedCredential.user.name,
      },
    });
  } catch (error) {
    console.error("خطأ في التحقق من المصادقة:", error);
    return NextResponse.json(
      { error: "فشلت المصادقة" },
      { status: 500 }
    );
  }
}

"use client";
 
import {
  startRegistration,
  startAuthentication,
  browserSupportsWebAuthn,
} from "@simplewebauthn/browser";
import { useState, useCallback } from "react";
 
interface UsePasskeyReturn {
  isSupported: boolean;
  isLoading: boolean;
  error: string | null;
  register: (email: string, name?: string) => Promise<boolean>;
  login: (email?: string) => Promise<boolean>;
}
 
export function usePasskey(): UsePasskeyReturn {
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const isSupported = browserSupportsWebAuthn();
 
  const register = useCallback(
    async (email: string, name?: string): Promise<boolean> => {
      setIsLoading(true);
      setError(null);
 
      try {
        // الخطوة 1: الحصول على خيارات التسجيل من الخادم
        const optionsRes = await fetch(
          "/api/auth/register/options",
          {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ email, name }),
          }
        );
 
        if (!optionsRes.ok) {
          throw new Error("فشل في الحصول على خيارات التسجيل");
        }
 
        const { options, userId } = await optionsRes.json();
 
        // الخطوة 2: إنشاء بيانات الاعتماد عبر API المتصفح
        const credential = await startRegistration({
          optionsJSON: options,
        });
 
        // الخطوة 3: التحقق مع الخادم
        const verifyRes = await fetch(
          "/api/auth/register/verify",
          {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ credential, userId }),
          }
        );
 
        if (!verifyRes.ok) {
          throw new Error("فشل التحقق من التسجيل");
        }
 
        const result = await verifyRes.json();
        return result.verified;
      } catch (err) {
        const message =
          err instanceof Error ? err.message : "فشل التسجيل";
        setError(message);
        return false;
      } finally {
        setIsLoading(false);
      }
    },
    []
  );
 
  const login = useCallback(
    async (email?: string): Promise<boolean> => {
      setIsLoading(true);
      setError(null);
 
      try {
        const optionsRes = await fetch("/api/auth/login/options", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ email }),
        });
 
        if (!optionsRes.ok) {
          throw new Error("فشل في الحصول على خيارات المصادقة");
        }
 
        const { options } = await optionsRes.json();
 
        const credential = await startAuthentication({
          optionsJSON: options,
        });
 
        const verifyRes = await fetch("/api/auth/login/verify", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ credential }),
        });
 
        if (!verifyRes.ok) {
          throw new Error("فشلت المصادقة");
        }
 
        const result = await verifyRes.json();
        return result.verified;
      } catch (err) {
        const message =
          err instanceof Error ? err.message : "فشل تسجيل الدخول";
        setError(message);
        return false;
      } finally {
        setIsLoading(false);
      }
    },
    []
  );
 
  return { isSupported, isLoading, error, register, login };
}

"use client";
 
import { useState } from "react";
import { usePasskey } from "@/hooks/use-passkey";
 
export function PasskeyRegister() {
  const { isSupported, isLoading, error, register } = usePasskey();
  const [email, setEmail] = useState("");
  const [name, setName] = useState("");
  const [success, setSuccess] = useState(false);
 
  if (!isSupported) {
    return (
      <div className="rounded-lg border border-yellow-200 bg-yellow-50 p-4">
        <p className="text-yellow-800">
          متصفحك لا يدعم مفاتيح المرور. يرجى استخدام متصفح حديث
          مثل Chrome أو Safari أو Firefox.
        </p>
      </div>
    );
  }
 
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    const result = await register(email, name);
    if (result) {
      setSuccess(true);
    }
  };
 
  if (success) {
    return (
      <div className="rounded-lg border border-green-200 bg-green-50 p-6 text-center">
        <h3 className="text-lg font-semibold text-green-800">
          تم إنشاء مفتاح المرور!
        </h3>
        <p className="mt-2 text-green-600">
          تم تسجيل مفتاح المرور الخاص بك. يمكنك الآن تسجيل الدخول
          باستخدام بصمة الإصبع أو الوجه أو رقم PIN الجهاز.
        </p>
      </div>
    );
  }
 
  return (
    <form onSubmit={handleSubmit} className="space-y-4">
      <div>
        <label
          htmlFor="email"
          className="block text-sm font-medium text-gray-700"
        >
          البريد الإلكتروني
        </label>
        <input
          id="email"
          type="email"
          required
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-indigo-500"
          placeholder="you@example.com"
        />
      </div>
 
      <div>
        <label
          htmlFor="name"
          className="block text-sm font-medium text-gray-700"
        >
          الاسم المعروض (اختياري)
        </label>
        <input
          id="name"
          type="text"
          value={name}
          onChange={(e) => setName(e.target.value)}
          className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-indigo-500"
          placeholder="أحمد محمد"
        />
      </div>
 
      {error && (
        <div className="rounded-md bg-red-50 p-3">
          <p className="text-sm text-red-700">{error}</p>
        </div>
      )}
 
      <button
        type="submit"
        disabled={isLoading}
        className="w-full rounded-md bg-indigo-600 px-4 py-2 text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 disabled:opacity-50"
      >
        {isLoading ? "جاري إنشاء مفتاح المرور..." : "إنشاء مفتاح المرور"}
      </button>
    </form>
  );
}

"use client";
 
import { useState } from "react";
import { usePasskey } from "@/hooks/use-passkey";
import { useRouter } from "next/navigation";
 
export function PasskeyLogin() {
  const { isSupported, isLoading, error, login } = usePasskey();
  const [email, setEmail] = useState("");
  const router = useRouter();
 
  if (!isSupported) {
    return (
      <div className="rounded-lg border border-yellow-200 bg-yellow-50 p-4">
        <p className="text-yellow-800">
          متصفحك لا يدعم مفاتيح المرور.
        </p>
      </div>
    );
  }
 
  const handleEmailLogin = async (e: React.FormEvent) => {
    e.preventDefault();
    const result = await login(email);
    if (result) {
      router.push("/dashboard");
    }
  };
 
  const handleQuickLogin = async () => {
    const result = await login();
    if (result) {
      router.push("/dashboard");
    }
  };
 
  return (
    <div className="space-y-6">
      <button
        onClick={handleQuickLogin}
        disabled={isLoading}
        className="w-full rounded-md bg-indigo-600 px-4 py-3 text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 disabled:opacity-50"
      >
        {isLoading ? (
          "جاري التحقق..."
        ) : (
          <span className="flex items-center justify-center gap-2">
            <svg
              className="h-5 w-5"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M12 11c0 3.517-1.009 6.799-2.753 9.571m-3.44-2.04l.054-.09A13.916 13.916 0 008 11a4 4 0 118 0c0 1.017-.07 2.019-.203 3m-2.118 6.844A21.88 21.88 0 0015.171 17m3.839 1.132c.645-2.266.99-4.659.99-7.132A8 8 0 008 4.07M3 15.364c.64-1.319 1-2.8 1-4.364 0-1.457.39-2.823 1.07-4"
              />
            </svg>
            تسجيل الدخول بمفتاح المرور
          </span>
        )}
      </button>
 
      <div className="relative">
        <div className="absolute inset-0 flex items-center">
          <div className="w-full border-t border-gray-300" />
        </div>
        <div className="relative flex justify-center text-sm">
          <span className="bg-white px-2 text-gray-500">
            أو أدخل بريدك الإلكتروني
          </span>
        </div>
      </div>
 
      <form onSubmit={handleEmailLogin} className="space-y-4">
        <input
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          className="block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-indigo-500"
          placeholder="you@example.com"
        />
        <button
          type="submit"
          disabled={isLoading || !email}
          className="w-full rounded-md border border-indigo-600 px-4 py-2 text-indigo-600 hover:bg-indigo-50 disabled:opacity-50"
        >
          المتابعة بالبريد الإلكتروني
        </button>
      </form>
 
      {error && (
        <div className="rounded-md bg-red-50 p-3">
          <p className="text-sm text-red-700">{error}</p>
        </div>
      )}
    </div>
  );
}

"use client";
 
import { useState } from "react";
import { PasskeyRegister } from "@/components/passkey-register";
import { PasskeyLogin } from "@/components/passkey-login";
 
export default function AuthPage() {
  const [mode, setMode] = useState<"login" | "register">("login");
 
  return (
    <div className="flex min-h-screen items-center justify-center bg-gray-50">
      <div className="w-full max-w-md space-y-8 rounded-xl bg-white p-8 shadow-lg">
        <div className="text-center">
          <h1 className="text-2xl font-bold text-gray-900">
            {mode === "login" ? "مرحباً بعودتك" : "إنشاء حساب"}
          </h1>
          <p className="mt-2 text-gray-600">
            {mode === "login"
              ? "سجّل الدخول بمفتاح المرور"
              : "سجّل مفتاح مرور جديد"}
          </p>
        </div>
 
        {mode === "login" ? <PasskeyLogin /> : <PasskeyRegister />}
 
        <div className="text-center">
          <button
            onClick={() =>
              setMode(mode === "login" ? "register" : "login")
            }
            className="text-sm text-indigo-600 hover:text-indigo-500"
          >
            {mode === "login"
              ? "تحتاج حساباً؟ سجّل الآن"
              : "لديك مفتاح مرور بالفعل؟ سجّل الدخول"}
          </button>
        </div>
      </div>
    </div>
  );
}

import { cookies } from "next/headers";
import { prisma } from "./prisma";
 
export async function getSession() {
  const cookieStore = await cookies();
  const sessionCookie = cookieStore.get("session");
 
  if (!sessionCookie?.value) {
    return null;
  }
 
  const user = await prisma.user.findUnique({
    where: { id: sessionCookie.value },
    select: {
      id: true,
      email: true,
      name: true,
      credentials: {
        select: {
          id: true,
          credentialDeviceType: true,
          credentialBackedUp: true,
          createdAt: true,
        },
      },
    },
  });
 
  return user;
}

import { NextRequest, NextResponse } from "next/server";
 
export function middleware(request: NextRequest) {
  const session = request.cookies.get("session");
 
  if (request.nextUrl.pathname.startsWith("/dashboard")) {
    if (!session?.value) {
      return NextResponse.redirect(new URL("/auth", request.url));
    }
  }
 
  if (request.nextUrl.pathname === "/auth") {
    if (session?.value) {
      return NextResponse.redirect(
        new URL("/dashboard", request.url)
      );
    }
  }
 
  return NextResponse.next();
}
 
export const config = {
  matcher: ["/dashboard/:path*", "/auth"],
};

"use client";
 
import { usePasskey } from "@/hooks/use-passkey";
import { useRouter } from "next/navigation";
 
export function PasskeyManager() {
  const { isLoading, error, register } = usePasskey();
  const router = useRouter();
 
  const handleAddPasskey = async () => {
    const res = await fetch("/api/auth/me");
    if (!res.ok) return;
    const { email } = await res.json();
    await register(email);
    router.refresh();
  };
 
  const handleSignOut = async () => {
    await fetch("/api/auth/logout", { method: "POST" });
    router.push("/auth");
  };
 
  return (
    <div className="mt-6 flex gap-3">
      <button
        onClick={handleAddPasskey}
        disabled={isLoading}
        className="rounded-md border border-indigo-600 px-4 py-2 text-indigo-600 hover:bg-indigo-50 disabled:opacity-50"
      >
        {isLoading ? "جاري الإضافة..." : "إضافة مفتاح مرور آخر"}
      </button>
      <button
        onClick={handleSignOut}
        className="rounded-md border border-red-300 px-4 py-2 text-red-600 hover:bg-red-50"
      >
        تسجيل الخروج
      </button>
      {error && <p className="text-sm text-red-600">{error}</p>}
    </div>
  );
}

"use client";
 
import {
  browserSupportsWebAuthn,
  platformAuthenticatorIsAvailable,
} from "@simplewebauthn/browser";
import { useEffect, useState } from "react";
 
interface WebAuthnStatus {
  webauthnSupported: boolean;
  platformSupported: boolean;
  checked: boolean;
}
 
export function useWebAuthnStatus(): WebAuthnStatus {
  const [status, setStatus] = useState<WebAuthnStatus>({
    webauthnSupported: false,
    platformSupported: false,
    checked: false,
  });
 
  useEffect(() => {
    async function check() {
      const webauthnSupported = browserSupportsWebAuthn();
      const platformSupported = webauthnSupported
        ? await platformAuthenticatorIsAvailable()
        : false;
      setStatus({
        webauthnSupported,
        platformSupported,
        checked: true,
      });
    }
    check();
  }, []);
 
  return status;
}

npx prisma migrate dev
npm run dev

npx localtunnel --port 3000