どこにでもいるTSコーダーの忘備録

プログラミングに関する忘備録を自分用に残しときます。マサカリ怖い。

Firebase

React Native製のアプリで受け取ったプッシュ通知をタップして特定の画面に遷移させる方法

目次 FirebaseコンソールからServer Keyを取得する Server KeyをExpoのサーバーにアップロードする 必要なパッケージをインストールする FirebaseコンソールからServer Keyを取得する Expoが認証情報を使って開発者の代わりにExpoのサーバーからプッシュ通知…

FirebaseからReact Native製アプリにプッシュ通知を送信する方法

スタンドアロンアプリをExpoで開発中に、プッシュ通知をタップして特定の画面を開く機能を実装したくなった。 BFFとしてFirebase Functionsを使用していたので、忘備録としてFirebase FunctionsからExpoで構築されたReact Native製アプリにプッシュ通知を送…

React NativeでFirebaseのダイナミックリンクをハンドリングしてみる

Firebase Authに登録されたメールアドレスを認証したあと特定の画面に遷移して結果を表示したいというモチベーションが沸々と湧きあがった。 流れとしては次のような感じ。 firebase/authのsendEmailVerificationメソッドを利用してユーザーのメールアドレス…

Firebase Dynamic Linksでダイナミックリンクを作成する

Firebase Dynamic Linksの作成画面で各単語が意味していることや、各フィールドで求められる内容を入力する意味が最初わからなかったので、将来的なことも含めて忘備録としてダイナミックリンクの作り方を残しておく。 Firebaseのコンソール画面からDynamic …

`node-fetch`を使用したときに発生する`Error [ERR_REQUIRE_ESM]: require() of ES Module`の解決方法

Firebase Functionsでnode-fetchを使用してFirebase Emulatorで動かそうとしたら次のようなエラーが発生した。 Error: Failed to load function definition from source: Failed to generate manifest from function source: Error [ERR_REQUIRE_ESM]: requi…

Firebase FunctionでJWTを作成して、バックエンドへのリクエストの際に使用する簡単なやり方

前提 NestJSプロジェクトの作成方法や、PassportとJWTを組み合わせて認証機構を実装する方法に関してはこちらを参照。 takagimeow.hatenablog.com Firebase プロジェクトの作成方法についてはこちらの記事を参照。 takagimeow.hatenablog.com Firebase Funct…

vitestとfirebase-functions-testを使ってテストを実行したら"__vite_ssr_import_1__ is not a function"と表示された場合の対処法

Firebase FunctionsのプロジェクトにJestの代わりにVitestを入れてみた。 yarn add -D vitest vite-tsconfig-paths vitest.config.tsは次の通りに作成した。 /// <reference types="vitest" /> /// <reference types="vite/client" /> import { defineConfig } from "vite"; import tsconfigPaths from "vite-tsconfig-path</reference></reference>…

React Query Firebaseを使って React Nativeで Firebase Authを通して認証したりFirebase Functionsの関数を 呼び出してみよう

React Query Firebaseとは、Firebaseを使いやすくするためのHookのセットを提供してくれるパッケージです。提供されているHookでは、React Queryをラップしていて、React Queryの利点を融合することでフックをプロジェクトに対して簡単に導入できるようにし…

Firebaseプロジェクトの作り方

Firebaseのプロジェクトをセットアップする まずはコンソール上でFirebaseのセットアップを行う。 プロジェクトを追加をクリックする プロジェクト名を入力する 今回は「このプロジェクトでGoogle Analyticsを有効にする」をONにして「続行」をクリックする…

React NativeでFirebaseを使おうとする際に'While trying to resolve module `idb` from file...'というエラーが出る場合の対処法

Expo CLIを使用して作成したReact NativeプロジェクトでFirebaseを導入してアプリを立ち上げた際に次のようなエラーが発生した。 While trying to resolve module `idb` from file `/プロジェクトのパス/node_modules/@firebase/app/dist/esm/index.esm2017.…

Firebase FunctionsとDeno + Oakを組み合わせて認証が通ったリクエストのみデータを返すようにしたい話

Firebase FunctionsをBFFとして実装し、Deno + Oakで作成したAPIサーバーからデータを取得してみる。 今回はJWTを使った認証を行いたいので、認証が成功したリクエストのみにデータを返したい。 内容 両方の環境に共通のSecretを持たせて、Firebase Function…