struktur folder lengkap + cara membuat proyek frontend & backend,

 Berikut struktur folder lengkap + cara membuat proyek frontend & backend, lalu contoh backend Express untuk OAuth Google / Facebook / GitHub yang bisa langsung kamu pakai.

---

✅ 1. Struktur Folder Proyek (Frontend + Backend)

project-auth/
│
├── backend/                  # Server Express (OAuth, API, dll)
│   ├── server.js
│   ├── auth/
│   │   ├── google.js
│   │   ├── facebook.js
│   │   ├── github.js
│   ├── controllers/
│   │   └── authController.js
│   ├── .env
│   ├── package.json
│
└── frontend/                 # React Frontend (form login/registrasi)
    ├── src/
    │   ├── AuthFormWithDrive.jsx  # file yg sudah kubuatkan
    │   ├── main.jsx
    ├── index.html
    ├── package.json

---

✅ 2. Cara Membuat Proyek

🔹 A. Buat Frontend (React + Vite)

mkdir project-auth
cd project-auth
npm create vite@latest frontend --template react
cd frontend
npm install
npm install axios

Copy file AuthFormWithDrive.jsx ke frontend/src/.

Jalankan:

npm run dev

---

🔹 B. Buat Backend (Express)

cd ../
mkdir backend
cd backend
npm init -y
npm install express passport passport-google-oauth20 passport-facebook passport-github2 dotenv cors

Buat file:

backend/
└── server.js
└── auth/google.js
└── auth/facebook.js
└── auth/github.js
└── controllers/authController.js
└── .env

---

⭐ 3. Isi File .env

Isi dengan kredensial OAuth dari Google / Facebook / GitHub:

GOOGLE_CLIENT_ID=***
GOOGLE_CLIENT_SECRET=***
GOOGLE_CALLBACK=http://localhost:5000/auth/google/callback

FACEBOOK_APP_ID=***
FACEBOOK_APP_SECRET=***
FACEBOOK_CALLBACK=http://localhost:5000/auth/facebook/callback

GITHUB_CLIENT_ID=***
GITHUB_CLIENT_SECRET=***
GITHUB_CALLBACK=http://localhost:5000/auth/github/callback

---

🟦 4. Backend Express – server.js

import express from "express";
import cors from "cors";
import passport from "passport";
import "./auth/google.js";
import "./auth/facebook.js";
import "./auth/github.js";

const app = express();
app.use(cors());
app.use(passport.initialize());

// --------------------
// GOOGLE ROUTES
// --------------------
app.get("/auth/google",
  passport.authenticate("google", { scope: ["profile", "email"] })
);

app.get("/auth/google/callback",
  passport.authenticate("google", { session: false }),
  (req, res) => {
    res.send(`<h2>Login Google Berhasil</h2><pre>${JSON.stringify(req.user, null, 2)}</pre>`);
  }
);

// --------------------
// FACEBOOK ROUTES
// --------------------
app.get("/auth/facebook",
  passport.authenticate("facebook", { scope: ["email"] })
);

app.get("/auth/facebook/callback",
  passport.authenticate("facebook", { session: false }),
  (req, res) => {
    res.send(`<h2>Login Facebook Berhasil</h2><pre>${JSON.stringify(req.user, null, 2)}</pre>`);
  }
);

// --------------------
// GITHUB ROUTES
// --------------------
app.get("/auth/github",
  passport.authenticate("github", { scope: ["user:email"] })
);

app.get("/auth/github/callback",
  passport.authenticate("github", { session: false }),
  (req, res) => {
    res.send(`<h2>Login GitHub Berhasil</h2><pre>${JSON.stringify(req.user, null, 2)}</pre>`);
  }
);

app.listen(5000, () =>
  console.log("Backend berjalan di http://localhost:5000")
);

---

🟩 5. Konfigurasi Google OAuth (auth/google.js)

import passport from "passport";
import { Strategy as GoogleStrategy } from "passport-google-oauth20";
import dotenv from "dotenv";

dotenv.config();

passport.use(
  new GoogleStrategy(
    {
      clientID: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
      callbackURL: process.env.GOOGLE_CALLBACK,
    },
    async (accessToken, refreshToken, profile, done) => {
      const user = {
        id: profile.id,
        name: profile.displayName,
        email: profile.emails?.[0].value,
        picture: profile.photos?.[0].value,
      };
      return done(null, user);
    }
  )
);

---

🟧 6. Konfigurasi Facebook OAuth (auth/facebook.js)

import passport from "passport";
import { Strategy as FacebookStrategy } from "passport-facebook";
import dotenv from "dotenv";

dotenv.config();

passport.use(
  new FacebookStrategy(
    {
      clientID: process.env.FACEBOOK_APP_ID,
      clientSecret: process.env.FACEBOOK_APP_SECRET,
      callbackURL: process.env.FACEBOOK_CALLBACK,
      profileFields: ["id", "displayName", "emails", "photos"]
    },
    (accessToken, refreshToken, profile, done) => {
      const user = {
        id: profile.id,
        name: profile.displayName,
        email: profile.emails?.[0]?.value,
        picture: profile.photos?.[0]?.value
      };
      done(null, user);
    }
  )
);

---

🟪 7. Konfigurasi GitHub OAuth (auth/github.js)

import passport from "passport";
import { Strategy as GitHubStrategy } from "passport-github2";
import dotenv from "dotenv";

dotenv.config();

passport.use(
  new GitHubStrategy(
    {
      clientID: process.env.GITHUB_CLIENT_ID,
      clientSecret: process.env.GITHUB_CLIENT_SECRET,
      callbackURL: process.env.GITHUB_CALLBACK
    },
    (accessToken, refreshToken, profile, done) => {
      const user = {
        id: profile.id,
        name: profile.displayName || profile.username,
        email: profile.emails?.[0]?.value,
        picture: profile.photos?.[0]?.value
      };
      done(null, user);
    }
  )
);

---

🎯 8. Menghubungkan Frontend dengan Backend

Di komponen React (sudah kubuat), tombol ini:

window.open(`/auth/google`, "_blank", "width=600,height=700");

Ganti menjadi:

window.open("http://localhost:5000/auth/google", "_blank", "width=600,height=700");

Begitu juga untuk:

• /auth/facebook

• /auth/github

---

🎉 9. Sesudah Login Sukses?

Kamu bisa:

• menyimpan user ke database (MongoDB / MySQL)

• kirim JWT ke frontend

• redirect ke dashboard

Jika mau, aku bisa buatkan juga:

✅ versi dengan database MongoDB
✅ versi login + register backend lengkap
✅ versi fullstack MERN siap deploy ke Vercel / Render
✅ versi mobile (React Native)

---

Mau dilanjutkan ke tahap mana?

• A. Tambah database MongoDB

• B. Tambah JWT + session login

• C. Integrasi penuh frontend—backend

• D. Buat sistem upload ke Google Drive lewat backend

Tinggal pilih 👍