メインコンテンツまでスキップ

Squid を使った Firebase Auth

Firebase Authentication を利用して Squid アプリを安全に運用する​

作成するもの​

  • Firebase Authentication を使用してアプリの認証を処理するフルスタックアプリケーション。
  • Firebase Authentication トークンに基づいてデータベースアクセスを認可する Squid バックエンド。

学べること​

  • Firebase Auth と Squid を統合してリソースへのアクセスを管理する方法。

必要なもの​

  • Squid アプリ。新しいアプリは Squid Console で作成できます。
  • Firebase アプリ。新規作成するか、既存のアプリは Firebase Console で確認できます。
  • TypeScript の経験が必要です。React の経験があると役立ちますが、必須ではありません。

環境のセットアップ​

  1. In the Squid Console, switch to the dev environment.

switch environment

  1. Download the firebase-authentication code sample using the following command. Replace the placeholders with the values from your Squid application as shown in the console.

    2. npx @squidcloud/cli init-sample firebase-authentication --template firebase-authentication --appId YOUR_SQUID_APP_ID --apiKey YOUR_SQUID_API_KEY --environmentId dev --squidDeveloperId YOUR_SQUID_DEVELOPER_ID --region YOUR_REGION
TIP

You can find your environment variables under: 'Application' -> 'Show env vars' as seen below:

switch environment

  1. Open the project in the IDE of your choice.
  2. Start the app locally by running the following command in the project folder:
npm run start
  1. To view the app, navigate to localhost:PORT, where PORT is logged in the terminal. The address will likely be http://localhost:5173.

Firebase Authentication の統合を追加する​

  1. Squid Console で Integrations タブをクリックしてください。

  2. Available integrations タブから Firebase Authentication を選択してください。

  3. 次の詳細情報を入力してください：

    • Integration ID: firebase-auth
    • Project ID: これはあなたの Firebase プロジェクトを一意に識別するものです。 Firebase Console でプロジェクト ID を確認できます。

  4. Add integration をクリックしてください。

Firebase integration

Firebase Authentication の統合を追加したので、アプリ内で Squid と連携して Firebase Authentication を使用する方法については、authentication のドキュメントをご覧ください。

注意

react-firebase-hooks は Firebase によって管理されていないサードパーティパッケージです。このパッケージの使用は任意ですが、使用しない場合は認証トークンを最新の状態に保つためのオブザーバビリティを処理するコードを自前で記述・維持する必要があります。

Firebase の初期化​

サンプルアプリでは、frontend の src ディレクトリ内にある firebase.ts ファイルに移動してください。プレースホルダーをあなたの Firebase アプリの情報に更新します：

// Import the functions you need from the SDKs you need
import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';

// TODO: Add SDKs for other Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
// Your web app's Firebase configuration

const firebaseConfig = {
  apiKey: 'YOUR_FIREBASE_API-KEY',
  authDomain: 'YOUR_FIREBASE_PROJECT_ID.firebaseapp.com',
  projectId: 'YOUR_FIREBASE_PROJECT_ID',
  appId: 'YOUR_FIREBASE_APP_ID',
};

// Initialize Firebase
const firebaseApp = initializeApp(firebaseConfig);
export const auth = getAuth(firebaseApp);
export default firebaseApp;

設定が完了すると、Firebase Authentication を使用してサンプルアプリにログインできるようになります。認証トークンは Squid バックエンドに渡され、リソースへのアクセスが管理されます。データのセキュリティに関する詳細は、security rules documentation (セキュリティルールのドキュメント) をご覧ください。