Cara Menambahkan Tombol Login/Register dengan Google (OAuth) ke Proyek Website

Cara menambahkan tombol Login/Register dengan Google (OAuth) ke proyek backend Flask dan frontend React Anda, berikut langkah-langkah lengkapnya:

---

🛠️ Bagian 1: Daftar dan Konfigurasi Google OAuth

1. Masuk ke Google Developer Console

🔗 https://console.developers.google.com/

2. Buat Project Baru

• Klik Select a project > New Project

• Isi nama proyek, klik Create

3. Aktifkan Google OAuth API

• Di sidebar: APIs & Services > Library

• Cari "Google Identity Services" atau "OAuth 2.0" dan klik Enable

4. Buat OAuth 2.0 Client ID

• Menu: APIs & Services > Credentials

• Klik + CREATE CREDENTIALS > OAuth client ID

• Pilih:

  • Application type: Web Application

  • Name: Web Client for E-Book Store

  • Authorized JavaScript origins:

    • http://localhost:3000 (React frontend)

  • Authorized redirect URIs:

    • http://localhost:5000/auth/google/callback (Flask backend route)

• Simpan client_id dan client_secret

---

⚙️ Bagian 2: Backend Flask Setup (Google OAuth)

1. Install dependency

pip install flask-dance

2. Tambahkan ke Flask App

from flask import Flask, redirect, url_for, session, jsonify
from flask_dance.contrib.google import make_google_blueprint, google
from flask_jwt_extended import create_access_token
from models import User  # sesuaikan dengan model user Anda
from extensions import db

app = Flask(__name__)
app.secret_key = "secret"

app.config["GOOGLE_OAUTH_CLIENT_ID"] = "YOUR_GOOGLE_CLIENT_ID"
app.config["GOOGLE_OAUTH_CLIENT_SECRET"] = "YOUR_GOOGLE_CLIENT_SECRET"
google_bp = make_google_blueprint(scope=["profile", "email"])
app.register_blueprint(google_bp, url_prefix="/auth/google")

3. Buat Callback Route

@app.route("/auth/google/callback")
def google_login_callback():
    if not google.authorized:
        return redirect(url_for("google.login"))

    resp = google.get("/oauth2/v2/userinfo")
    user_info = resp.json()
    email = user_info["email"]
    name = user_info.get("name", "")

    user = User.query.filter_by(email=email).first()
    if not user:
        user = User(email=email, name=name)
        db.session.add(user)
        db.session.commit()

    access_token = create_access_token(identity=user.id)
    return jsonify({"access_token": access_token, "email": email})

---

💻 Bagian 3: React Frontend Setup

1. Install Library

npm install @react-oauth/google

2. Setup Google OAuth Provider di index.jsx

import { GoogleOAuthProvider } from '@react-oauth/google';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <GoogleOAuthProvider clientId="YOUR_GOOGLE_CLIENT_ID">
    <App />
  </GoogleOAuthProvider>
);

3. Buat Tombol Login

import { GoogleLogin } from '@react-oauth/google';

const GoogleLoginButton = () => {
  const handleLogin = async (credentialResponse) => {
    const response = await fetch("http://localhost:5000/auth/google/callback", {
      method: "GET",
      credentials: "include",
    });
    const data = await response.json();
    localStorage.setItem("token", data.access_token);
    // redirect or update UI
  };

  return (
    <GoogleLogin
      onSuccess={handleLogin}
      onError={() => console.log("Login Failed")}
    />
  );
};

---

🧪 Testing

1. Jalankan Flask backend (localhost:5000)

2. Jalankan React frontend (localhost:3000)

3. Klik tombol Google login → pastikan akun Anda muncul di database → token tersimpan di localStorage