Skip to content

Commit 34411cd

Browse files
pinkeshmarspinkeshmars
committed
Added crashlytics and App check
1 parent 7a7cded commit 34411cd

File tree

5 files changed

+211
-0
lines changed

5 files changed

+211
-0
lines changed

‎docs/ff-integrations/firebase/app-check.md

Lines changed: 187 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,187 @@
1+
---
2+
slug: /integrations/firebase/app-check
3+
title: App Check
4+
description: Learn how to integrate Firebase App Check in your FlutterFlow app.
5+
tags: [FlutterFlow, Firebase, App Check]
6+
sidebar_position: 3
7+
keywords: [FlutterFlow, Firebase, App Check]
8+
---
9+
import Tabs from '@theme/Tabs';
10+
import TabItem from '@theme/TabItem';
11+
12+
# App Check
13+
[Firebase App Check](https://firebase.google.com/docs/app-check) is a new security feature for protecting the backend services of apps. It blocks traffic that comes from sources other than the registered app, ensuring that usage costs are not incurred for illegitimate usage.
14+
15+
App Check works by using attestation services, which already exist for iOS, Android, and the web. The feature can protect three different types of backends, including Firebase backends like Cloud Firestore, Google API services like Cloud Run, and API endpoints of your own server.
16+
17+
## **Adding Firebase App Check**
18+
19+
To add *Firebase App Check* to your app:
20+
21+
1. Navigate to the [Firebase Console](https://console.firebase.google.com/u/0/) > Build > App Check page.
22+
2. If this is the first time, click the **Get started** button.
23+
24+
![Get started with App Check](imgs/get-started.avif)
25+
26+
3. Now, you'll see the list of apps you have added to this Firebase project. To register attestation service(s), select the project, click **Register,** and then select attestation service.
27+
1. For Android, you can select [Play Integrity](https://developer.android.com/google/play/integrity?authuser=1) and then follow step number 2 and 3 from [here](https://firebase.google.com/docs/app-check/android/play-integrity-provider?authuser=2#project-setup).
28+
2. For iOS, you can choose from [Device Check](https://developer.apple.com/documentation/devicecheck) or [App Attest](https://developer.apple.com/documentation/devicecheck/establishing_your_app_s_integrity) and then follow step number 2 and 3 from [here](https://firebase.google.com/docs/app-check/ios/devicecheck-provider?authuser=2).
29+
3. For the Web, select [reCAPTCHA v3](https://developers.google.com/recaptcha) or [reCAPTCHA Enterprise](https://cloud.google.com/recaptcha-enterprise) and then follow steps 2 and 3 from [here](https://firebase.google.com/docs/app-check/web/recaptcha-enterprise-provider?authuser=2#project-setup). **Note**: To run the app in Run/Test mode, you must register the **Web** version of the app as well.
30+
31+
32+
<Tabs>
33+
<TabItem value="1" label="Android" default>
34+
<div style={{
35+
position: 'relative',
36+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
37+
height: 0,
38+
width: '100%'}}>
39+
<iframe
40+
src="https://www.loom.com/embed/3c1d6253d401446dafaf0de1b160b24a?sid=ec114490-1733-4d3c-bc88-b29f32a3838d"
41+
title=""
42+
style={{
43+
position: 'absolute',
44+
top: 0,
45+
left: 0,
46+
width: '100%',
47+
height: '100%',
48+
colorScheme: 'light'
49+
}}
50+
frameborder="0"
51+
loading="lazy"
52+
webkitAllowFullScreen
53+
mozAllowFullScreen
54+
allowFullScreen
55+
allow="clipboard-write">
56+
</iframe>
57+
</div>
58+
<p></p>
59+
</TabItem>
60+
<TabItem value="2" label="iOS">
61+
<div style={{
62+
position: 'relative',
63+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
64+
height: 0,
65+
width: '100%'}}>
66+
<iframe
67+
src="https://www.loom.com/embed/995f650448784ea9bc9f567e3558f24a?sid=888de56a-ca4f-4621-bf7f-eab50a69746f"
68+
title=""
69+
style={{
70+
position: 'absolute',
71+
top: 0,
72+
left: 0,
73+
width: '100%',
74+
height: '100%',
75+
colorScheme: 'light'
76+
}}
77+
frameborder="0"
78+
loading="lazy"
79+
webkitAllowFullScreen
80+
mozAllowFullScreen
81+
allowFullScreen
82+
allow="clipboard-write">
83+
</iframe>
84+
</div>
85+
<p></p>
86+
</TabItem>
87+
<TabItem value="3" label="Web">
88+
<div style={{
89+
position: 'relative',
90+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
91+
height: 0,
92+
width: '100%'}}>
93+
<iframe
94+
src="https://www.loom.com/embed/643864fcb5434e379d3e0cf32ebaebaf?sid=7c782d8e-e64d-40ea-afd6-bf339c1b6d6b"
95+
title=""
96+
style={{
97+
position: 'absolute',
98+
top: 0,
99+
left: 0,
100+
width: '100%',
101+
height: '100%',
102+
colorScheme: 'light'
103+
}}
104+
frameborder="0"
105+
loading="lazy"
106+
webkitAllowFullScreen
107+
mozAllowFullScreen
108+
allowFullScreen
109+
allow="clipboard-write">
110+
</iframe>
111+
</div>
112+
<p></p>
113+
</TabItem>
114+
</Tabs>
115+
116+
4. Ensure that enabling Firebase App Check [won't disrupt your existing legitimate users](https://firebase.google.com/docs/app-check/monitor-metrics?authuser=2).
117+
5. Now, you can select the service you want to secure. Switch to the **APIs** tab, select the service, and click **Enforce** button. A popup may open, telling you that once enabled, it will deny all requests that do not have *App Check* token. Click **Enforce** again if you are ok. **Note** that it might take up to 15 minutes to start the enforcement.
118+
119+
<div style={{
120+
position: 'relative',
121+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
122+
height: 0,
123+
width: '100%'}}>
124+
<iframe
125+
src="https://www.loom.com/embed/44403c744f854314926bdd1f5d70f017?sid=49037d52-e362-4ada-8e9a-009578b32237"
126+
title=""
127+
style={{
128+
position: 'absolute',
129+
top: 0,
130+
left: 0,
131+
width: '100%',
132+
height: '100%',
133+
colorScheme: 'light'
134+
}}
135+
frameborder="0"
136+
loading="lazy"
137+
webkitAllowFullScreen
138+
mozAllowFullScreen
139+
allowFullScreen
140+
allow="clipboard-write">
141+
</iframe>
142+
</div>
143+
<p></p>
144+
145+
6. Navigate back to FlutterFlow and open **Settings and Integrations > Project Setup > Firebase >** scroll down and expand **App Check** section **>** switch on **Enable App Check** toggle.
146+
7. You can fill out the optional details such as **reCAPTCHA Site Key** (you should have it while performing step 3.3) and [**Run/Test Mode Debug Token**](https://firebase.google.com/docs/app-check/flutter/debug-provider). To get the debug token, follow the steps below:
147+
1. Navigate to the [Firebase Console](https://console.firebase.google.com/u/0/) > Build > App Check > Apps.
148+
2. Open the app for which you want to generate the debug token.
149+
3. Click three dots icon (i.e., overflow menu icon) and select **Manage debug token**.
150+
4. Click **Add debug token**.
151+
5. Give it a **Name** and click **Generate token**.
152+
6. Copy the generated token and paste it in FlutterFlow's designated field.
153+
7. Click **Save**.
154+
155+
<div style={{
156+
position: 'relative',
157+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
158+
height: 0,
159+
width: '100%'}}>
160+
<iframe
161+
src="https://www.loom.com/embed/aa543bffaed347659e99c6554c9a89ef?sid=8e2ad513-65c1-4114-9aec-032a6b7b0c36"
162+
title=""
163+
style={{
164+
position: 'absolute',
165+
top: 0,
166+
left: 0,
167+
width: '100%',
168+
height: '100%',
169+
colorScheme: 'light'
170+
}}
171+
frameborder="0"
172+
loading="lazy"
173+
webkitAllowFullScreen
174+
mozAllowFullScreen
175+
allowFullScreen
176+
allow="clipboard-write">
177+
</iframe>
178+
</div>
179+
<p></p>
180+
181+
5. You might want to see if it works on a real device or an emulator. To run on a real device, you can set the **Android Provider** to **Play Integrity** and to run on an emulator, set it to **Debug,** and then try checking it by downloading the APK.
182+
1. If it doesn't work for *Play Integrity*, ensure you have enabled the Play Integrity API. See how to do it in step 2 [here](https://firebase.google.com/docs/app-check/android/play-integrity-provider?authuser=1&hl=en#project-setup).
183+
2. If it doesn't work for *Debug*, you can try [downloading the code](../../testing-deployment-publishing/exporting-code/ff-cli.md), following the instructions [here](https://firebase.google.com/docs/app-check/flutter/debug-provider#android), and running it locally.
184+
185+
:::tip
186+
To add the App Check on the app with the non-Firebase (i.e., your self-hosted) backend, follow the instructions [**here**](https://firebase.google.com/docs/app-check/flutter/custom-resource).
187+
:::

‎docs/ff-integrations/firebase/crashlytics.md

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
---
2+
slug: /integrations/firebase/crashlytics
3+
title: Crashlytics
4+
description: Learn how to integrate Firebase Crashlytics in your FlutterFlow app.
5+
tags: [FlutterFlow, Firebase, Crashlytics]
6+
sidebar_position: 2
7+
keywords: [FlutterFlow, Firebase, Crashlytics]
8+
---
9+
10+
# Firebase Crashlytics
11+
[Firebase Crashlytics](https://firebase.google.com/products/crashlytics) is a crash-reporting tool that helps you catch errors. It enables you to troubleshoot the issue by logging the details, such as the exact line number that caused the error, device name, OS version, and time when the crash happened.
12+
13+
To enable Firebase Crashlytics, navigate to **Settings and Integrations** > **Integrations** > **Firebase Crashlytics** and **Enable Firebase Crashlytics**.
14+
15+
Firebase Crashlytics only supports catching errors on mobile platforms (Android and iOS).
16+
17+
You can see all the logged errors/crashes inside the Crashlytics dashboard of your [Firebase console](https://console.firebase.google.com/). There, you'll see the list of crashes (with the page name and line number that caused the issue), and you can filter it by their state, signal, device type, and OS.
18+
19+
![Crashlytics dashboard](imgs/crashlytics-dashboard.avif)
20+
21+
1. Click on the issue name to see its details.
22+
2. To test the crash on your app, [download the app](../../testing-deployment-publishing/exporting-code/ff-cli.md), add a code that throws an error, and run it on a mobile device or emulator with an active internet connection.
23+
24+
![Test crash](imgs/test-crash.avif)

‎docs/ff-integrations/firebase/imgs/crashlytics-dashboard.avif

238 KB
Binary file not shown.

‎docs/ff-integrations/firebase/imgs/get-started.avif

349 KB
Binary file not shown.

‎docs/ff-integrations/firebase/imgs/test-crash.avif

147 KB
Binary file not shown.

0 commit comments

Comments
 (0)