💡

ReactNative WebView 内でページ遷移した時に Basic 認証に失敗する

2023/02/12に公開

ReactNative で開発しているアプリの一部機能に WebView を利用していました。 WebView で表示するページが、開発環境用のものには Basic 認証がかかっていて、この取り回しで少し詰まったのですが解決できたので記事にしました。

発生した現象。

Basic 認証が必要な ページA の URL を WebView コンポーネントに渡して表示する
ページA 内にある、 ページA と同じ認証トークンが必要な ページB にクリックして遷移すると 401 Unauthorized エラーになる

問題が発生した時の実装

WebView は react-native-webview を利用しています。
Basic 認証はリクエストヘッダーの Authorization にトークンを渡せばいいので、 source props の headers に差し込めば OK だと思っていました。

WebView が行うすべての HTTP リクエストに、定義したヘッダーの値を送るものだと思い込んでいました。しかし、実際にはそうはなっておらず、 source.uri へのリクエストの時のみ送るような仕様のようです。

import WebView from 'react-native-webview';

...

<WebView
	source={{
		uri: `${Basic認証がかかったページのURL}`,
		headers: {
			Authorization: `Basic ${トークン}`,
		},
	}}
	...
/>

問題を解決できた時の実装

basicAuthCredential に Basic 認証のユーザー名とパスワードを渡すことで解決できました。

basicAuthCredential props は react-native-webview の v11.14.0 以降で利用できるものです（ pull request ）。

import WebView from 'react-native-webview';

...

<WebView
	source={{
		uri: `${Basic認証がかかったページのURL}`,
	}}
	basicAuthCredential={{
		username: `${username}`,
		password: `${password}`,
	}}
	...
/>

発生した現象。

問題が発生した時の実装

問題を解決できた時の実装

Discussion