Social Login memungkinkan user mendaftar dan login menggunakan akun mereka di platform lain (Google, GitHub, Facebook, dll) tanpa harus membuat password baru. Ini dibangun di atas OAuth 2.0.
Mengapa Social Login?
- Mengurangi friction — user tidak perlu ingat password baru
- Meningkatkan konversi pendaftaran (40-60% lebih tinggi)
- Mengurangi beban keamanan — provider besar handle password security
- Email terverifikasi dari provider (tidak perlu verifikasi email sendiri)
Alur Social Login (contoh Google):
1. User klik "Login dengan Google"
2. Redirect ke Google consent screen
3. User setujui → redirect kembali dengan authorization code
4. Server tukar code → access token + user info
5. Server cek: apakah email sudah ada di database?
- Ya → login user tersebut
- Tidak → buat akun baru (registrasi otomatis)
6. Server buat session/JWT untuk app kamu sendiri
Implementasi backend (Express + Passport.js):
const passport = require("passport");
const GoogleStrategy = require("passport-google-oauth20").Strategy;
passport.use(new GoogleStrategy({
clientID: process.env.GOOGLE_CLIENT_ID,
clientSecret: process.env.GOOGLE_CLIENT_SECRET,
callbackURL: "/auth/google/callback"
}, async (accessToken, refreshToken, profile, done) => {
// Cari atau buat user
let user = await db.findUserByProviderId("google", profile.id);
if (!user) {
// User baru — registrasi otomatis
user = await db.createUser({
name: profile.displayName,
email: profile.emails[0].value,
avatar: profile.photos[0].value,
provider: "google",
providerId: profile.id
});
}
done(null, user);
}));
// Routes
app.get("/auth/google",
passport.authenticate("google", { scope: ["profile", "email"] })
);
app.get("/auth/google/callback",
passport.authenticate("google", { failureRedirect: "/login" }),
(req, res) => {
// Buat JWT untuk app kamu sendiri
const token = generateToken(req.user);
res.redirect("/dashboard?token=" + token);
}
);
Account linking: User mungkin login dengan Google hari ini dan email+password besok. Kamu perlu strategi linking:
// Saat social login, cek apakah email sudah ada:
let user = await db.findByEmail(profile.email);
if (user) {
// Email sudah ada — link akun sosial ke user yang sudah ada
await db.linkProvider(user.id, "google", profile.id);
} else {
// Buat user baru
user = await db.createUser({ ... });
}
Tantangan Social Login:
- Dependency pada provider — jika Google down, user tidak bisa login
- Account linking — user bisa punya multiple accounts tanpa sadar
- Data access — pastikan hanya minta scope yang dibutuhkan
- Token management — token dari provider vs token app kamu sendiri
Best practices:
- Selalu minta scope minimal (profile + email biasanya cukup)
- Sediakan opsi login tradisional (email+password) sebagai fallback
- Handle edge case: user menolak consent, email sudah terdaftar
- Simpan provider ID, bukan hanya email (email bisa berubah)
- Gunakan library yang terpercaya (Passport.js, Laravel Socialite)