店員とFirebaseとプレミアムレシピアプリを構築する🔥

Firebaseは、WebサービスやモバイルアプリケーションのトッププラットフォームAS - Aサービス(PAAS)プロバイダの一つです.それは、ストレージ、分析、および認証のような最小限の労力で完全に本格的なアプリケーションをスピンする開発者のための強力でよく設計された機能のトンをパックします.
ClerkはFirebaseと直接統合されているので、開発者は簡単に自分たちの美しいサインアップ、サインアップ、およびユーザープロファイルUISをFireBaseアプリケーションに加えることができます.統合は、開発者は、ユーザー管理に妥協せずにFireBaseのすべてのフル機能セットを使用することができます.
このポストでは、“プレミアム”レシピショーケースアプリケーションを作成するには、完全な例FireBaseとClerkを統合表示するつもりです.レシピデータはFirebase Firestoreに保存され、認証されたユーザーにのみ使用できます.

このガイドの完全なコードはclerk-firebase-starter リポジトリには、FireBaseを設定し、Clerkに接続する方法があります.アプリケーションデモはhttps://fir-clerk.web.app/ .
あなたが始める前にドキュメンテーションを読みたいならば、我々を参照してくださいFirebase integration documentation .

FireBaseプロジェクトの設定🏕

起動するには、FireBase Webプロジェクトが必要です.に移動Firebase Console 新しいプロジェクトを作成します.

それを有効な名前と確認を与えた後、あなたはFireBaseダッシュボードに自分自身を見つけるでしょう.

FireStoreの有効化とレシピの追加🍳

Firebaseダッシュボードから、先に行くことができますし、我々のサンプルプロジェクトの新しいFirestoreデータベースを作成します.FireStoreのインスタンスは、我々のレシピを格納し、取得するデータベースとして機能します.あなたがFireStoreの詳細については、スターターを見ることができますdocumentation .

データベースインスタンスの作成中に、ユーザーのどこか近くのストレージ場所を選択する必要があります.また、プロダクションモードのルールセットを選択することによって、プラットフォームの外部からデータベースへの読み取り/書き込みを無効にしていることを覚えておいてください.我々は、その直後に変更するつもりです!
あなたがFirebaseに慣れていないならばSecurity Rules , それらは基本的にFirebaseストレージソリューションの重要なデータへのアクセスを制限するドメイン固有の言語です.前に述べたように、これらはプレミアムなので、認証されたユーザーだけがそれらを表示することが許可されます.
認証されたユーザーが任意のデータベースを読み取り、書き込みを許可するには、以下のセキュリティ規則を使用できます.

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read: if request.auth != null;
    }
  }
}

レシピの追加👨‍🍳

いくつかのレシピを追加するにはrecipes お好みのレシピでコレクションしますが、以下に示すのと同じ属性スキーマに従ってください.

役に立つならば、それぞれのレシピ文書のタイプスクリプトタイプは以下の通りです.

type Recipe = {
  /** The recipe description */
  description: string;

  /** The amount of guilty you should feel */
  calories: number;

  /** Cooking time in minutes */
  cookingTimeMin: number;

  /** Publicly accessible image full URL */
  imageUrl: string;

  /** Number of ingredients needed */
  ingredientsNum: number;

  /** The title of the recipe */
  title: string;
};

いくつかのレシピを追加した後、すべてのデータ側から設定されます.

Firebase認証の有効化🔒

これは新しいプロジェクトですので、認証機能を有効にする必要があります.Clerkが残りを処理するので、それ以上のアクションは必要ありません.

ClerkでのFirebase統合の有効化👇

あなたが店員に新しいならば、あなたは必要ですcreate an account プラットフォームでは、新しいアプリケーションを作成する手順に従ってください.
この例のアカウントと新しいアプリケーションを作成した後、次のことができますthese instructions アプリケーションインスタンスのファイアウォールの統合を有効にするには.
これで、あなたのFireBaseアプリケーションでClerkユーザーを認証することができます.

コードを見せてください👩‍💻

完全な例をローカルで実行するには、いくつかの小さなステップに従う必要があります.まず、先に行くと私たちのfirebase起動アプリケーションをクローンします.

git clone [email protected]:clerkinc/clerk-firebase-starter.git

プロジェクトフォルダ内に行き、コピーします.環境変数ファイルの例.環境変数ローカルファイル.

cp .env.example .env.local

フロントエンドAPIの値をapplication dashboard そして、NEXT_PUBLIC_CLERK_FRONTEND_API 値.あなた.環境変数ローカルファイルは次のようになります.

NEXT_PUBLIC_CLERK_FRONTEND_API=clerk.sample.api.lcl.dev

最後の設定ステップは、firebaseを置き換えることです.ウェブ独自のFireBaseプロジェクトからの設定ファイルです.あなたのための仕様を見つけることができますconfig object Firebaseのドキュメントで.
新しいFireBase Webプロジェクトを作成した後、プロジェクトの設定の下で必要な値を見つけることができます➜ 全般.

これで、依存関係をインストールし、開発モードでプロジェクトを実行できます.プロジェクトのルートディレクトリに移動して実行します.

yarn install

完成後

yarn dev

あなたのアプリケーションは現在、ローカル環境で実行され、ライブデモと同じ機能を体験することができます.

魔法が起こるところ💫

あなたがアプリケーションのセットアップを取る場合は、統合はシームレスであり、店員とFireBase間だけでいくつかのコピー＆ペーストの手順を使用してボックスから動作します.次のように動作します.
統合があなたのウェブ・アプリケーション・コードで働いて、あなたがClerkでFirebaseユーザーを認証するために必要である行動が何であるかについて進んでみましょう.
FireBaseアプリケーションオブジェクトは、.auth() ユーザーを認証するメソッドを含む名前空間.その一つがsignInWithCustomToken , これにより、サードパーティのプロバイダがClerkのように認証されたユーザデータをファイアベースに渡すことができます.
このカスタムトークンはどこから来るのでしょうか?
ClerkにFireBaseの統合を設定した後、getToken Clerkユーザーオブジェクトのメソッド.
組み合わせると、それはちょうど2行のコードです.

const firebaseToken = await clerkUser.getToken("firebase");
await firebase.auth().signInWithCustomToken(firebaseToken);

その時点から、ユーザーは認証され、特定のFireBaseユーザーの権限を必要とするすべてのアクションを完了できます.
私たちの行動でこれを見ることができますuseRecipes hook 実装.あなたがこれらの2つの線を削除するならば、店員ユーザがfirebaseで認証されないので、要求は失敗します.(覚えておいてください)allow read: if request.auth != null; - 認証されたユーザへのアクセスを制限する.

前進⚡

このエンドツーエンドの例では、新しいWebプロジェクトのためにどのようにClerkとFireBaseを使用できるかを示しました.FireBaseは、例外的な開発プラットフォームであり、私たちは本当にこの統合でビルドを参照してくださいに興奮している.
任意のフィードバックをしている場合、トラブルに実行したり、ちょうどあなたが構築したものを共有したい-私たちはあなたから聞いてみたい!我々のコミュニティの上でTwitterで我々に手を伸ばしてくださいDiscord server , またはsupport channels .