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

Firebase Auth with Squid

Firebase Authentication を使用して Squid アプリを保護する​

これから作成するもの​

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

これから学ぶこと​

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

必要なもの​

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

Environment setup​

  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 プロジェクトを一意に識別するためのものです。プロジェクト ID は Firebase Console で確認できます。
  1. Add integration をクリックしてください。

Firebase integration

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

Note

react-firebase-hooks は Firebase によってメンテナンスされていないサードパーティ製のパッケージです。このパッケージを使用しない選択もできますが、その場合は認証トークンを常に最新の状態に保つためのオブザーバビリティを処理するコードを自分で作成および保守する必要があります。

Firebase の初期化​

サンプルアプリでは、フロントエンドの 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 をご覧ください。