React NativeのWebViewでBasic認証を突破する方法まとめ

問題 Problem

React Nativeで開発していてBASE_URLがBasic認証が必要なページのときに、WebViewで表示させたい！
調べたときにあんまり情報なかったので、めちゃ覚え書き程度にさらっと書きました

解決法 Solution

import React from 'react';
import { WebView } from 'react-native';
import {
  BASE_URL,
  BASIC_AUTH_USER_NAME,
  BASIC_AUTH_PASSWORD,
} from 'react-native-dotenv';

const MyComponent = () => {
  const basicAuthToken = btoa(`${BASIC_AUTH_USER_NAME}:${BASIC_AUTH_PASSWORD}`)

  return (
    <WebView
      source={{
        uri: `${BASE_URL}`,
        headers: {
          Authorization: `Basic ${basicAuthToken}`
        }
      }}
    />
  )
}

ポイントはbtoa()関数で、Basic認証に必要なusername:passwordという文字列をBase64エンコードして、WebViewのheaders情報に渡します。

const basicAuthToken = btoa(`${BASIC_AUTH_USER_NAME}:${BASIC_AUTH_PASSWORD}`)

参考

The WebView has no support for Basic Authentication (or custom headers). · Issue #19200 · facebook/react-native