[Paaaack] Resolved 403 disallowed_useragent error for Google OAuth in React Native WebView by using a custom user agent

Error 403: disallowed_useragent

最近有空的時候就會嘗試把 Paaaack 做到 iOS 跟 Android 上，覺得這樣可能比網頁版更能吸引使用者，實作的想法也很簡單，就是想單純用 React Native 開一個 WebView 直接打開 Paaaack 網頁版就好，可以用的話就可以先上架再說。

實作後第一個遇到的問題就是 Google OAuth 沒辦法登入了，會遇到下面的問題：

Access blocked: paaaack’s request does not comply with Google’s policies.
…
Error 403: disallowed_useragent

猜測是 Google 因為 security 考量不允許 WebView 用 OAuth 吧。

原本想說好吧不能用就乖乖用 React Native 實作 Google OAuth，也真的用 @react-native-google-signin/google-signin 測試成功，但沒想到再次 google 了一下原本 WebView 的問題就發現：

Google Auth not working (disallowed user agent) · Issue #162 ·…

原來 react-native-webview 上 2020 年時大家就已經發現可以靠在 WebView 加上 custom user agent 解決 403 disallowed_useragent 的問題了，實際試了一下還真的可以：

// App.tsx
import { Platform, SafeAreaView, StyleSheet } from "react-native";
import { WebView } from "react-native-webview";

const App = () => {
  return (
    <SafeAreaView style={styles.container}>
      <WebView
        userAgent={
          Platform.OS === "android"
            ? "Chrome/18.0.1025.133 Mobile Safari/535.19"
            : "AppleWebKit/602.1.50 (KHTML, like Gecko) CriOS/56.0.2924.75"
        }
        source={{ uri: "https://paaaack.com" }}
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

export default App;