프리즈마, mongoDB, next-auth

npm install -D prisma npx prisma init

// This is your Prisma schema file, // learn more about it in the docs: https://pris.ly/d/prisma-schema generator client { provider = "prisma-client-js" } datasource db { provider = "mongodb" url = env("DATABASE_URL") }

npm install @prisma/client

import { PrismaClient } from '@prisma/client'; const client = global.prismadb || new PrismaClient(); if (process.env.NODE_ENV === 'production') global.prismadb = client; export default client;

import { PrismaClient } from '@prisma/client'; declare global { namespace globalThis { var prismadb: PrismaClient } }

# Environment variables declared in this file are automatically made available to Prisma. # See the documentation for more detail: https://pris.ly/d/prisma-schema#accessing-environment-variables-from-the-schema # Prisma supports the native connection string format for PostgreSQL, MySQL, SQLite, SQL Server, MongoDB and CockroachDB. # See the documentation for all the connection string options: https://pris.ly/d/connection-strings DATABASE_URL="mongodb+srv://emptyhead:<password>@cluster0.dtf65hx.mongodb.net/test"

// This is your Prisma schema file, // learn more about it in the docs: https://pris.ly/d/prisma-schema generator client { provider = "prisma-client-js" } datasource db { provider = "mongodb" url = env("DATABASE_URL") } model User { id String @id @default(auto()) @map("_id") @db.ObjectId namd String image String? email String? @unique emailVerified DateTime? hashedPassword String? createdAt DateTime @default(now()) updatedAt DateTime @updatedAt favoriteIds String[] @db.ObjectId sessions Session[] accounts Account[] } model Account { id String @id @default(auto()) @map("_id") @db.ObjectId userId String @db.ObjectId type String provider String providerAccountId String refresh_token String? @db.String access_token String? @db.String expires_at Int? token_type String? scope String? id_token String? @db.String session_state String? user User @relation(fields: [userId], references: [id], onDelete: Cascade) @@unique([provider, providerAccountId]) } model Session { id String @id @default(auto()) @map("_id") @db.ObjectId sessionToken String @unique userId String @db.ObjectId expires DateTime user User @relation(fields: [userId], references: [id], onDelete: Cascade) } model VerificationToken { id String @id @default(auto()) @map("_id") @db.ObjectId identifier String token String @unique expires DateTime @@unique([identifier, token]) } model Movie { id String @id @default(auto()) @map("_id") @db.ObjectId title String description String videoUrl String thumbnailUrl String genre String duration String }

npx prisma db push

npm install next-auth npm install bcrypt npm i -D @types/bcrypt

import Input from "@/components/Input"; import { useCallback, useState } from "react"; const Auth = () => { const [email, setEmail] = useState(''); const [name, setName] = useState(''); const [password, setPassword] = useState(''); const[variant, setVariant] = useState('login'); const toggleVariant = useCallback(() => { setVariant((currentVariant) => currentVariant === 'login' ? 'register' : 'login'); }, []); const register = useCallback(async() => { }, []); return ( <div className="relative h-full w-full bg-[url('/images/hero.jpg')] bg-no-repeat bg-center bg-fixed bg-cover"> <div className="bg-black w-full h-full lg:bg-opacity-50"> <nav className="px-12 py-5"> <img src="/images/logo.png" alt="Logo" className="h-12" /> </nav> <div className="flex justify-center"> <div className="bg-black bg-opacity-70 px-16 py-16 self-center mt-2 lg:w-2/5 lg:max-w-md rounded-md w-full"> <h2 className="text-white text-4xl mb-8 font-semibold"> {variant === 'login' ? 'Sign in' : 'Register'} </h2> <div className="flex flex-col gap-4"> {variant === 'register' && ( <Input label="Username" onChange={(ev: any) => setName(ev.target.value)} id="name" value={name} /> )} <Input label="Email" onChange={(ev: any) => setEmail(ev.target.value)} id="email" type="email" value={email} /> <Input label="Password" onChange={(ev: any) => setPassword(ev.target.value)} id="Password" type="Password" value={password} /> </div> <button className="bg-red-600 py-3 text-white rounded-md w-full mt-10 hover:bg-red-700 transition"> {variant === 'login' ? 'Login' : 'Sign up'} </button> <p className="text-neutral-500 mt-12"> {variant === 'login' ? 'First time using Netflix?' : 'Already have an account?'} <span onClick={toggleVariant} className="text-white ml-1 hover:underline cursor-pointer"> {variant === 'login' ? 'Create and account' : 'Login'} </span> </p> </div> </div> </div> </div> ) } export default Auth;

npm i axios