feat: added register page,and its functionality; setup schema of neon db and prisma

Author: Harshit Yadav

.env

@@ -0,0 +1,11 @@
+
+
+# This was inserted by `prisma init`:
+# 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="postgresql://CodeMaster17:qc8Qn7kBDrGb@ep-falling-pine-75509530-pooler.us-east-2.aws.neon.tech/auth?sslmode=require&pgbouncer=true"
+DIRECT_URL="postgresql://CodeMaster17:qc8Qn7kBDrGb@ep-falling-pine-75509530.us-east-2.aws.neon.tech/auth?sslmode=require"

.gitignore

@@ -26,7 +26,6 @@ yarn-debug.log*
 yarn-error.log*
 
 # local env files
-.env*.local
 
 # vercel
 .vercel

README.md

@@ -1,36 +1,138 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+# NextJs V5 Authentication
 
-## Getting Started
+7. Create Register page UI
+8. Install prisma
+   `npm i -D prisma`
+9. install prisma client
+   `npm i @prisma/client`
+10. Go to `database.connection.ts` and add following code
 
-First, run the development server:
+```
+import { PrismaClient } from "@prisma/client";
+declare global {
+  var prisma: PrismaClient | undefined;
+}
+export const db = globalThis.prisma || new PrismaClient();
+
+if (process.env.NODE_ENV !== "production") globalThis.prisma = db
+
+```
+
+11. Run command
+    `npx prisma init`
+12. We used `Neon DB` as our database
+13. Got to `Neon DB ` to create a new database
+14. Paste connection string in `schema.prisma` and `.env` file
+15. Start creating schema in `schema.prisma` file
+16. With help of `db` in `database.connection.ts` file we can access our models
+17. Create `User` model in `schema.prisma` file
+18. Should also run following command to access `User` model in `database.connection.ts` file
+    `npx prisma generate`
+19. To psuh your schema to database
+    `npx prisma db push`
+
+20. Move to `Auth JS site`
+21. Select database adapter as `Prisma`
+22. Install `@auth/prisma-adapter`
+23. Comand to install `@auth/prisma-adapter`
+    `npm i @auth/prisma-adapter`
+24. Copy model `User` and paste in `schema.prisma` file
+25. Copy model `Account` and paste in `schema.prisma` file ( We are not using session model from `Auth JS site`)
+26. Push again to database
+    `npx prisma generate` and `npx prisma db push`
+27. Auth does not use `password` field in `User` model. So we need to add it to user model as optional because google aut h providers do not require password in `schema.prisma` file.
+28. Add the code below to validate fields in `register.ts`
+
+```
+"use server";
+
+import { RegisterSchema } from "@/schema";
+import * as z from "zod";
+
+export const register = async (values: z.infer<typeof RegisterSchema>) => {
+const validatedFields = RegisterSchema.safeParse(values); // safeParse returns a ZodResult object, and it is used to validate the input values
+if (!validatedFields.success) {
+ return { error: "Invalid fields!" };
+}
+return { success: "Email sent!" };
+};
+
+```
+
+29. Install `bcrypt` to hash password
+    `npm i bcrypt` and `npm i -D @types/bcrypt`
+30. Create register function
 
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
 ```
+export const register = async (values: z.infer<typeof RegisterSchema>) => {
+
+  // * check and store user in database
+
+  const validatedFields = RegisterSchema.safeParse(values); // safeParse returns a ZodResult object, and it is used to validate the input values
+  if (!validatedFields.success) {
+    return { error: "Invalid fields!" };
+  }
+
+  const { email, password, name } = validatedFields.data;
+  const hashedPassword = await bcrypt.hash(password, 10); // 10 is the number of salt rounds
+
+  //finding the email in database
+  const exisitingUser = await db.user.findUnique({
+    where: {
+      email,
+    },
+  });
+
+  // if user already exists, return error
+  if (exisitingUser) {
+    return { error: "Email already exists!" };
+  }
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+  // if not, create and save it in database
+  await db.user.create({
+    data: {
+      name,
+      email,
+      password: hashedPassword,
+    },
+  });
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+  // TODO: send verification email
 
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+  return { success: "Email sent!" };
+};
 
-## Learn More
+```
+
+31. Create user actions in `user.action.ts` file, to get user by email and id
 
-To learn more about Next.js, take a look at the following resources:
+```
+export const getUserByEmail = async (email: string) => {
+  try {
+    const user = await db.user.findUnique({ where: { email } });
+    return user;
+  } catch {
+    return null;
+  }
+};
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+export const getUserById = async (id: string) => {
+  try {
+    const user = await db.user.findUnique({ where: { id } });
+    return user;
+  } catch {
+    return null;
+  }
+};
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+```
 
-## Deploy on Vercel
+32. Use it in `register.ts` function
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+```
+ //finding the email in database
+  const exisitingUser = await getUserByEmail(email)
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+```
+33. Now, for `login` we have to install nextauth v5
+    `npm i next-auth@beta`

actions/auth/login.ts

@@ -0,0 +1,5 @@
+"use server"; // necessary in every auth action
+
+export const Login = (values: any) => {
+  console.log(values);
+};

actions/auth/register.ts

@@ -0,0 +1,41 @@
+"use server";
+
+import { RegisterSchema } from "@/schema";
+import * as z from "zod";
+import bcrypt from "bcrypt";
+import { db } from "@/lib/database.connection";
+import { getUserByEmail } from "@/lib/actions/user.action";
+
+export const register = async (values: z.infer<typeof RegisterSchema>) => {
+
+  // * check and store user in database
+
+  const validatedFields = RegisterSchema.safeParse(values); // safeParse returns a ZodResult object, and it is used to validate the input values
+  if (!validatedFields.success) {
+    return { error: "Invalid fields!" };
+  }
+
+  const { email, password, name } = validatedFields.data;
+  const hashedPassword = await bcrypt.hash(password, 10); // 10 is the number of salt rounds
+
+  //finding the email in database
+  const exisitingUser = await getUserByEmail(email)
+
+  // if user already exists, return error
+  if (exisitingUser) {
+    return { error: "Email already exists!" };
+  }
+
+  // if not, create and save it in database
+  await db.user.create({
+    data: {
+      name,
+      email,
+      password: hashedPassword,
+    },
+  });
+
+  // TODO: send verification email
+
+  return { success: "Email sent!" };
+};

app/auth/layout.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const AuthLayout = ({ children }: { children: React.ReactNode }) => {
+    return (
+        <div className="h-full flex items-center justify-center bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-sky-400 to-blue-800">
+            {children}
+        </div>
+    )
+}
+
+export default AuthLayout

app/auth/login/page.tsx

@@ -0,0 +1,12 @@
+import LoginForm from '@/components/auth/login-form'
+import React from 'react'
+
+const LoginPage = () => {
+    return (
+        <div >
+            <LoginForm />
+        </div>
+    )
+}
+
+export default LoginPage  

app/auth/register/page.tsx

@@ -0,0 +1,14 @@
+import RegisterForm from '@/components/auth/register-form'
+import React from 'react'
+
+const Register = () => {
+    return (
+        <>
+
+            <RegisterForm />
+        </>
+
+    )
+}
+
+export default Register

app/globals.css

@@ -2,26 +2,82 @@
 @tailwind components;
 @tailwind utilities;
 
+html,
+body,
 :root {
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
+  height: 100%;
 }
 
-@media (prefers-color-scheme: dark) {
+@layer base {
   :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+
+    --radius: 0.5rem;
   }
-}
 
-body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
+  }
 }
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+  }
+}