create user, check if user already exists

.gitignore

@@ -33,3 +33,5 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+mongodb-realm
+next.config.js

next.config.js

@@ -1,7 +1,9 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  env: {
-    REALM_APP_ID: "sparked-next-vbuim",
+  env: {},
+  webpack: (config) => {
+    config.externals = [...config.externals, { realm: "realm" }]; // required to make realm
+    return config;
   },
 };
 

package.json

@@ -22,13 +22,14 @@
     "flowbite-react": "^0.5.0",
     "mobx": "^6.10.0",
     "mobx-react-lite": "^4.0.3",
-    "mongodb": "^6.0.0",
+    "mongodb": "^6.1.0",
     "next": "13.4.17",
     "next-auth": "^4.23.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "realm": "^12.1.0",
-    "typescript": "5.1.6"
+    "typescript": "5.1.6",
+    "zod-form-data": "^2.0.1"
   },
   "devDependencies": {
     "autoprefixer": "^10.4.15",

src/app/api/auth/[slug]/route.ts

@@ -6,12 +6,12 @@ const authApiHandler_ = async function GET(
 ) {
   const slug = params.slug;
 
-  const authFunctions: { [key: string]: () => {} } = {
+  const authFunctions: { [key: string]: (request: Request) => {} } = {
     signup: signup_,
   };
 
   if (authFunctions[slug]) {
-    return authFunctions[slug]();
+    return authFunctions[slug](request);
   } else {
     const response = { isError: true };
 

src/app/api/auth/constants.ts

@@ -2,10 +2,10 @@ import { MongoDBAdapter } from "@auth/mongodb-adapter";
 import NextAuth, { NextAuthOptions } from "next-auth";
 import EmailProvider from "next-auth/providers/email";
 import CredentialsProvider from "next-auth/providers/credentials";
-import clientPromise from "../lib/db";
+import mongoClientPromise from "../lib/db";
 
 export const authOptions: NextAuthOptions = {
-  adapter: MongoDBAdapter(clientPromise),
+  adapter: MongoDBAdapter(mongoClientPromise),
 
 
   pages: {

src/app/api/auth/signup.ts

@@ -1,14 +1,88 @@
-export default async function signup_() {
-  // NextResponse.json({
-  //   isError: true,
-  //   msg: "Sorry you are not authenticated",
-  // });
+import { zfd } from "zod-form-data";
+import { realmApp } from "../lib/db/realm";
+import { translate } from "utils/intl";
+import { WORDS } from "utils/intl/data/constants";
+import { dbClient } from "../lib/db";
+import { dbCollections } from "../lib/db/collections";
 
-  const response = { isError: false,msg:'it worked again' };
+export default async function signup_(request: Request) {
+  const schema = zfd.formData({
+    email: zfd.text(),
+    password: zfd.text(),
+  });
+  const formBody = await request.json();
 
+  const { email, password } = schema.parse(formBody);
 
-  return new Response(JSON.stringify(response), {
-    status: 200,
+  try {
+    const db = await dbClient();
 
-  });
+    if (!db) {
+      console.log("signup_:error", "db error", db);
+
+      const response = {
+        isError: true,
+        msg: translate(WORDS.unknown_error),
+      };
+      return new Response(JSON.stringify(response), {
+        status: 200,
+      });
+    }
+
+    const user = await db.collection(dbCollections.users.name).findOne({
+      email,
+    });
+
+    if (user) {
+      const response = {
+        isError: true,
+        msg: translate(WORDS.user_exist),
+      };
+      return new Response(JSON.stringify(response), {
+        status: 200,
+      });
+    }
+
+    const resp = await realmApp.emailPasswordAuth.registerUser({
+      email,
+      password,
+    });
+
+    //TODO: verify schema
+    await db.collection(dbCollections.users.name).insertOne({
+      email,
+      is_verified: false,
+      created_at: new Date(),
+    });
+
+    const response = {
+      isError: false,
+      msg: translate(WORDS.user_created),
+      email,
+    };
+
+    return new Response(JSON.stringify(response), {
+      status: 200,
+    });
+  } catch (error) {
+    console.log("signup_:error", error);
+    const errorCodeIndex = `${JSON.stringify(error)}`.lastIndexOf("code");
+
+    const code =
+      errorCodeIndex === -1
+        ? 0
+        : Number(`${error}`.substring(errorCodeIndex).match(/\d+/g));
+
+    const resp = {
+      isError: true,
+      msg:
+        code === 4348
+          ? translate(WORDS.email_error, true)
+          : translate(WORDS.unknown_error),
+    };
+
+    return new Response(JSON.stringify(resp), {
+      status: 200,
+    });
+  }
 }

src/app/api/lib/db/collections.ts

@@ -0,0 +1,8 @@
+import { TdbCollection } from "./types";
+
+export const dbCollections: TdbCollection = {
+  users: {
+    name: "users",
+    label: "Users",
+  },
+};

src/app/api/lib/db/index.ts

@@ -1,4 +1,3 @@
-// This approach is taken from https://github.com/vercel/next.js/tree/canary/examples/with-mongodb
 import { MongoClient } from "mongodb";
 
 if (!process.env.MONGODB_URI) {
@@ -8,27 +7,31 @@ if (!process.env.MONGODB_URI) {
 const uri = process.env.MONGODB_URI;
 const options = {};
 
-let client;
-let clientPromise: Promise<MongoClient>;
+let client: MongoClient;
+let mongoClientPromise: Promise<MongoClient>;
 
 if (process.env.NODE_ENV === "development") {
-  // In development mode, use a global variable so that the value
-  // is preserved across module reloads caused by HMR (Hot Module Replacement).
-
   //@ts-ignore
-  if (!global._mongoClientPromise) {
+  if (!global._mongomongoClientPromise) {
     client = new MongoClient(uri, options);
     //@ts-ignore
-    global._mongoClientPromise = client.connect();
+    global._mongomongoClientPromise = client.connect();
   }
   //@ts-ignore
-  clientPromise = global._mongoClientPromise;
+  mongoClientPromise = global._mongomongoClientPromise;
 } else {
-  // In production mode, it's best to not use a global variable.
   client = new MongoClient(uri, options);
-  clientPromise = client.connect();
+  mongoClientPromise = client.connect();
 }
 
-// Export a module-scoped MongoClient promise. By doing this in a
-// separate module, the client can be shared across functions.
-export default clientPromise;
+export const dbClient = async () => {
+  try {
+    const mongoClient = new MongoClient(uri, options);
+    const dbConnection = await mongoClient.connect();
+    return dbConnection.db(process.env.MONGODB_DB);
+  } catch (error) {
+    return null;
+  }
+};
+
+export default mongoClientPromise;

src/app/api/lib/db/realm.ts

@@ -0,0 +1,5 @@
+import Realm from "realm";
+
+export const realmApp = new Realm.App({
+  id: process.env.REALM_APP_ID as string,
+});

src/app/api/lib/db/types.ts

@@ -0,0 +1,6 @@
+export type TdbCollection = {
+  [key: string]: {
+    name: string;
+    label: string;
+  };
+};

src/app/custom.css

@@ -1,54 +1,46 @@
-.logo{
-    margin-top:-20px !important;
+.logo {
+  margin-top: -20px !important;
 }
 
-.landing-page-container{
-    background-color:#FAF8F4 !important;
-    background-image:url('/landing-page-feature-image.png') ;
+.landing-page-container {
+  background-color: #faf8f4 !important;
+  background-image: url("/landing-page-feature-image.png");
   background-position: right;
   background-repeat: no-repeat;
 }
 
-.guest-layout{
-
+.guest-layout {
 }
 
-.nav-bar{
-    background-image:url('https://media.istockphoto.com/id/1085039192/vector/abstract-background-of-engineering-drawing-technological-wallpaper-made-with-circles-and.webp?b=1&s=612x612&w=0&k=20&c=GopWlnZX4z5n_DG5Sdx2iIouMZ-eSNbTjb462paNlFM=');
+.nav-bar {
+  background-image: url("https://media.istockphoto.com/id/1085039192/vector/abstract-background-of-engineering-drawing-technological-wallpaper-made-with-circles-and.webp?b=1&s=612x612&w=0&k=20&c=GopWlnZX4z5n_DG5Sdx2iIouMZ-eSNbTjb462paNlFM=");
   background-position: left;
   background-repeat: no-repeat;
-    background-size: cover;
-
-
-
+  background-size: cover;
 }
 
 .nav-bar::before {
-  content: '';
+  content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100 %;
-  background-color: rgba(0, 0, 0, 0.034); 
+  background-color: rgba(0, 0, 0, 0.034);
 }
 
-
-.landing-page-plain-card{
+.landing-page-plain-card {
 }
 
-.landing-page-main-card-container{
-  margin-top:110px;
-
-
+.landing-page-main-card-container {
+  margin-top: 110px;
 }
 
-
 .project-card {
   margin: 1em;
   height: 50px;
   width: 300px;
-  background-color:#EC975F;
+  background-color: #ec975f;
   position: relative;
   overflow: hidden;
 }
@@ -58,19 +50,22 @@
   width: 300px;
   padding: 0.3rem 90px;
   box-sizing: border-box;
-  background-color: #7471F0;
+  background-color: #7471f0;
   transform: rotateZ(-45deg);
   top: 0;
   left: 0;
   transform-origin: 150px 150px;
   text-align: center;
-  color:white
+  color: white;
 }
 
+.auth-card {
+  background-color: #f0f0f0;
+  margin: 30px;
+  min-height: 80%;
+  max-width: 80%;
+}
 
-
-.auth-card{
-  background-color:#F0F0F0;
-  margin:10px
-
-}
+.auth-container {
+  margin: 0 auto;
+}

src/components/auth/signup.tsx

@@ -8,9 +8,7 @@ import { Button } from "flowbite-react";
 import { SIGNUP_FORM_FIELDS } from "./constants";
 import useAuth from "@hooks/useAuth";
 
-// const onFinish = (values: TsignupFields) => {
-//   console.log("Success:", values);
-// };
+
 
 const onFinishFailed = (errorInfo: any) => {
   console.log("Failed:", errorInfo);
@@ -20,7 +18,7 @@ const Signup: React.FC = () => {
   const { handleSignup } = useAuth();
 
   return (
-    <Row>
+    <Row className="auth-container">
       <Col span={12}>
         <CourseBasedSvgImage height={1000} width={1000} />
       </Col>

src/components/layouts/guestLayout/index.tsx

@@ -24,7 +24,9 @@ const GuestLayout: FC<{
           </Navbar.Link>
           <Navbar.Link href="/navbars">About</Navbar.Link>
           <Navbar.Link href="/navbars">Resources</Navbar.Link>
-          {!isAuthenticated && <Navbar.Link href="/navbars">Login | Sign up</Navbar.Link>}
+          {!isAuthenticated && (
+            <Navbar.Link href="/auth/signup">Login | Sign up</Navbar.Link>
+          )}
         </Navbar.Collapse>
       </Navbar>
       {children}