completed signup

Signed-off-by: Omkar Phansopkar <[email protected]>

Author: OmkarPh

.env

@@ -1,2 +1,2 @@
 NEXT_PUBLIC_REACT_APP_API_KEY = 08387dfc64msh94f0df087928182p1213afjsn3aa4359e369c
-NEXT_APP_SERVER_URL=http://localhost:5000
+NEXT_APP_SERVER_URL=http://localhost:5001

server/constants/config.js

@@ -1,5 +1,5 @@
 const config = {
-  PORT: process.env.PORT || 5000,
+  PORT: process.env.PORT || 5001,
   JWT_SECRET: process.env.JWT_SECRET || "mysecret",
   MONGODB_SRV_STRING: process.env.MONGODB_SRV_STRING || "gg",
 }

server/models/OwnerSchema.js

@@ -14,12 +14,12 @@ const ownerSchema = new mongoose.Schema({
   phone: {
     type: String,
     required: true,
-    unique: true,
+    // unique: true,
   },
   gstin: {
     type: String,
     required: true,
-    unique: true,
+    // unique: true,
   },
   password: {
     type: String,

server/routes/auth.js

@@ -6,6 +6,21 @@ const jwt = require('jsonwebtoken');
 const { Owner } = require("../models/OwnerSchema");
 const { JWT_SECRET } = require('../constants/config');
 
+
+function prepareJWT(owner){
+  return jwt.sign(
+    {
+      _id: owner._id,
+      restaurant_name: owner.restaurant_name,
+      address: owner.address,
+      phone: owner.phone,
+      gstin: owner.gstin,
+    },
+    JWT_SECRET,
+    { expiresIn: '2d' }
+  );
+}
+
 router.post('/api/auth/signup', async (req, res) => {
   try {
     // Check for mandatory fields
@@ -19,12 +34,35 @@ router.post('/api/auth/signup', async (req, res) => {
 
     // Create new owner object
     const owner = new Owner(req.body);
+
+    console.log("New owner", owner);
 
     // Save owner to database
     const savedOwner = await owner.save();
-    
-    // Return success response with ID of new owner
-    res.status(201).json({ message: 'New owner created successfully', id: savedOwner._id });
+
+    // Prepare the JWT with the owner's fields
+    const token = prepareJWT(savedOwner);
+
+    // Send the JWT in a cookie
+    // res.cookie('jwt', token, {
+    //   // httpOnly: true,
+    //   maxAge: 2 * 24 * 60 * 60 * 1000, // 2 days
+    //   sameSite: 'lax',
+    // });
+
+    // Return a success response with the owner's fields
+    return res.status(201).json({
+      success: true,
+      message: "New owner created successfully",
+      profile: {
+        _id: savedOwner._id,
+        restaurant_name: savedOwner.restaurant_name,
+        address: savedOwner.address,
+        phone: savedOwner.phone,
+        gstin: savedOwner.gstin,
+      },
+      token,
+    });
   } catch (err) {
     // Handle errors
     console.error(err);
@@ -64,17 +102,7 @@ router.post('/api/auth/login', async (req, res) => {
     }
 
     // Prepare the JWT with the owner's fields
-    const token = jwt.sign(
-      {
-        _id: owner._id,
-        restaurant_name: owner.restaurant_name,
-        address: owner.address,
-        phone: owner.phone,
-        gstin: owner.gstin,
-      },
-      JWT_SECRET,
-      { expiresIn: '2d' }
-    );
+    const token = prepareJWT(owner);
 
     // Send the JWT in a cookie
     // res.cookie('jwt', token, {

server/routes/sms.js

@@ -5,6 +5,7 @@ const { sendOTP, verifyOTP } = require("../services/smsAPI");
 
 // OTP routes
 router.post("/apis/sendOTP", (req, res) => {
+  console.log(req.body);
   const phone = `+91${req.body.phone}`;
 
   if (!phone)
@@ -28,7 +29,6 @@ router.post("/apis/sendOTP", (req, res) => {
         message: "Server error, contact administrator",
         phone,
         success: false,
-        err,
       });
     });
 });
@@ -38,7 +38,7 @@ router.post("/apis/verifyOTP", (req, res) => {
   const phone = `+91${req.body.phone}`;
   const code = req.body.code;
 
-  if (!phone || code.length != CODE_LENGTH)
+  if (!phone || !code.length)
     return res.status(400).send({
       message: "Invalid phone number or code :(",
       success: false,

server/services/smsAPI.js

@@ -11,7 +11,6 @@ console.log("Twilio params", {
 const twilioClient = require('twilio')(TWILIO_ACCOUNT_SID, AUTH_TOKEN);
 
 exports.sendOTP = (phone) => {
-    console.log("Hello")
     return new Promise((resolve, reject) => {
         twilioClient.verify.v2.services(SERVICE_ID)
             .verifications
@@ -23,7 +22,7 @@ exports.sendOTP = (phone) => {
 
 exports.verifyOTP = (phone, code) => {
     return new Promise((resolve, reject) => {
-        client.verify.v2.services(SERVICE_ID)
+        twilioClient.verify.v2.services(SERVICE_ID)
         .verificationChecks
         .create({to: phone, code: code})
         .then(resolve)

src/components/otpVerification.jsx

@@ -1,19 +1,38 @@
+import axios from 'axios';
 import React, { useState } from 'react'
 import { Button } from 'flowbite-react'
 import OtpInput from 'react-otp-input';
+import { toast } from 'react-toastify';
+import { SERVER_URL } from '../constants/config';
 
-const OTPVerification = () => {
+const OTPVerification = (props) => {
   const [otp, setOtp] = useState('');
 
   const verifyOTPHandler = () => {
-    console.log(otp)
+    console.log("Verify otp:", otp);
+    // props.postVerification();
+
+    axios
+      .post(`${SERVER_URL}/apis/verifyOTP`, { phone: props.phone, code: otp })
+      .then((res) => {
+        if(res.data.success){
+          toast.success("Verified OTP successfuly !");
+          props.postVerification();
+        } else {
+          toast.error("Invalid OTP !");
+        }
+      })
+    //   .catch((err) => {
+    //     console.error(err);
+    //     toast.error("Some error verifying OTP");
+    //   });
   }
 
   return (
     <div className='flex flex-col mt-[40px]'>
       <div>
         <span className='text-[20px]'>We have sent you an OTP on</span><br/>
-        <span className='text-gray-600 dark:text-gray-200 mt-[10px]'>+91 9137357003</span>
+        <span className='text-gray-600 dark:text-gray-200 mt-[10px]'>+91 {props.phone}</span>
       </div>
 
       <div className='flex flex-col justify-center items-center'>

src/constants/config.js

@@ -1 +1,2 @@
-export const SERVER_URL = process.env.NEXT_APP_SERVER_URL || "http://localhost:5000";
+export const SERVER_URL = process.env.NEXT_APP_SERVER_URL || "http://localhost:5001";
+console.log(process.env);

src/context/AuthContext.jsx

@@ -89,6 +89,50 @@ export const AuthProvider = ({ children }) => {
     });
   };
 
+  const signup = (
+    restaurant_name,
+    address,
+    phone,
+    gstin,
+    password,
+  ) => {
+    setIsProcessingLogin(true);
+    return new Promise((resolve, reject) => {
+      // Make an API call to login and get a JWT token
+      fetch(`${SERVER_URL}/api/auth/signup`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ restaurant_name, address, phone, gstin, password }),
+      })
+        .then((res) => res.json())
+        .then((data) => {
+          console.log(data);
+          if (data.success) {
+            console.log("Signed up !");
+            localStorage.setItem("token", data.token);
+            toast.success("Signed up !");
+            setIsProcessingLogin(false);
+            setIsLoggedIn(true);
+            setProfile(data.profile);
+            resolve(data.profile);
+          } else {
+            toast.error("Invalid fields !");
+            setIsProcessingLogin(false);
+            setIsLoggedIn(false);
+            reject(false);
+          }
+        })
+        .catch((error) => {
+          console.error(error);
+          toast.error("Some error logging you in !");
+          setIsProcessingLogin(false);
+          reject(error);
+        });
+    });
+  }
+
   const logout = () => {
     console.log("Logged out !");
     localStorage.removeItem("token");
@@ -103,6 +147,7 @@ export const AuthProvider = ({ children }) => {
         isProcessingLogin,
         profile,
         login,
+        signup,
         logout,
       }}
     >

src/pages/signup.jsx

@@ -1,15 +1,20 @@
 import OTPVerification from "@/components/otpVerification";
 import SignupForm from "@/components/signupForm";
+import axios from 'axios';
 import {
+  useAuth,
   withAuthenticatedRoute,
   withoutAuthenticatedRoute,
 } from "../context/AuthContext";
+import { SERVER_URL } from "../constants/config";
+import { toast } from "react-toastify";
 
 const { AppContext } = require("@/context/appContext");
 const { useContext, useState, useEffect } = require("react");
 
 const Signup = () => {
   const appContext = useContext(AppContext);
+  const { isProcessingLogin, signup } = useAuth();
   const [state, setState] = useState(appContext.state);
   const [stage, setStage] = useState("createAccount"); // createAccount || otpVerification || verified
   const [userInfo, setUserInfo] = useState(null);
@@ -36,15 +41,39 @@ const Signup = () => {
     });
 
     setUserInfo({
-        restuarantName,
-        restuarantGSTIN,
-        address,
-        phoneNumber,
-        password,
-    })
-    setStage("otpVerification");
+      restuarantName,
+      restuarantGSTIN,
+      address,
+      phoneNumber,
+      password,
+    });
+
+    axios
+      .post(`${SERVER_URL}/apis/sendOTP`, { phone: phoneNumber })
+      .then(() => setStage("otpVerification"))
+      .catch((err) => {
+        console.error(err);
+        toast.error("Some error sending OTP")
+      });
+    // setStage("otpVerification");
   };
 
+  function postVerification() {
+    console.log("Create DB account with fields", userInfo);
+    const { restuarantName, restuarantGSTIN, address, phoneNumber, password } =
+      userInfo;
+
+    signup(
+      restuarantName,
+      address,
+      phoneNumber,
+      restuarantGSTIN,
+      password
+    ).catch((err) => {
+      console.log("Err signing up", err);
+    });
+  }
+
   return (
     <div
       className={`w-full min-h-[calc(100vh-60px)] h-auto font-inter flex flex-row ${
@@ -159,7 +188,7 @@ const Signup = () => {
             setStage={setStage}
           />
         ) : (
-          <OTPVerification />
+          <OTPVerification phone={userInfo.phoneNumber} postVerification={postVerification} />
         )}
 
         {/* {stage == "otpVerification" && <OTPVerification/>} */}