feat: Implement dual authentication with Google OAuth and email/passw…

…ord (#412)

* feat/auth-for-job-posters

* added pwd input with visibility toggler

---------

Co-authored-by: samad <[email protected]>

.env.example

@@ -1,3 +1,4 @@
+BASE_URL=http://localhost:3000
 #
 # Database 
 #
@@ -14,8 +15,19 @@ CDN_API_KEY=api-key
 CDN_BASE_UPLOAD_URL=https://sg.storage.bunnycdn.com/job-board/assets
 CDN_BASE_ACCESS_URL=https://job-board.b-cdn.net/assets
 
-
 NEXT_PUBLIC_GOOGLE_MAPS_API_KEY=maps-api-key
 
+# 
+# Email SMTP credentials
+# 
+EMAIL_USER=[email protected]
+EMAIL_PASSWORD=
+
+# 
+# Google OAuth credentials
+# 
+GOOGLE_CLIENT_ID=
+GOOGLE_CLIENT_SECRET=
+
 # To run the application in production environment / check the envs 
 # SKIP_ENV_CHECK=true npm run [replace with your script name]

README.md

@@ -48,15 +48,27 @@ Follow these steps to set up the repository locally and run it.
    #
    NEXTAUTH_SECRET=
    NEXTAUTH_URL="http://localhost:3000"
-   
+
    #
    # Bunny CDN
    #
    CDN_API_KEY=
    CDN_BASE_UPLOAD_URL=
    CDN_BASE_ACCESS_URL=
-   
+
    NEXT_PUBLIC_GOOGLE_MAPS_API_KEY=
+
+   #
+   # Email SMTP credentials
+   #
+   [email protected]
+   EMAIL_PASSWORD=
+
+   #
+   # Google OAuth credentials
+   #
+   GOOGLE_CLIENT_ID=
+   GOOGLE_CLIENT_SECRET=
    ```
 
 2. To generate AUTH_SECRET,
@@ -148,40 +160,41 @@ Which is https://[your-pull-zone-hostname]/[any folder name you might have added
 
    <img src="https://utfs.io/f/CUistsOk9f0IyM9047Pa7YvK8qbtnUAPO9jwxdskhzc2JNoR" alt=" CDN_BASE_ACCESS_URL"  width="600"  />
 
-
 # Steps to Set Up Google Maps Platform API Key
 
 To use the Google Maps API in your applications, follow the steps below to create and set up your API key.
 
 ### Step 1: Go to Google Cloud Console
+
 1. Navigate to the [Google Cloud Console](https://console.cloud.google.com/).
 2. If you don’t have a Google account, create one and sign in.
 
 ### Step 2: Create a New Project
+
 1. In the Cloud Console, click on the **Select a project** dropdown at the top.
 2. Click **New Project** to create a new project.
 3. Give your project a name, select the organization (optional), and choose the billing account.
 4. Click **Create**.
 
-### Step 3: Google Maps Platform 
+### Step 3: Google Maps Platform
+
 1. Search Google Maps Platform in the Console search bar
-<img width="1438" alt="Screenshot 2024-09-22 at 10 15 15 AM" src="https://github.com/user-attachments/assets/a5f93c1e-d7b6-4a5b-847b-868b1133643d">
+   <img width="1438" alt="Screenshot 2024-09-22 at 10 15 15 AM" src="https://github.com/user-attachments/assets/a5f93c1e-d7b6-4a5b-847b-868b1133643d">
 
 2. If your account is not setup yet , finish your account setup
-<img width="930" alt="Screenshot 2024-09-22 at 10 02 59 AM" src="https://github.com/user-attachments/assets/c8ee7aa3-7610-4836-86f6-c28e8604c2b9">
+   <img width="930" alt="Screenshot 2024-09-22 at 10 02 59 AM" src="https://github.com/user-attachments/assets/c8ee7aa3-7610-4836-86f6-c28e8604c2b9">
 
-3.After Completeing account setup ,  select the "Keys and Credentails" Section.
+3.After Completeing account setup , select the "Keys and Credentails" Section.
 4.Then select the Create Credentials option , under which you can select the "API Key Option"
 <img width="1440" alt="Screenshot 2024-09-22 at 10 05 36 AM" src="https://github.com/user-attachments/assets/9e897c91-3282-4e28-8fdf-d920d6c4bc15">
 
 5. You will receive a API Key , add the key to the NEXT_PUBLIC_GOOGLE_MAPS_API_KEY in the .env
-<img width="660" alt="Screenshot 2024-09-22 at 10 19 33 AM" src="https://github.com/user-attachments/assets/adcb5a49-892e-43a1-b318-56b296280611">
-
-
+   <img width="660" alt="Screenshot 2024-09-22 at 10 19 33 AM" src="https://github.com/user-attachments/assets/adcb5a49-892e-43a1-b318-56b296280611">
 
 ### Step 4: Changes required to make it work on localhost
+
 1. Although the documentation mentions that without restriction , the API key will work everywhere, that is not the case for http requests.
-2. Add a restriction and mention your localhost along with your port  for it to start working on local ,  and save and continue
-<img width="694" alt="Screenshot 2024-09-22 at 10 06 44 AM" src="https://github.com/user-attachments/assets/3acfdf47-4b1d-480f-8172-0fbfa1c39f02">
+2. Add a restriction and mention your localhost along with your port for it to start working on local , and save and continue
+   <img width="694" alt="Screenshot 2024-09-22 at 10 06 44 AM" src="https://github.com/user-attachments/assets/3acfdf47-4b1d-480f-8172-0fbfa1c39f02">
 
 3. to test navigate to the http://localhost:3000/create , and test the "Where is the job located" input.

package.json

@@ -57,14 +57,15 @@
     "clsx": "^2.1.1",
     "dayjs": "^1.11.13",
     "framer-motion": "^11.5.4",
-    "linkify-react": "^4.1.3",
     "jiti": "^1.21.6",
+    "linkify-react": "^4.1.3",
     "lodash": "^4.17.21",
     "lucide-react": "^0.426.0",
     "next": "^14.2.12",
     "next-auth": "^4.24.7",
     "next-themes": "^0.3.0",
     "nextjs-toploader": "^1.6.12",
+    "nodemailer": "^6.9.15",
     "react": "^18",
     "react-dom": "^18",
     "react-hook-form": "^7.52.2",
@@ -80,6 +81,7 @@
   "devDependencies": {
     "@types/bcryptjs": "^2.4.6",
     "@types/node": "^20",
+    "@types/nodemailer": "^6.4.16",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "@typescript-eslint/eslint-plugin": "^8.1.0",

prisma/schema.prisma

@@ -10,12 +10,40 @@ datasource db {
 model User {
   id         String  @id @default(cuid())
   name       String
-  email      String  @unique
-  password   String
+
+  password   String?
   avatar     String?
   isVerified Boolean @default(false)
   role       Role    @default(USER)
   jobs       Job[]
+
+  email         String    @unique
+  emailVerified DateTime?
+  
+  oauthProvider   OauthProvider?  // Tracks OAuth provider (e.g., 'google')
+  oauthId String?
+
+  blockedByAdmin DateTime?
+  
+}
+
+enum OauthProvider {
+  GOOGLE
+}
+
+
+model VerificationToken {
+  token String
+  identifier String
+  createdAt  DateTime @default(now())
+  updatedAt  DateTime @updatedAt
+  type TokenType
+  @@unique([token,identifier])
+}
+
+enum  TokenType {
+  EMAIL_VERIFICATION
+  RESET_PASSWORD
 }
 
 model Job {

prisma/seed.ts

@@ -298,6 +298,7 @@ async function seedUsers() {
               name: u.name,
               password: hashedPassword,
               role: u.role || Role.USER,
+              emailVerified: new Date(),
             },
             update: {},
           })