Lewati ke konten utama
menjadi.dev
Chapter 48.3 Mobile Lanjutan

OAuth Native Flow

Login Google, Apple, dan social login tanpa WebView

Tujuan Pembelajaran

  • Memahami perbedaan OAuth web vs OAuth native
  • Mampu mengimplementasikan Google Sign-In dan Apple Sign-In
  • Mengerti kenapa WebView untuk OAuth itu anti-pattern

Analogi

Diagram 

      OAuth Web (buruk):
App -> WebView -> google.com -> user login -> redirect -> app tangkap token
Masalah: WebView bisa intercept password

OAuth Native (benar):
App -> OS -> Google/Aplikasi Google -> user login -> OS -> app terima token
Keunggulan: user login di app resmi, token aman, OS handle auth session

OAuth native seperti login lewat aplikasi bank — OS mengarahkan ke app resmi untuk autentikasi. OAuth WebView seperti login di browser dalam app — tidak aman.

Penjelasan Konsep

OAuth native menggunakan OS-level authentication — user login via aplikasi resmi (Google app, browser system) atau Apple ID di Settings. Lebih aman karena app-mu tidak pernah melihat password user.

Google Sign-In: (1) Install: expo-auth-session dan expo-auth-session/providers/google. (2) useAuthRequest hook untuk Google. (3) Google.useAuthRequest({ clientId, iosClientId, androidClientId }). (4) Return: request, response, promptAsync().

Apple Sign-In: (1) Install: expo-apple-authentication. (2) AppleAuthentication.signInAsync({ requestedScopes: [...] }). (3) Return: { identityToken, email, fullName, user }. (4) iOS only — Android tidak support Apple Sign-In.

Flow: (1) User tap “Login Google”. (2) promptAsync() → OS buka browser system/Google app. (3) User login/approve di Google. (4) Redirect ke app dengan authorization code. (5) Exchange code untuk token di backend. (6) Backend verifikasi token dengan Google → return JWT.

Kenapa TIDAK WebView: (1) WebView bisa intercept credentials (phishing risk). (2) Google dan Apple explicitly melarang OAuth di WebView. (3) App review bisa reject kalau pakai WebView OAuth. (4) User experience lebih buruk (tidak bisa akses saved password).

PKCE: Proof Key for Code Exchange — tambahan keamanan authorization code flow. Library modern auto-handle. Kalau manual, generate code_verifier + code_challenge.

Inti yang Perlu Dipahami

Bagian ini berfokus pada memahami perbedaan OAuth web vs OAuth native., mampu mengimplementasikan Google Sign-In dan Apple Sign-In., dan mengerti kenapa WebView untuk OAuth itu anti-pattern. Jangan terburu-buru menghafal istilahnya. Lebih penting untuk memahami peran setiap konsep dan kapan konsep itu muncul dalam pekerjaan web development.

Saat membaca OAuth Native Flow, gunakan tujuan belajar sebagai penanda arah. Kalau kamu sudah bisa menjelaskan tujuan itu dengan kata-katamu sendiri, berarti fondasinya mulai terbentuk.

Cara Membayangkannya

OAuth native seperti login lewat aplikasi bank — OS mengarahkan ke app resmi untuk autentikasi. OAuth WebView seperti login di browser dalam app — tidak aman. Analogi ini dipakai supaya konsep teknis tidak terasa melayang. Hubungkan setiap istilah dengan perannya: siapa yang meminta, siapa yang memproses, data apa yang berpindah, dan hasil apa yang diharapkan.

Kalau analoginya sudah terasa masuk akal, barulah lihat istilah teknisnya. Cara ini membuat materi lebih mudah dipahami daripada langsung menghafal definisi.

Saat Melihat Contoh Kode

Contoh kode pada chapter ini memakai bahasa tsx. Bacalah contoh kode sebagai ilustrasi alur, bukan sebagai bagian yang harus langsung dihafal. WebBrowser.maybeCompleteAuthSession untuk handle redirect. Google.useAuthRequest dengan client IDs. response.type === ‘success’ saat login berhasil. Exchange authorization code ke backend.

Perhatikan nama fungsi, urutan langkah, dan data yang berpindah. Biasanya tiga hal itu sudah cukup untuk memahami hubungan antara teori dan praktik.

Konteks dalam Perjalanan Belajar

Setiap konsep di platform ini dipilih karena dipakai di industri. Fokus pada pemahaman, bukan hafalan.

Kamu sudah di bagian lanjutan. Mulai pikirkan bagaimana konsep ini dipakai di dunia kerja — bukan hanya untuk belajar, tapi untuk membangun produk nyata.

Gunakan pertanyaan reflektif dan prompt AI di akhir chapter sebagai latihan aktif. Membaca saja tidak cukup — kamu perlu menjelaskan ulang dengan kata-katamu sendiri.

Contoh Kode

tsx 
import * as Google from "expo-auth-session/providers/google";
import * as WebBrowser from "expo-web-browser";

WebBrowser.maybeCompleteAuthSession();

export default function GoogleLogin() {
  const [request, response, promptAsync] = Google.useAuthRequest({
    clientId: "YOUR_CLIENT_ID",
    iosClientId: "YOUR_IOS_CLIENT_ID",
    androidClientId: "YOUR_ANDROID_CLIENT_ID",
  });

  useEffect(() => {
    if (response?.type === "success") {
      const { authentication } = response;
      exchangeForToken(authentication!.accessToken);
    }
  }, [response]);

  return <Pressable onPress={() => promptAsync()}><Text>Login with Google</Text></Pressable>;
}

Penjelasan Kode

WebBrowser.maybeCompleteAuthSession untuk handle redirect. Google.useAuthRequest dengan client IDs. response.type === 'success' saat login berhasil. Exchange authorization code ke backend.

Prompt AI

Konfigurasikan OAuth untuk 4 provider: Google, Apple, Facebook, dan X (Twitter). Berikan client IDs setup, scope yang diperlukan, dan cara mengekstrak email + name dari masing-masing.

Pertanyaan Reflektif

Berapa banyak aplikasi yang kamu login pakai Google/Apple vs email/password? Kenapa kamu pilih social login?