Skip to content

Commit 04d44f2

Browse files
PoojaB26leighajarett
PoojaB26
and
leighajarett
authored
State Management Intro - Leigha updates (#27)
* updates (cherry picked from commit 5611b5b) * Updates * Add links to state management doc --------- Co-authored-by: leighajarett <[email protected]>
1 parent 5a9b181 commit 04d44f2

File tree

4 files changed

+217
-2
lines changed

4 files changed

+217
-2
lines changed

‎docs/Integrations/Authentication/How-Tos/Firebase-Auth/initial-setup.md

Lines changed: 176 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,176 @@
1+
---
2+
title: Firebase Auth Setup
3+
sidebar_position: 1
4+
---
5+
6+
# Initial Setup for Enabling Firebase Authentication
7+
8+
## Enabling authentication in FlutterFlow
9+
10+
:::tip[Skip if...]
11+
...you have already enabled authentication while creating a [**new project with Firebase setup.**](..%2F..%2F..%2FFirebase%2FConnect%20to%20Firebase%20Setup.md)
12+
:::
13+
14+
To enable authentication in FlutterFlow:
15+
16+
- Open your FlutterFlow project where you are planning to use Firebase
17+
Authentication.
18+
19+
- Open **Setting and Integrations > App Settings > Authentication**.
20+
21+
- Turn on the Enable Authentication toggle and select **Authentication Type** to
22+
**Firebase**.
23+
24+
- To ensure that your users are directed to the appropriate pages based on their
25+
login status, you must set the **initial pages**.
26+
27+
<img src="imgs%2Fenable-auth-fr.png" alt="enable-auth-fr.png" />
28+
29+
### Setting Initial Pages for Authentication
30+
31+
You can specify your app's Entry Page and Logged In Page from this section.
32+
33+
#### Entry Page
34+
35+
This page will be displayed if the user is not logged in. This is
36+
typically used to display the onboarding flow or to provide the login/sign-up
37+
page.
38+
39+
#### Logged In Page
40+
41+
This page will be displayed if the user is already logged in to
42+
your app. Users are automatically navigated to the page you specify here on a
43+
successful sign-in attempt.
44+
45+
## Creating the 'users' collection
46+
47+
:::info[Prerequisities]
48+
Start by giving FlutterFlow permission to create user documents in Firestore.
49+
:::
50+
51+
The 'users' collection stores the information for authenticated users.
52+
53+
:::tip[Skip if...]
54+
...you have already enabled 'Create User Collection' while creating a new
55+
project with a Firebase setup.
56+
:::
57+
58+
- Click on the Firestore tab from the Navigation Menu (left side of your
59+
screen).
60+
61+
- Click on the **+ Create Collection** button. If you have any other collection
62+
already added, you can click on the Plus button.
63+
64+
- Enter a collection_name (this can be anything, but we recommend 'users') and
65+
click on Create button.
66+
67+
- If you enter 'users' a popup will open which asks you to populate this
68+
collection with default fields. You can click Yes, and we will add all the
69+
fields.
70+
71+
Follow the quicklink to see the steps
72+
73+
<iframe src="https://demo.arcade.software/89TZAX3avXKxRpdZH3bK?embed&show_copy_link=true" title="EcommerceFlow - FlutterFlow" frameborder="0" loading="lazy" webkitallowfullscreen mozallowfullscreen allowfullscreen allow="clipboard-write" width="100%" height="600"></iframe>
74+
75+
:::tip[Add Default Fields if skipped previously]
76+
77+
- Click on the Settings icon in the Firestore tab.
78+
79+
- Find the **Users Collection** switch and enable it.
80+
81+
- Find the **Collection** dropdown below, click on the **Unset**, and select the
82+
name of
83+
the collection you just created.
84+
85+
- Now switch to the **Collection** tab. Now you should see all the default
86+
fields.
87+
88+
<iframe src="https://www.loom.com/embed/ba977f72f606497b92ee9ff45c620451"
89+
frameborder="0" allowFullScreen style={{ width: '100%', height: '600px' }}></iframe>
90+
:::
91+
92+
To store and collect additional information or modify the default fields list,
93+
see how to add fields.
94+
95+
:::warning[ WARNING]
96+
You do not need to create a password field. This is handled internally by
97+
Firebase.
98+
:::
99+
100+
## Setup for Google or Phone sign-in setup for Android Apps
101+
102+
:::tip[OPTIONAL]
103+
If you aren't planning to use **Google** or **Phone Sign-In**, you can skip these steps.
104+
:::
105+
106+
### Generate the SHA-1 key
107+
108+
An SHA-1 key (aka the 'Secure Hash Algorithm') is required if you want to use
109+
Google Sign-in and Phone Sign-in. To learn more about the SHA-1 key, see
110+
this [link](https://developers.google.com/android/guides/client-auth).
111+
112+
:::warning[Release Guidelines]
113+
While releasing the app, make sure
114+
to [**get the key from Play Console**](https://docs.flutterflow.io/data-and-backend/firebase/authentication/phone-sign-in#release-mode).
115+
:::
116+
117+
1. Open a terminal window:
118+
119+
- **Mac**: Use the Launchpad or press (⌘ + Spacebar) for Spotlight search,
120+
type 'Terminal', and open it.
121+
122+
- **Windows**: Click the Windows icon, navigate to the 'Windows System' folder,
123+
and open 'Command Prompt' either by clicking or right-clicking it.
124+
125+
2. Copy the following command (based on your operating system) and select Enter.
126+
127+
<details>
128+
<summary>Windows</summary>
129+
<div>
130+
```keytool -list -v -keystore C:\Users\leon\.android\debug.keystore -alias androiddebugkey```
131+
132+
If you get the following error while trying the above command:
133+
134+
```ERROR:'keytool' is not recognized as an internal or external command```
135+
136+
You might not have JAVA installed on your machine. [Here](https://codewithandrea.com/articles/keytool-command-not-found-how-to-fix-windows-macos/) is the helpful link to install JAVA and remove the above issue.
137+
138+
</div>
139+
</details>
140+
141+
<details>
142+
<summary>Mac/Linux</summary>
143+
<div>
144+
```keytool -list -v \ -alias androiddebugkey -keystore ~/.android/debug.keystore```
145+
</div>
146+
</details>
147+
148+
3. After being prompted for the key password, type 'android' and press 'Enter'.
149+
Note: For security reasons, you won't see the password as you type it.
150+
4. Copy the SHA1 key.
151+
152+
#### Add the SHA-1 key in the Firebase Console
153+
154+
- Open the **Firebase console > Project Overview > Project Settings** and scroll
155+
down to Your App section.
156+
157+
- Select your Android App from the left side menu.
158+
159+
- Find the SHA certificate fingerprints section and click on the Add
160+
fingerprint.
161+
162+
- Enter the copied SHA-1 into the input box and click on Save.
163+
164+
### Regenerate config files
165+
166+
After adding the SHA-1 key you must re-generate the config files in FlutterFlow.
167+
168+
To regenerate the config files:
169+
170+
- Return to FlutterFlow. From the Navigation Menu, select **Settings &
171+
Integrations > Project Setup > Firebase**.
172+
173+
- Click on the Regenerate Config Files.
174+
175+
<img src="imgs/regerenate.png" alt="regerenate.png" />
176+

‎docs/ff-concepts/state-management/state-management.md

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
---
2+
title: State Management
3+
description: An overview of state management in FlutterFlow
4+
---
5+
6+
State management is a crucial concept focused on maintaining and controlling the *state* of an application. Simply put, it involves monitoring the changes within your app and updating the user interface to reflect these changes.
7+
8+
You can think of the UI as a function of your state variables, where changes in these variables directly influence what the UI displays.
9+
10+
In FlutterFlow, there are a few types of state variables that you can create:
11+
12+
<figure>
13+
![app stage overview](state_management_overview.png)
14+
<figcaption class="centered-caption">App State is shared across multiple pages in the application. Component State is specific to a component. Page State is shared across widgets on the page.</figcaption>
15+
</figure>
16+
17+
18+
- State variables are themselves **variables** - meaning they have a *name* and a *data type*.
19+
- They also have an initial value that is set when you create the variable.
20+
- Once you create a state variable, it's value can be used to change the configuration of widget properties - like any other variable.
21+
- You can update the value of state variables using the *Update State Variable* action.
22+
23+
You can learn more about state management from this video:
24+
<div class="video-container">
25+
<iframe src="https://www.youtube.com/embed/jD6L4xjYjJA?si=-RjniUB-K0ZsMoB1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
26+
</div>
27+
28+
<p></p>
29+
30+
:::tip
31+
To learn more about state management in FlutterFlow, read up on [**Variables**](#) and how [**Page
32+
State**](#), or
33+
[**Component State**](#) or [**App State variables**](#) are modified in FlutterFlow.
34+
:::
35+
36+
37+
38+
39+

‎docs/ff-concepts/state-management/state_management_overview.png

484 KB
Loading

‎docs/troubleshooting/push-notifications.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ toc_max_heading_level: 5
99
Push notifications play a vital role in mobile apps, letting you connect with your audience and update them on key developments. But, there are instances when push notifications fail to deliver. In this guide, we'll explore some typical problems that hinder push notifications in FlutterFlow and offer detailed instructions on how to fix them.
1010

1111

12-
![push-notifications-ff.png](push-notification-assets%2Fpush-notifications-ff.png)
12+
<img src="./push-notification-assets/push-notifications-ff.png" alt="Firebase Console" />
1313

1414
:::tip Using CodeMagic? [Skip ahead!](https://mdxjs.com/playground/)
1515

@@ -20,7 +20,7 @@ Push notifications play a vital role in mobile apps, letting you connect with yo
2020
#### 1. Ensure your subscription status hasn't changed.
2121
Head to the [Firebase Console](https://console.firebase.google.com/) and select Project Settings > Usage & Billing > Details & Settings.
2222

23-
![firebase-console.png](push-notification-assets%2Ffirebase-console.png)
23+
<img src="./push-notification-assets/firebase-console.png" alt="Firebase Console" />
2424

2525
If you see Spark listed, you will need to select Modify Plan and upgrade to a Blaze Plan.
2626

0 commit comments

Comments
 (0)