steps fix

cloudflare · Sep 18, 2024 · a9363be · a9363be
1 parent d8b6c6a
commit a9363be
Showing 1 changed file with 53 additions and 67 deletions.
diff --git a/src/content/docs/turnstile/extensions/google-firebase.mdx b/src/content/docs/turnstile/extensions/google-firebase.mdx
@@ -7,8 +7,6 @@ sidebar:
 
 ---
 
-import { Steps } from "~/components";
-
 Turnstile is [available as an extension](https://extensions.dev/extensions/cloudflare/cloudflare-turnstile-app-check-provider) with [Google's Firebase](https://firebase.google.com/) platform as an [App Check](https://firebase.google.com/docs/app-check) provider. You can leverage Cloudflare Turnstile's bot detection and challenge capabilities to ensure that requests to your Firebase backend services are verified and only authentic human visitors can interact with your application.
 
 Google Firebase is a comprehensive app development platform that provides a variety of tools and services to help developers build, improve, and grow their mobile and web applications.
@@ -17,13 +15,11 @@ Firebase App Check helps protect Firebase resources like Cloud Firestore, Realti
 
 ## Set up a Google Firebase project
 
-<Steps>
 1. Create a Firebase project by going to the [Firebase Console](https://console.firebase.google.com/).
 2. Select **Add Project** and follow the prompts to create a new project.
 3. Add an app to your project by selecting your project.
 4. In the project overview, select **Add App** and choose the platform: **Web**.
 5. [Register your app](https://firebase.google.com/docs/web/setup?hl=en&authuser=0#register-app) and follow the guide to get your Firebase configuration. 
-</Steps>
 
 :::note
 
@@ -32,108 +28,98 @@ It is important to register your web app first to connect it with Turnstile late
 
 ## Set up Cloudflare Turnstile
 
-<Steps>
 1. Create a Cloudflare Turnstile site by going to the [Cloudflare Turnstile dashboard](https://dash.cloudflare.com/?to=/:account/turnstile). 
 2. Create a new widget and get the [sitekey and secret key](/turnstile/get-started/#get-a-sitekey-and-secret-key).
    - The domain you configure with the Turnstile widget should be the domain of your web app.
    - The [widget mode](/turnstile/concepts/widget/) must be **Invisible**.
-</Steps>
 
 ## Integrate Firebase App Check with Turnstile
 
 ### Enable App Check in Firebase
 
-<Steps>
 1. Go to [Cloudflare Turnstile in the Firebase Extensions hub](https://extensions.dev/extensions/cloudflare/cloudflare-turnstile-app-check-provider).
 2. Install the Cloudflare Turnstile extension to your Firebase project.
 3. Enable [Cloud Functions](https://cloud.google.com/functions?hl=en), [Artifact Registry](https://cloud.google.com/artifact-registry), and [Secret Manager](https://cloud.google.com/security/products/secret-manager?hl=en).
 4. Enter the secret key from Cloudflare Turnstile and your Firebase App ID.
 5. Select **Install extension**.
-</Steps>
 
 ### Grant access to the Cloudflare extension 
 
-<Steps>
 1. Grant access to the Cloudflare extension under the IAM section of your project by selecting **Grant Access** under **View by Principals**.
 2. Select `ext-cloudflare-turnstile` from the dropdown menu.
 3. When filtering the token, select **Service Account Token Creator**.
-</Steps>
 
 ### Configure Firebase in your app with Turnstile
 
-<Steps>
-1. Create an `index.ts` file and add your Firebase configuration.
-
-    ```js
+1. Create an `index.ts` file.
+2. Add your Firebase configuration.
 
-    import { initializeApp } from "firebase/app";
-    import { getAppCheck, initializeAppCheck } from "firebase/app-check";
-    import {
-        CloudflareProviderOptions,
-    } from '@cloudflare/turnstile-firebase-app-check';
+```js
+import { initializeApp } from "firebase/app";
+import { getAppCheck, initializeAppCheck } from "firebase/app-check";
+import {
+    CloudflareProviderOptions,
+} from '@cloudflare/turnstile-firebase-app-check';
 
-    const firebaseConfig = {
-    apiKey: "YOUR_API_KEY",
-    authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
-    projectId: "YOUR_PROJECT_ID",
-    storageBucket: "YOUR_PROJECT_ID.appspot.com",
-    messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
-    appId: "YOUR_APP_ID",
-    };
+const firebaseConfig = {
+apiKey: "YOUR_API_KEY",
+authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
+projectId: "YOUR_PROJECT_ID",
+storageBucket: "YOUR_PROJECT_ID.appspot.com",
+messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
+appId: "YOUR_APP_ID",
+};
 
-    const app = initializeApp(firebaseConfig);
+const app = initializeApp(firebaseConfig);
 
-    // Initialize App Check
-    const siteKey = 'YOUR-SITEKEY';
-    const HTTP_ENDPOINT = '${function:ext-cloudflare-turnstile-app-check-provider-tokenExchange.url}';
+// Initialize App Check
+const siteKey = 'YOUR-SITEKEY';
+const HTTP_ENDPOINT = '${function:ext-cloudflare-turnstile-app-check-provider-tokenExchange.url}';
 
-    const cpo = new CloudflareProviderOptions(HTTP_ENDPOINT, siteKey);
-    const provider = new CustomProvider(cpo);
+const cpo = new CloudflareProviderOptions(HTTP_ENDPOINT, siteKey);
+const provider = new CustomProvider(cpo);
 
-    initializeAppCheck(app, { provider });
+initializeAppCheck(app, { provider });
 
-    // retrieve App Check token from Cloudflare Turnstile
-    cpo.getToken().then(({ token }) => {
-        document.getElementById('app-check-token').innerHTML = token;
-    });
+// retrieve App Check token from Cloudflare Turnstile
+cpo.getToken().then(({ token }) => {
+    document.getElementById('app-check-token').innerHTML = token;
+});
 
-    ```
-</Steps>
+```
 
 ### Verify the App Check token in your web application 
 
-<Steps>
-1. To verify the App Check token in your web application, refer to Firebase's [Token Verification guide](https://firebase.google.com/docs/app-check/custom-resource-backend?hl=en#verification). 
+To verify the App Check token in your web application, refer to Firebase's [Token Verification guide](https://firebase.google.com/docs/app-check/custom-resource-backend?hl=en#verification). 
 
-    ```js
-    import express from "express";
-    import { initializeApp } from "firebase-admin/app";
-    import { getAppCheck } from "firebase-admin/app-check";
+```js
+import express from "express";
+import { initializeApp } from "firebase-admin/app";
+import { getAppCheck } from "firebase-admin/app-check";
 
-    const expressApp = express();
-    const firebaseApp = initializeApp();
+const expressApp = express();
+const firebaseApp = initializeApp();
 
-    const appCheckVerification = async (req, res, next) => {
-        const appCheckToken = req.header("X-Firebase-AppCheck");
+const appCheckVerification = async (req, res, next) => {
+    const appCheckToken = req.header("X-Firebase-AppCheck");
 
-        if (!appCheckToken) {
-            res.status(401);
-            return next("Unauthorized");
-        }
+    if (!appCheckToken) {
+        res.status(401);
+        return next("Unauthorized");
+    }
 
-        try {
-            const appCheckClaims = await getAppCheck().verifyToken(appCheckToken);
+    try {
+        const appCheckClaims = await getAppCheck().verifyToken(appCheckToken);
 
-            // If verifyToken() succeeds, continue with the next middleware function in the stack.
-            return next();
-        } catch (err) {
-            res.status(401);
-            return next("Unauthorized");
-        }
+        // If verifyToken() succeeds, continue with the next middleware function in the stack.
+        return next();
+    } catch (err) {
+        res.status(401);
+        return next("Unauthorized");
     }
+}
 
-    expressApp.get("/yourApiEndpoint", [appCheckVerification], (req, res) => {
-        // Handle request.
-    });
-    ```
-</Steps>
+expressApp.get("/yourApiEndpoint", [appCheckVerification], (req, res) => {
+    // Handle request.
+});
+```