React NativeでMastodon認証を実装した

Mastodonnのクラインアント用ネイティブアプリをReact NativeとExpoで作成している。

バージョンは下記の通り。

実装自体はできたんだけれど、正直いろいろと理解が足りていないので、整理してみる。

インストールしたPackage

expo-auth-session

ブラウザベースの認証を処理するための API

最初は認証時にWebViewを開いて認証に成功したらリダイレクトURIを用いてアプリ画面に戻すという仕組みを実装しようとしたんだけれど、そもそもリダイレクトURIがわからない。Expoの開発用URLを指定してみたけど、

という謎のエラーが出てアプリ側に戻らない。

そしてタスク管理でアプリに戻ると認証が成功しているという謎の現象が発生した。

色々悩んでいたけどexpo-auth-session を使用したらリダイレクトURIの作成をいい感じにやってくれた。

Expo AuthSessionにはexpo-crypto と一緒にインストールする必要があるって書いてあったけど、インストールしていない。今のところ問題はないので気にしないでおく。

expo-secure-store

Expo SecureStore

Expo用のローカルストレージ。

で、一通りの作業ができる。

認証に用いたMastodon API

• ${instanceUrl}/api/v1/apps
  • クライアント アプリケーションを登録
• ${instanceUrl}/oauth/authorize?
  • OAuth トークンを生成および管理
• ${instanceUrl}/oauth/token
  • API 呼び出し中に使用するアクセス トークンを取得

認証までのフロー

アプリケーションを登録

クライアント アプリケーションを登録APIを叩く。

Bodyにclient_name、redirect_uris、scopes、websiteが必要になる。

client_nameはアプリ名を指定し、redirect_urisはexpo-auth-sessionを使用し作成する。

scopesは権限を指定し、websiteはアプリのウェブサイトをインプットする。

成功すると、

が取得できる。

client_id、client_secretは後ほど使用する。関数をまたいで使用するので、expo-secure-storeに保存した。

認証画面を開く

取得したclient_idを用い、認証URLを作成しブラウザで開く。

その際、expo-web-browserを使用した。Expo WebBrowserだけどインストールした記憶がないので、たぶん標準で入っていた。

react-native-webviewとは異なり、ネイティブなブラウザモーダルを使用するらしい。

使い分けの参考は下記の通り。

で、expo-web-browserには認証フローのメソッドがある。

上記メソッドを実行すると下記フローが走る。

1. 認証プロバイダーとのやり取り:
   authUrlに指定したプロバイダー（例: GoogleやTwitter）に接続し、ユーザーが認証情報を入力できる画面を表示。
2. リダイレクトハンドリング:
   認証が成功すると、プロバイダーはredirectUriにリダイレクト。
   アプリはそのリダイレクトURLを受け取り、アクセストークンや認証コードを抽出して利用。
3. ネイティブモーダルの使用:
   WebBrowser.openAuthSessionAsyncは、ネイティブの認証モーダル（Safari View ControllerやChrome Custom Tabs）を使用するため、認証が安全かつシームレスに行える。

アクセストークンの取得

認証が完了したら、認証結果に含まれるcodeを用い、アクセストークンを取得する。その際、先ほど保存したclient_id、client_secretをBodyに含める。成功後したら認証が成功したということなので、取得したアクセストークンをexpo-secure-storeに保存して、アクセストークンを持っている人用のページにリダイレクトする。

ルートに関係ないディレクトがルートに紐づく問題

app以下にmodelという型フォルダを作成したら、

というエラーが吐き出された。どうやらReact nativeはファイル構造に基づいてルートを自動生成するらしい。

しかしこれはルート判定してほしくない。除外判定の仕方がわからなかったので、appと同階層にsrcを作成しそこに格納した。

これが正しいかはわからない。