Skip to content

Fix Google Login + Place picker links + Referrals #175

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Oct 15, 2024
Merged

Fix Google Login + Place picker links + Referrals #175

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
2c0d2df
added ref link to create users collection
pinkeshmars Oct 10, 2024
380c768
fix links in place picker widget
pinkeshmars Oct 10, 2024
5e90be9
Update referral images
pinkeshmars Oct 11, 2024
d27eaec
Merge branch 'main' of https://github.com/FlutterFlow/flutterflow-doc…
pinkeshmars Oct 15, 2024
549652b
Address review comments
pinkeshmars Oct 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added docs/accounts-billing/imgs/referral-link.png
View file
Open in desktop
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we shouldnt use the link with beta, may confuse users, please redo the screenshots from app.ff.io

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed.

Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/accounts-billing/imgs/track-referrals.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions docs/accounts-billing/referral-program.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ Your personal referral code is listed on your [My Account Page](https://app.flut
1. Navigate to the [My Account Page](https://app.flutterflow.io/account) and scroll down to the **Referrals** section.
2. To copy your referral code, press the copy icon.

![img_19.png](imgs/img_19.png)
![referral-link](imgs/referral-link.png)

### How To Track How Many People Have Signed Up Using Your Referral Code

Expand All @@ -30,7 +30,7 @@ You can track your referrals in the **Referrals** section on the [My Account Pag
* **Signed Up:** How many people have signed up for FluterFlow using your referral link.
* **Subscribed:** How many people have subscribed to FlutterFlow Pro or Standard using your referral link.

![img_20.png](imgs/img_20.png)
![track-referrals.png](imgs/track-referrals.png)

### I forgot to sign-up using the referral link, can I add this after creating account?

Expand Down
39 changes: 17 additions & 22 deletions docs/ff-integrations/authentication/firebase-auth/google-login.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,7 @@ Before getting started with this section:

## Enable Google Sign-in Provider in Firebase

- Open the Firebase Console and click on Authentication
- Follow the steps to enable Google Sign in for your Firebase project
Open the **Firebase Console**, click on **Authentication** and then follow the steps below to enable Google Sign in for your Firebase project.

<iframe src="https://demo.arcade.software/I50vTFEEyhXfU82yLick?embed&show_copy_link=true" title="EcommerceFlow - Authentication - Sign-in method - Firebase console" frameborder="0" loading="lazy" webkitallowfullscreen mozallowfullscreen allowfullscreen allow="clipboard-write" width="100%" height="600"></iframe>

Expand All @@ -37,21 +36,17 @@ You can create your own or use the one from page templates.

### Add Login Action

- On your Google Login button, select **Actions** from the properties panel (the
right menu) and select Add Action.
- Search and select the Log In (under **Backend/Database > Firebase
1. On your Google Login button, select **Actions** from the properties panel (the
right menu) and select **Add Action**.
2. Search and select the Log In (under **Backend/Database > Firebase
Authentication**) action.
- Set Auth Provider to Google.
3. Set **Auth Provider** to **Google**.
4. Enable **Create User Document** and set the **Collection** to **users**. After successful login, this will insert the user's details, such as email, name, and photo, into the *users* collection. If you haven’t already, see how to [create *users* collection](auth-initial-setup.md#creating-the-users-collection). **Note** that, If a user already exists, it won't add details again.
Copy link
Collaborator

@PoojaB26 PoojaB26 Oct 14, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
4. Enable **Create User Document** and set the **Collection** to **users**. After successful login, this will insert the user's details, such as email, name, and photo, into the *users* collection. If you haven’t already, see how to [create *users* collection](auth-initial-setup.md#creating-the-users-collection). **Note** that, If a user already exists, it won't add details again.
4. Enable **Create User Document** and set the **Collection** to **users**. After successful login, this will insert the user's details, such as email, name, and photo, into the *users* collection. **Note** that, if a user exists already, it won't add the details again.
If you haven’t already, see how to [create *users* collection](auth-initial-setup.md#creating-the-users-collection).

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done.


<iframe src="https://demo.arcade.software/CBVoec46awMc3yNGLuVJ?embed&show_copy_link=true" title="EcommerceFlow - FlutterFlow" frameborder="0" loading="lazy" webkitallowfullscreen mozallowfullscreen allowfullscreen allow="clipboard-write" width="100%" height="600"></iframe>

- Enable the **Create User Document** and set the **Collection** to **users**.
After successful login, this will insert the user's account details, such as
email,
name, and photo, into the 'users' collection. If a user already exists, it
won't add details again.

:::info
:::tip
To let users log out of your app, you can use the [**Logout**](auth-actions.md#logout-action) action.
:::

Expand All @@ -69,29 +64,29 @@ To let users log out of your app, you can use the [**Logout**](auth-actions.md#l

2. To add in Firebase console:

- Open the Firebase console and click on Authentication and select the
1. Open the Firebase console and click on Authentication and select the
Setting tab.

- Select **Authorized domains** from the left side menu.
2. Select **Authorized domains** from the left side menu.

- Click **Add domain**.
3. Click **Add domain**.

3. To add in Google cloud console:

- Head over to
1. Head over to
your [Project Credentials](https://console.cloud.google.com/apis/credentials?project=_) page.

- Ensure you are on the correct project. In our case, we are using the
2. Ensure you are on the correct project. In our case, we are using the
[EcommerceFlow demo project](https://bit.ly/ff-docs-demo-v1), it will be different for you.

![credential-page.png](../imgs/credential-page.png)
![credential-page.png](../imgs/credential-page.png)

- Under the '**OAuth 2.0 Client IDs**', select '**Web client** (auto created by
3. Under the '**OAuth 2.0 Client IDs**', select '**Web client** (auto created by
Google Service)'.

- Under the '**Authorized JavaScript origins**', click ADD URI and add both the
4. Under the '**Authorized JavaScript origins**', click ADD URI and add both the
URL.
- Similarly, under the '**Authorized redirect URIs**', click ADD URI, add both
5. Similarly, under the '**Authorized redirect URIs**', click ADD URI, add both
the URL and append '/__/auth/handler' at the end.

<iframe src="https://www.loom.com/embed/efd5b99b858d4de8bca55452c6e1d20c" frameborder="0"
Expand All @@ -112,6 +107,6 @@ allowFullScreen style={{ width: '100%', height: '600px' }}></iframe>
### Verify user created in Firebase Dashboard

To confirm the successful integration of Google authentication and the creation of users, navigate
to your Firebase project > Authentication > Users and check the user entries.
to your **Firebase project > Authentication > Users** and check the entries.

![verify-google-auth-users.png](../imgs/verify-google-auth-users.png)
4 changes: 2 additions & 2 deletions docs/ff-integrations/maps/google-maps/place-picker-widget.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,9 +46,9 @@ Here's an example from the Demo app:
<p></p>

:::note[Prerequisites]
- Ensure you have enabled **Places API** from Cloud console. [**Check out the Setup docs.**](generate-maps-keys)
- Ensure you have enabled **Places API** from Cloud console. [**Check out the Setup docs.**](generate-maps-keys.md#add-places-apis)
- Enable **Google Maps Platform Billing** via your Cloud console. Please note: Failing to enable the Google Maps Platform Billing will not show any place in an autocomplete list.
- Add API keys as suggested in [**Getting Started**](generate-maps-keys) guide.
- Add API keys as suggested in [**Getting Started**](generate-maps-keys.md#add-keys-to-flutterflow) guide.

:::
<figure>
Expand Down