diff --git a/docs/data-and-deployment/firebase/data-recovery.md b/docs/data-and-deployment/firebase/data-recovery.md index 2880715dc8..6d28983b19 100644 --- a/docs/data-and-deployment/firebase/data-recovery.md +++ b/docs/data-and-deployment/firebase/data-recovery.md @@ -6,7 +6,7 @@ ReVISit stores study and participant data in Firebase, which is backed by Google By default, Object Versioning is disabled for Firebase storage buckets. Without it, there is still a **one-week soft delete recovery window** in which data can be restored. ::: -reVISit data stored with Firebase lives in Google Cloud services: +ReVISit data stored with Firebase lives in Google Cloud services: - Study and participant records are stored in **Cloud Firestore**. - Files (for example, audio and screen recordings) are stored in **Cloud Storage for Firebase**, which uses a **Google Cloud Storage bucket**. @@ -20,10 +20,13 @@ Every noncurrent object version is stored and billed until removed (manually or 1. Enable Object Versioning on your bucket: - Open the [Google Cloud Console](https://console.cloud.google.com/). - Go to **Cloud Storage** -> **Buckets** -> your Firebase bucket. + ![Google Cloud Storage buckets page with a Firebase bucket selected](./img/data-recovery/step1.png) - Open the **Protection** tab and enable **Object versioning**. + ![Google Cloud Storage Protection tab with Object versioning](./img/data-recovery/step2.png) 2. View versions for one object: - In the bucket's **Objects** tab, change **Show** to **Live and noncurrent objects**. - Click the object name. + ![Google Cloud Storage Objects tab showing live and noncurrent object versions](./img/data-recovery/step3.png) - Open the **Version history** tab to see each generation. 3. (Optional) Restore an older version from that same version history view. diff --git a/docs/data-and-deployment/firebase/enabling-authentication.md b/docs/data-and-deployment/firebase/enabling-authentication.md index fb2805451f..1909e8dd6f 100644 --- a/docs/data-and-deployment/firebase/enabling-authentication.md +++ b/docs/data-and-deployment/firebase/enabling-authentication.md @@ -7,47 +7,50 @@ In order to use authentication, you must have a Firebase application already con ## Enabling Authentication in Firebase -Start by navigating to your Firebase application dashboard. In the left-hand sidebar, choose the 'Authentication' tab. - -![Console](./img/auth-1.jpg) +Start by navigating to your Firebase application dashboard. In the left-hand sidebar, choose the "Authentication" tab. Once here, choose the "Sign-in method" in the top sidebar. Here we can add additional providers for signing in. ReVISit only allows for Google SSO. Click on "Add New Provider". -![Console](./img/auth-2.jpg) +![Firebase Authentication sign-in method page](./img/auth1.png) In the provider section, click on "Google". -![Console](./img/auth-3.jpg) +![Firebase provider selection page with Google highlighted](./img/auth2.png) -Upon clicking "enable", you will be prompted with providing some information about the application. You can leave these as their defaults. Click "save" and then Google SSO will be enabled in your application immediately. +Upon clicking "Enable", you will be prompted with providing some information about the application. You can leave these as their defaults. Click "Save" and then Google SSO will be enabled in your application immediately. -![Console](./img/auth-4.jpg) +![Firebase Google sign-in provider setup page](./img/auth3.png) ## Adding Authorized Domains Once you have deployed your reVISit application to a website, you'll need to ensure that Google SSO is authorized to redirect back to your website once a user has signed in. To do this, navigate to the "Authentication" section of your Firebase application. In the "Settings" tab you will see an "Authorized Domains" section. Add your domain name(s) using the "Add domain" button on the right. +![Firebase authorized domains settings page](./img/auth4.png) + ## Enabling Authentication in reVISit :::warning Note that if your application has been deployed but you have _not_ added your custom authorized domain, then attempting to enable authentication will result in an error. ::: -Through the settings cog on the right of your reVISit application, navigate to the "settings" page. Here, you will see that authentication will be currently disabled with a button to enable authentication. +Through the settings cog on the right side of your reVISit application, navigate to the "Settings" page. Authentication will be disabled by default, with a button to enable it. + +When you first enable authentication, you will be prompted to sign in using Google SSO. The account you choose will automatically be added as a user. Any other account that attempts to log in to reVISit and access protected routes will be redirected to the login screen. + -When you first enable authentication, you will be prompted to sign in using Google SSO. The account chosen will automatically be added as a user. Any other account attempting to log in to reVISit and access these protected routes will be redirected to the login screen. +![ReVISit settings page with Google sign-in](./img/auth5.png) ## Manage Administrators in reVISit ### Adding Additional Users -To add another administrator, simply navigate to the settings page (where you enabled authentication) and click on the "Add User" icon to the right of the "Enabled Users" section. Enter the Google account email for the user and click save. They will now be an administrator and will immediately be able to log into your reVISit application. +To add another administrator, simply navigate to the Settings page (where you enabled authentication) and click on the "Add User" icon to the right of the "Enabled Users" section. Enter the Google account email for the user and click "Save". They will now be an administrator and will immediately be able to log into your reVISit application. ![Add User](./../img/manage_admin/add_user.png) ### Removing A User -In the "Enabled Users" section, you will see the "delete" icon to the right of each user aside from yourself. Any administrator is capable of deleting any user from the reVISit system. The only restriction is that you cannot delete yourself and there can never be less than one user. +In the "Enabled Users" section, you will see the "Delete" icon to the right of each user except yourself. Any administrator can delete any other user from the reVISit system. The only restrictions are that you cannot delete yourself and there must always be at least one user. ![Remove User](./../img/manage_admin/remove_user.png) @@ -59,4 +62,4 @@ import StructuredLinks from '@site/src/components/StructuredLinks/StructuredLink {name: "Firebase Setup", url: "../setup"}, {name: "Firebase Authentication", url: "https://firebase.google.com/products/auth"}, ]} -/> \ No newline at end of file +/> diff --git a/docs/data-and-deployment/firebase/img/auth-1.jpg b/docs/data-and-deployment/firebase/img/auth-1.jpg deleted file mode 100644 index 0453a4d152..0000000000 Binary files a/docs/data-and-deployment/firebase/img/auth-1.jpg and /dev/null differ diff --git a/docs/data-and-deployment/firebase/img/auth-2.jpg b/docs/data-and-deployment/firebase/img/auth-2.jpg deleted file mode 100644 index 5eb3c418c9..0000000000 Binary files a/docs/data-and-deployment/firebase/img/auth-2.jpg and /dev/null differ diff --git a/docs/data-and-deployment/firebase/img/auth-3.jpg b/docs/data-and-deployment/firebase/img/auth-3.jpg deleted file mode 100644 index 53e6128590..0000000000 Binary files a/docs/data-and-deployment/firebase/img/auth-3.jpg and /dev/null differ diff --git a/docs/data-and-deployment/firebase/img/auth-4.jpg b/docs/data-and-deployment/firebase/img/auth-4.jpg deleted file mode 100644 index ba508d1482..0000000000 Binary files a/docs/data-and-deployment/firebase/img/auth-4.jpg and /dev/null differ diff --git a/docs/data-and-deployment/firebase/img/auth1.png b/docs/data-and-deployment/firebase/img/auth1.png new file mode 100644 index 0000000000..2bace757bd Binary files /dev/null and b/docs/data-and-deployment/firebase/img/auth1.png differ diff --git a/docs/data-and-deployment/firebase/img/auth2.png b/docs/data-and-deployment/firebase/img/auth2.png new file mode 100644 index 0000000000..31e24ec998 Binary files /dev/null and b/docs/data-and-deployment/firebase/img/auth2.png differ diff --git a/docs/data-and-deployment/firebase/img/auth3.png b/docs/data-and-deployment/firebase/img/auth3.png new file mode 100644 index 0000000000..9ad8494da4 Binary files /dev/null and b/docs/data-and-deployment/firebase/img/auth3.png differ diff --git a/docs/data-and-deployment/firebase/img/auth4.png b/docs/data-and-deployment/firebase/img/auth4.png new file mode 100644 index 0000000000..ab16e4413d Binary files /dev/null and b/docs/data-and-deployment/firebase/img/auth4.png differ diff --git a/docs/data-and-deployment/firebase/img/auth5.png b/docs/data-and-deployment/firebase/img/auth5.png new file mode 100644 index 0000000000..25c28e2132 Binary files /dev/null and b/docs/data-and-deployment/firebase/img/auth5.png differ diff --git a/docs/data-and-deployment/firebase/img/data-recovery/step1.png b/docs/data-and-deployment/firebase/img/data-recovery/step1.png new file mode 100644 index 0000000000..7e372ce78f Binary files /dev/null and b/docs/data-and-deployment/firebase/img/data-recovery/step1.png differ diff --git a/docs/data-and-deployment/firebase/img/data-recovery/step2.png b/docs/data-and-deployment/firebase/img/data-recovery/step2.png new file mode 100644 index 0000000000..4932b9e945 Binary files /dev/null and b/docs/data-and-deployment/firebase/img/data-recovery/step2.png differ diff --git a/docs/data-and-deployment/firebase/img/data-recovery/step3.png b/docs/data-and-deployment/firebase/img/data-recovery/step3.png new file mode 100644 index 0000000000..bd8a24f674 Binary files /dev/null and b/docs/data-and-deployment/firebase/img/data-recovery/step3.png differ diff --git a/docs/data-and-deployment/firebase/img/console.png b/docs/data-and-deployment/firebase/img/enabling-authentication/console.png similarity index 100% rename from docs/data-and-deployment/firebase/img/console.png rename to docs/data-and-deployment/firebase/img/enabling-authentication/console.png diff --git a/docs/data-and-deployment/firebase/img/demo.png b/docs/data-and-deployment/firebase/img/enabling-authentication/demo.png similarity index 100% rename from docs/data-and-deployment/firebase/img/demo.png rename to docs/data-and-deployment/firebase/img/enabling-authentication/demo.png diff --git a/docs/data-and-deployment/firebase/img/firebase_steps/step20.jpg b/docs/data-and-deployment/firebase/img/enabling-authentication/recaptcha1.jpg similarity index 100% rename from docs/data-and-deployment/firebase/img/firebase_steps/step20.jpg rename to docs/data-and-deployment/firebase/img/enabling-authentication/recaptcha1.jpg diff --git a/docs/data-and-deployment/firebase/img/firebase_steps/step21.jpg b/docs/data-and-deployment/firebase/img/enabling-authentication/recaptcha2.jpg similarity index 100% rename from docs/data-and-deployment/firebase/img/firebase_steps/step21.jpg rename to docs/data-and-deployment/firebase/img/enabling-authentication/recaptcha2.jpg diff --git a/docs/data-and-deployment/firebase/img/enabling-authentication/step1.png b/docs/data-and-deployment/firebase/img/enabling-authentication/step1.png new file mode 100644 index 0000000000..a8e7d13324 Binary files /dev/null and b/docs/data-and-deployment/firebase/img/enabling-authentication/step1.png differ diff --git a/docs/data-and-deployment/firebase/img/enabling-authentication/step10.png b/docs/data-and-deployment/firebase/img/enabling-authentication/step10.png new file mode 100644 index 0000000000..01fbc6a3c1 Binary files /dev/null and b/docs/data-and-deployment/firebase/img/enabling-authentication/step10.png differ diff --git a/docs/data-and-deployment/firebase/img/enabling-authentication/step11.png b/docs/data-and-deployment/firebase/img/enabling-authentication/step11.png new file mode 100644 index 0000000000..0ece2dfc9e Binary files /dev/null and b/docs/data-and-deployment/firebase/img/enabling-authentication/step11.png differ diff --git a/docs/data-and-deployment/firebase/img/enabling-authentication/step12.png b/docs/data-and-deployment/firebase/img/enabling-authentication/step12.png new file mode 100644 index 0000000000..fa9ee6f8b9 Binary files /dev/null and b/docs/data-and-deployment/firebase/img/enabling-authentication/step12.png differ diff --git a/docs/data-and-deployment/firebase/img/enabling-authentication/step13.png b/docs/data-and-deployment/firebase/img/enabling-authentication/step13.png new file mode 100644 index 0000000000..23c11812be Binary files /dev/null and b/docs/data-and-deployment/firebase/img/enabling-authentication/step13.png differ diff --git a/docs/data-and-deployment/firebase/img/enabling-authentication/step14.png b/docs/data-and-deployment/firebase/img/enabling-authentication/step14.png new file mode 100644 index 0000000000..feb9bbd32e Binary files /dev/null and b/docs/data-and-deployment/firebase/img/enabling-authentication/step14.png differ diff --git a/docs/data-and-deployment/firebase/img/enabling-authentication/step15.png b/docs/data-and-deployment/firebase/img/enabling-authentication/step15.png new file mode 100644 index 0000000000..07650eb95d Binary files /dev/null and b/docs/data-and-deployment/firebase/img/enabling-authentication/step15.png differ diff --git a/docs/data-and-deployment/firebase/img/enabling-authentication/step16.png b/docs/data-and-deployment/firebase/img/enabling-authentication/step16.png new file mode 100644 index 0000000000..4a47cde2f7 Binary files /dev/null and b/docs/data-and-deployment/firebase/img/enabling-authentication/step16.png differ diff --git a/docs/data-and-deployment/firebase/img/enabling-authentication/step17.png b/docs/data-and-deployment/firebase/img/enabling-authentication/step17.png new file mode 100644 index 0000000000..88cd04c575 Binary files /dev/null and b/docs/data-and-deployment/firebase/img/enabling-authentication/step17.png differ diff --git a/docs/data-and-deployment/firebase/img/enabling-authentication/step18.png b/docs/data-and-deployment/firebase/img/enabling-authentication/step18.png new file mode 100644 index 0000000000..67ee970193 Binary files /dev/null and b/docs/data-and-deployment/firebase/img/enabling-authentication/step18.png differ diff --git a/docs/data-and-deployment/firebase/img/enabling-authentication/step19.png b/docs/data-and-deployment/firebase/img/enabling-authentication/step19.png new file mode 100644 index 0000000000..fda33edfec Binary files /dev/null and b/docs/data-and-deployment/firebase/img/enabling-authentication/step19.png differ diff --git a/docs/data-and-deployment/firebase/img/enabling-authentication/step2.png b/docs/data-and-deployment/firebase/img/enabling-authentication/step2.png new file mode 100644 index 0000000000..9f6234300a Binary files /dev/null and b/docs/data-and-deployment/firebase/img/enabling-authentication/step2.png differ diff --git a/docs/data-and-deployment/firebase/img/enabling-authentication/step20.png b/docs/data-and-deployment/firebase/img/enabling-authentication/step20.png new file mode 100644 index 0000000000..d0ce9e7751 Binary files /dev/null and b/docs/data-and-deployment/firebase/img/enabling-authentication/step20.png differ diff --git a/docs/data-and-deployment/firebase/img/enabling-authentication/step21.png b/docs/data-and-deployment/firebase/img/enabling-authentication/step21.png new file mode 100644 index 0000000000..fb439f68b3 Binary files /dev/null and b/docs/data-and-deployment/firebase/img/enabling-authentication/step21.png differ diff --git a/docs/data-and-deployment/firebase/img/enabling-authentication/step22.png b/docs/data-and-deployment/firebase/img/enabling-authentication/step22.png new file mode 100644 index 0000000000..571a90c371 Binary files /dev/null and b/docs/data-and-deployment/firebase/img/enabling-authentication/step22.png differ diff --git a/docs/data-and-deployment/firebase/img/enabling-authentication/step23.png b/docs/data-and-deployment/firebase/img/enabling-authentication/step23.png new file mode 100644 index 0000000000..277dd072c4 Binary files /dev/null and b/docs/data-and-deployment/firebase/img/enabling-authentication/step23.png differ diff --git a/docs/data-and-deployment/firebase/img/enabling-authentication/step24.png b/docs/data-and-deployment/firebase/img/enabling-authentication/step24.png new file mode 100644 index 0000000000..cd94963445 Binary files /dev/null and b/docs/data-and-deployment/firebase/img/enabling-authentication/step24.png differ diff --git a/docs/data-and-deployment/firebase/img/enabling-authentication/step25.png b/docs/data-and-deployment/firebase/img/enabling-authentication/step25.png new file mode 100644 index 0000000000..ebfed0cba2 Binary files /dev/null and b/docs/data-and-deployment/firebase/img/enabling-authentication/step25.png differ diff --git a/docs/data-and-deployment/firebase/img/enabling-authentication/step26.png b/docs/data-and-deployment/firebase/img/enabling-authentication/step26.png new file mode 100644 index 0000000000..816d9a1431 Binary files /dev/null and b/docs/data-and-deployment/firebase/img/enabling-authentication/step26.png differ diff --git a/docs/data-and-deployment/firebase/img/enabling-authentication/step27.png b/docs/data-and-deployment/firebase/img/enabling-authentication/step27.png new file mode 100644 index 0000000000..cb2c3c0833 Binary files /dev/null and b/docs/data-and-deployment/firebase/img/enabling-authentication/step27.png differ diff --git a/docs/data-and-deployment/firebase/img/enabling-authentication/step28.png b/docs/data-and-deployment/firebase/img/enabling-authentication/step28.png new file mode 100644 index 0000000000..545bb40759 Binary files /dev/null and b/docs/data-and-deployment/firebase/img/enabling-authentication/step28.png differ diff --git a/docs/data-and-deployment/firebase/img/enabling-authentication/step29.png b/docs/data-and-deployment/firebase/img/enabling-authentication/step29.png new file mode 100644 index 0000000000..63b1f43de9 Binary files /dev/null and b/docs/data-and-deployment/firebase/img/enabling-authentication/step29.png differ diff --git a/docs/data-and-deployment/firebase/img/enabling-authentication/step3.png b/docs/data-and-deployment/firebase/img/enabling-authentication/step3.png new file mode 100644 index 0000000000..d2f7490599 Binary files /dev/null and b/docs/data-and-deployment/firebase/img/enabling-authentication/step3.png differ diff --git a/docs/data-and-deployment/firebase/img/enabling-authentication/step30.png b/docs/data-and-deployment/firebase/img/enabling-authentication/step30.png new file mode 100644 index 0000000000..92544c702f Binary files /dev/null and b/docs/data-and-deployment/firebase/img/enabling-authentication/step30.png differ diff --git a/docs/data-and-deployment/firebase/img/enabling-authentication/step31.png b/docs/data-and-deployment/firebase/img/enabling-authentication/step31.png new file mode 100644 index 0000000000..080124bf15 Binary files /dev/null and b/docs/data-and-deployment/firebase/img/enabling-authentication/step31.png differ diff --git a/docs/data-and-deployment/firebase/img/enabling-authentication/step4.png b/docs/data-and-deployment/firebase/img/enabling-authentication/step4.png new file mode 100644 index 0000000000..920d071453 Binary files /dev/null and b/docs/data-and-deployment/firebase/img/enabling-authentication/step4.png differ diff --git a/docs/data-and-deployment/firebase/img/enabling-authentication/step5.png b/docs/data-and-deployment/firebase/img/enabling-authentication/step5.png new file mode 100644 index 0000000000..dc47a328d0 Binary files /dev/null and b/docs/data-and-deployment/firebase/img/enabling-authentication/step5.png differ diff --git a/docs/data-and-deployment/firebase/img/enabling-authentication/step6.png b/docs/data-and-deployment/firebase/img/enabling-authentication/step6.png new file mode 100644 index 0000000000..e2c6bc0b66 Binary files /dev/null and b/docs/data-and-deployment/firebase/img/enabling-authentication/step6.png differ diff --git a/docs/data-and-deployment/firebase/img/enabling-authentication/step7.png b/docs/data-and-deployment/firebase/img/enabling-authentication/step7.png new file mode 100644 index 0000000000..a61b1a0378 Binary files /dev/null and b/docs/data-and-deployment/firebase/img/enabling-authentication/step7.png differ diff --git a/docs/data-and-deployment/firebase/img/enabling-authentication/step8.png b/docs/data-and-deployment/firebase/img/enabling-authentication/step8.png new file mode 100644 index 0000000000..8928d50509 Binary files /dev/null and b/docs/data-and-deployment/firebase/img/enabling-authentication/step8.png differ diff --git a/docs/data-and-deployment/firebase/img/enabling-authentication/step9.png b/docs/data-and-deployment/firebase/img/enabling-authentication/step9.png new file mode 100644 index 0000000000..bc389f0512 Binary files /dev/null and b/docs/data-and-deployment/firebase/img/enabling-authentication/step9.png differ diff --git a/docs/data-and-deployment/firebase/img/firebase_steps/gsutil_step1.jpg b/docs/data-and-deployment/firebase/img/firebase_steps/gsutil_step1.jpg deleted file mode 100644 index 0eab96886d..0000000000 Binary files a/docs/data-and-deployment/firebase/img/firebase_steps/gsutil_step1.jpg and /dev/null differ diff --git a/docs/data-and-deployment/firebase/img/firebase_steps/step1.jpg b/docs/data-and-deployment/firebase/img/firebase_steps/step1.jpg deleted file mode 100644 index 4a56c40d3b..0000000000 Binary files a/docs/data-and-deployment/firebase/img/firebase_steps/step1.jpg and /dev/null differ diff --git a/docs/data-and-deployment/firebase/img/firebase_steps/step10.jpg b/docs/data-and-deployment/firebase/img/firebase_steps/step10.jpg deleted file mode 100644 index 9cabc4f684..0000000000 Binary files a/docs/data-and-deployment/firebase/img/firebase_steps/step10.jpg and /dev/null differ diff --git a/docs/data-and-deployment/firebase/img/firebase_steps/step11.jpg b/docs/data-and-deployment/firebase/img/firebase_steps/step11.jpg deleted file mode 100644 index 93d3303bce..0000000000 Binary files a/docs/data-and-deployment/firebase/img/firebase_steps/step11.jpg and /dev/null differ diff --git a/docs/data-and-deployment/firebase/img/firebase_steps/step12.jpg b/docs/data-and-deployment/firebase/img/firebase_steps/step12.jpg deleted file mode 100644 index 0453a4d152..0000000000 Binary files a/docs/data-and-deployment/firebase/img/firebase_steps/step12.jpg and /dev/null differ diff --git a/docs/data-and-deployment/firebase/img/firebase_steps/step13.jpg b/docs/data-and-deployment/firebase/img/firebase_steps/step13.jpg deleted file mode 100644 index 76b7070449..0000000000 Binary files a/docs/data-and-deployment/firebase/img/firebase_steps/step13.jpg and /dev/null differ diff --git a/docs/data-and-deployment/firebase/img/firebase_steps/step14.jpg b/docs/data-and-deployment/firebase/img/firebase_steps/step14.jpg deleted file mode 100644 index 08439d4ca1..0000000000 Binary files a/docs/data-and-deployment/firebase/img/firebase_steps/step14.jpg and /dev/null differ diff --git a/docs/data-and-deployment/firebase/img/firebase_steps/step15.jpg b/docs/data-and-deployment/firebase/img/firebase_steps/step15.jpg deleted file mode 100644 index 5131981b82..0000000000 Binary files a/docs/data-and-deployment/firebase/img/firebase_steps/step15.jpg and /dev/null differ diff --git a/docs/data-and-deployment/firebase/img/firebase_steps/step16.jpg b/docs/data-and-deployment/firebase/img/firebase_steps/step16.jpg deleted file mode 100644 index 1068200b27..0000000000 Binary files a/docs/data-and-deployment/firebase/img/firebase_steps/step16.jpg and /dev/null differ diff --git a/docs/data-and-deployment/firebase/img/firebase_steps/step17.jpg b/docs/data-and-deployment/firebase/img/firebase_steps/step17.jpg deleted file mode 100644 index 4ef012660d..0000000000 Binary files a/docs/data-and-deployment/firebase/img/firebase_steps/step17.jpg and /dev/null differ diff --git a/docs/data-and-deployment/firebase/img/firebase_steps/step18.jpg b/docs/data-and-deployment/firebase/img/firebase_steps/step18.jpg deleted file mode 100644 index ded55834d7..0000000000 Binary files a/docs/data-and-deployment/firebase/img/firebase_steps/step18.jpg and /dev/null differ diff --git a/docs/data-and-deployment/firebase/img/firebase_steps/step19.jpg b/docs/data-and-deployment/firebase/img/firebase_steps/step19.jpg deleted file mode 100644 index c70e6dabc6..0000000000 Binary files a/docs/data-and-deployment/firebase/img/firebase_steps/step19.jpg and /dev/null differ diff --git a/docs/data-and-deployment/firebase/img/firebase_steps/step2.jpg b/docs/data-and-deployment/firebase/img/firebase_steps/step2.jpg deleted file mode 100644 index 67574e525a..0000000000 Binary files a/docs/data-and-deployment/firebase/img/firebase_steps/step2.jpg and /dev/null differ diff --git a/docs/data-and-deployment/firebase/img/firebase_steps/step22.jpg b/docs/data-and-deployment/firebase/img/firebase_steps/step22.jpg deleted file mode 100644 index f7a918709b..0000000000 Binary files a/docs/data-and-deployment/firebase/img/firebase_steps/step22.jpg and /dev/null differ diff --git a/docs/data-and-deployment/firebase/img/firebase_steps/step23.jpg b/docs/data-and-deployment/firebase/img/firebase_steps/step23.jpg deleted file mode 100644 index ec4d72e79f..0000000000 Binary files a/docs/data-and-deployment/firebase/img/firebase_steps/step23.jpg and /dev/null differ diff --git a/docs/data-and-deployment/firebase/img/firebase_steps/step24.jpg b/docs/data-and-deployment/firebase/img/firebase_steps/step24.jpg deleted file mode 100644 index 68b3b106da..0000000000 Binary files a/docs/data-and-deployment/firebase/img/firebase_steps/step24.jpg and /dev/null differ diff --git a/docs/data-and-deployment/firebase/img/firebase_steps/step25.jpg b/docs/data-and-deployment/firebase/img/firebase_steps/step25.jpg deleted file mode 100644 index 3e09f19976..0000000000 Binary files a/docs/data-and-deployment/firebase/img/firebase_steps/step25.jpg and /dev/null differ diff --git a/docs/data-and-deployment/firebase/img/firebase_steps/step3.jpg b/docs/data-and-deployment/firebase/img/firebase_steps/step3.jpg deleted file mode 100644 index 08e97b6adf..0000000000 Binary files a/docs/data-and-deployment/firebase/img/firebase_steps/step3.jpg and /dev/null differ diff --git a/docs/data-and-deployment/firebase/img/firebase_steps/step4.jpg b/docs/data-and-deployment/firebase/img/firebase_steps/step4.jpg deleted file mode 100644 index fd63ebc228..0000000000 Binary files a/docs/data-and-deployment/firebase/img/firebase_steps/step4.jpg and /dev/null differ diff --git a/docs/data-and-deployment/firebase/img/firebase_steps/step5.jpg b/docs/data-and-deployment/firebase/img/firebase_steps/step5.jpg deleted file mode 100644 index a58d942dbc..0000000000 Binary files a/docs/data-and-deployment/firebase/img/firebase_steps/step5.jpg and /dev/null differ diff --git a/docs/data-and-deployment/firebase/img/firebase_steps/step6.jpg b/docs/data-and-deployment/firebase/img/firebase_steps/step6.jpg deleted file mode 100644 index cb2ca41831..0000000000 Binary files a/docs/data-and-deployment/firebase/img/firebase_steps/step6.jpg and /dev/null differ diff --git a/docs/data-and-deployment/firebase/img/firebase_steps/step7.jpg b/docs/data-and-deployment/firebase/img/firebase_steps/step7.jpg deleted file mode 100644 index c8b0b07e16..0000000000 Binary files a/docs/data-and-deployment/firebase/img/firebase_steps/step7.jpg and /dev/null differ diff --git a/docs/data-and-deployment/firebase/img/firebase_steps/step8.jpg b/docs/data-and-deployment/firebase/img/firebase_steps/step8.jpg deleted file mode 100644 index 1b4ab68f4c..0000000000 Binary files a/docs/data-and-deployment/firebase/img/firebase_steps/step8.jpg and /dev/null differ diff --git a/docs/data-and-deployment/firebase/img/firebase_steps/step9.jpg b/docs/data-and-deployment/firebase/img/firebase_steps/step9.jpg deleted file mode 100644 index 218555d634..0000000000 Binary files a/docs/data-and-deployment/firebase/img/firebase_steps/step9.jpg and /dev/null differ diff --git a/docs/data-and-deployment/firebase/img/firebase_steps/storage_step1.jpg b/docs/data-and-deployment/firebase/img/firebase_steps/storage_step1.jpg deleted file mode 100644 index 66cdbceba6..0000000000 Binary files a/docs/data-and-deployment/firebase/img/firebase_steps/storage_step1.jpg and /dev/null differ diff --git a/docs/data-and-deployment/firebase/img/firebase_steps/storage_step2.jpg b/docs/data-and-deployment/firebase/img/firebase_steps/storage_step2.jpg deleted file mode 100644 index 8a78e828a8..0000000000 Binary files a/docs/data-and-deployment/firebase/img/firebase_steps/storage_step2.jpg and /dev/null differ diff --git a/docs/data-and-deployment/firebase/img/firebase_steps/storage_step3.jpg b/docs/data-and-deployment/firebase/img/firebase_steps/storage_step3.jpg deleted file mode 100644 index 3531ebc62d..0000000000 Binary files a/docs/data-and-deployment/firebase/img/firebase_steps/storage_step3.jpg and /dev/null differ diff --git a/docs/data-and-deployment/firebase/img/firebase_steps/storage_step4.jpg b/docs/data-and-deployment/firebase/img/firebase_steps/storage_step4.jpg deleted file mode 100644 index 7897f4a2d9..0000000000 Binary files a/docs/data-and-deployment/firebase/img/firebase_steps/storage_step4.jpg and /dev/null differ diff --git a/docs/data-and-deployment/firebase/img/firebase_steps/storage_step5.jpg b/docs/data-and-deployment/firebase/img/firebase_steps/storage_step5.jpg deleted file mode 100644 index 2f849dda33..0000000000 Binary files a/docs/data-and-deployment/firebase/img/firebase_steps/storage_step5.jpg and /dev/null differ diff --git a/docs/data-and-deployment/firebase/img/firebase_steps/storage_step6.jpg b/docs/data-and-deployment/firebase/img/firebase_steps/storage_step6.jpg deleted file mode 100644 index f57589bd9f..0000000000 Binary files a/docs/data-and-deployment/firebase/img/firebase_steps/storage_step6.jpg and /dev/null differ diff --git a/docs/data-and-deployment/firebase/setup.md b/docs/data-and-deployment/firebase/setup.md index 087d9eae3d..c1e48dfd7d 100644 --- a/docs/data-and-deployment/firebase/setup.md +++ b/docs/data-and-deployment/firebase/setup.md @@ -2,71 +2,83 @@ Firebase is an app development platform that has extremely useful tools such as storage and real-time synchronization. With Firebase alone, a study creator can capture all data from participants and then export that data for further analysis. In what follows, there are two main products we will be using: the Firestore database and Firebase's storage product. -:::warning -As of October 1st, 2024, Firebase has changed its requirements for newly created projects. You will now be prompted to add a payment method when creating a new Firebase project. You will _only_ be charged if you exceed the limits of the "Always Free Tier". We suggest reading over the Firebase tier limits [here](https://cloud.google.com/storage/pricing#cloud-storage-always-free). We have conducted several studies using reVISit without going over the "Always Free Tier" limits, such as [this recent study](https://vdl.sci.utah.edu/publications/2024_preprint_guardrails/), but please be proactive and set up billing alerts to ensure you do not exceed the free tier limits. -::: - -### Create a Firebase Project +## Create a Firebase Project Navigate to Firebase and go to your console. -![Step 1](./img/firebase_steps/step1.jpg) +![Firebase homepage with the Go to console button](./img/enabling-authentication/step1.png) Create a new Firebase project -![Console](./img/firebase_steps/step2.jpg) +![Firebase console showing the Create a project button](./img/enabling-authentication/step2.png) +![Firebase console dialog for creating a new project](./img/enabling-authentication/step3.png) -Name your Project Accordingly +![Firebase project setup page for entering a project name](./img/enabling-authentication/step4.png) -![Console](./img/firebase_steps/step3.jpg) +![Firebase project setup page with Gemini and Google Analytics options](./img/enabling-authentication/step5.png) :::note -Enabling Google Analytics is not necessary. Feel free to disable this when prompted. +Enabling Gemini or Google Analytics is not necessary. Feel free to disable this when prompted. ::: -### Adding a Firestore Database -With your project created, we are now going to add a Firestore database to it. On the left-hand side, you should see a "Build" dropdown menu. From that, select "Firestore Database". -![Console](./img/firebase_steps/step4.jpg) +Name your project accordingly. + +![Firebase project overview page after the project is created](./img/enabling-authentication/step6.png) + + +## Adding a Firestore Database + +With your project created, we are now going to add a Firestore database to it. On the left-hand side, you should see a "Databases & Storage" dropdown menu. From that, select "Firestore". + +![Firebase sidebar with Firestore selected under Databases and Storage](./img/enabling-authentication/step7.png) Click "Create Database" in the center of the screen. -![Console](./img/firebase_steps/step5.jpg) -For the next two steps, there is no need to change the defaults. Simply click "Next" and then "Enable". -![Console](./img/firebase_steps/step6.jpg) +![Firestore Database page with the Create database button](./img/enabling-authentication/step8.png) + +For the next two steps, there is no need to change the defaults. Simply click "Next" and then "Create". + +![Firestore database creation dialog showing the database ID and location settings](./img/enabling-authentication/step9.png) -![Console](./img/firebase_steps/step7.jpg) +![Firestore database creation dialog showing security rules options](./img/enabling-authentication/step10.png) -With the new database created, we'll want to change the read/write rules to only allow authenticated users to write to the database. Go to the 'rules' tab (second tab) and copy and paste the following code. Then click "publish". +![Firestore database page after the database is created](./img/enabling-authentication/step11.png) + +With the new database created, we'll want to change the read/write rules to only allow authenticated users to write to the database. Go to the "Rules" tab (second tab) and copy and paste the following code. Then click "Publish". + +![Firestore Rules tab with custom read and write rules entered](./img/enabling-authentication/step12.png) ``` rules_version = '2'; service cloud.firestore { match /databases/{database}/documents { match /{document=**} { - allow read: if true + allow read: if true; allow write: if request.auth != null; } } } ``` -![Console](./img/firebase_steps/step8.jpg) +## Adding Firebase Storage -### Adding Firebase Storage +Once that is finished, we will enable standard Firebase storage. Click the "Databases & Storage" dropdown menu again and navigate to "Storage". -Once that is finished, we will enable standard Firebase storage. Click the "Build" dropdown menu again and navigate to "Storage". We can leave the options as their defaults. +:::warning +As of October 1st, 2024, Firebase has changed its requirements for newly created projects. You will now be prompted to add a payment method when creating a new Firebase project. You will _only_ be charged if you exceed the limits of the "Always Free Tier". We suggest reading over the Firebase tier limits [here](https://cloud.google.com/storage/pricing#cloud-storage-always-free). We have conducted several studies using reVISit without going over the "Always Free Tier" limits, such as [this recent study](https://vdl.sci.utah.edu/publications/2024_preprint_guardrails/), but please be proactive and set up billing alerts to ensure you do not exceed the free tier limits. +::: -![Console](./img/firebase_steps/storage_step1.jpg) +![Firebase sidebar with Storage selected under Databases and Storage](./img/enabling-authentication/step13.png) -![Console](./img/firebase_steps/storage_step2.jpg) +![Firebase Storage page with the Get started button](./img/enabling-authentication/step14.png) -![Console](./img/firebase_steps/storage_step3.jpg) +We can leave the options as their defaults. -![Console](./img/firebase_steps/storage_step4.jpg) +![Firebase Storage setup dialog showing security rules options](./img/enabling-authentication/step15.png) -Once the storage product is enabled, navigate to the "rules" tab. +![Firebase Storage setup dialog showing storage location settings](./img/enabling-authentication/step16.png) -![Console](./img/firebase_steps/storage_step5.jpg) +Once the storage product is enabled, navigate to the "Rules" tab. Replace the existing rule with the following code and then publish: @@ -82,73 +94,74 @@ service firebase.storage { } ``` -![Console](./img/firebase_steps/storage_step6.jpg) +![Firebase Storage Rules tab with custom read and write rules entered](./img/enabling-authentication/step17.png) -### Adding automatic transcription for Think Aloud studies +## Adding automatic transcription for Think Aloud studies If you plan to use [Think Aloud](../../designing-studies/think-aloud.md) studies with Firebase and want transcripts, install the [Google Cloud Speech-to-Text extension](https://extensions.dev/extensions/googlecloud/speech-to-text) from the Firebase Extensions marketplace. Once the extension is configured for your project, it will automatically transcribe uploaded audio files. This is the setup reVISit expects when you want transcripts to appear in analysis and export workflows. -### Adding an App to the Firebase Project +## Adding an App to the Firebase Project We are now going to add an app to your Firebase project: -![Console](./img/firebase_steps/step9.jpg) -![Console](./img/firebase_steps/step10.jpg) +![Firebase project overview page showing app platform options](./img/enabling-authentication/step18.png) -With the app set up, we are ready to copy over the app configuration to your reVISit project. In the image below you will see a JSON object denoted as `const firebase = { ... }`. +![Firebase Add app dialog with the web app option selected](./img/enabling-authentication/step19.png) -![Console](./img/firebase_steps/step11.jpg) +![Firebase web app registration dialog for naming the app](./img/enabling-authentication/step20.png) + + + +With the app set up, we are ready to copy over the app configuration to your reVISit project. +In the image below you will see a JSON object denoted as `const firebaseConfig = { ... }`. + +![Firebase web app configuration snippet with the firebaseConfig object](./img/enabling-authentication/step21.png) Copy the contents of that JSON object into the `.env` file for the variable `VITE_FIREBASE_CONFIG`. In the `.env` file, your `VITE_FIREBASE_CONFIG` variable should still be a JSON object that is escaped in single quotes. -#### Authentication +### Authentication We are now going to set up the authentication so that your browser is authorized to communicate with your Firebase database. -![Console](./img/firebase_steps/step12.jpg) -![Console](./img/firebase_steps/step13.jpg) +![Firebase Authentication page with the Get started button](./img/enabling-authentication/step22.png) -![Console](./img/firebase_steps/step14.jpg) +![Firebase Authentication sign-in providers list](./img/enabling-authentication/step23.png) -![Console](./img/firebase_steps/step15.jpg) +![Firebase anonymous sign-in provider setup page](./img/enabling-authentication/step24.png) :::info In addition to what is shown above, you will want to enable "Google Authentication" in the same section of Firebase. You can do this by choosing the "Google" sign in method under the "Additional Providers" section. The anonymous sign-in is used for participants taking the study. It allows them to access and send data to the Firestore without external authentication. The Google sign-in method is used to authenticate administrators for managing studies and data. Please see [here](../enabling-authentication) for more detailed authentication information and set up instructions. ::: -#### App Check +### App Check Our last step is to set up App Check. -![Console](./img/firebase_steps/step16.jpg) +![Firebase App Check page showing the registered web app](./img/enabling-authentication/step25.png) -![Console](./img/firebase_steps/step17.jpg) +![Firebase App Check registration page for reCAPTCHA](./img/enabling-authentication/step26.png) -Click on register to register your app with recaptcha. +Click on "Register" to register your app with reCAPTCHA. At this point you will need to navigate to [reCAPTCHA](https://www.google.com/recaptcha/admin/create) to create a secret key. -![Console](./img/firebase_steps/step18.jpg) +![Google reCAPTCHA admin page for creating a new reCAPTCHA key](./img/enabling-authentication/recaptcha1.jpg) -At this point you will need to navigate to [Recaptcha](https://www.google.com/recaptcha/admin/create) to create a secret key. -![Console](./img/firebase_steps/step19.jpg) -The important part here is filling out the domains that you will allow to access the Firebase database. Add localhost and 127.0.0.1 to test your survey on your local machine. +The important part here is filling out the domains that you will allow to access the Firebase database. Add `localhost` and `127.0.0.1` to test your survey on your local machine. :::info If you are planning on hosting this externally (such as using GitHub pages), you need to also enter the base URL for your website. For the GitHub pages deployment, you should enter your base GitHub pages URL (i.e. <username>.github.io). ::: -![Console](./img/firebase_steps/step20.jpg) - -You should now see a SITE key and a SECRET key. First, copy the secret key and paste it back into the Firebase re-captcha page as shown in the following images. +You should now see a site key and a secret key. First, copy the secret key and paste it back into the Firebase reCAPTCHA page as shown in the following images. -![Console](./img/firebase_steps/step21.jpg) +![Google reCAPTCHA admin page showing the generated site key and secret key](./img/enabling-authentication/recaptcha2.jpg) -![Console](./img/firebase_steps/step22.jpg) +![Firebase App Check reCAPTCHA setup page with the secret key field](./img/enabling-authentication/step27.png) -Now, copy the SITE key. That site should now go back into your `.env` file for the variable `VITE_RECAPTCHAV3TOKEN`. +Now, copy the site key. That site key should go into your `.env` file for the variable `VITE_RECAPTCHAV3TOKEN`. Now we will link your browser to your app through a debug key. @@ -161,17 +174,17 @@ To see the debug token, you need to enable Firebase storage. Open up the . - Open up the browser console. This differs depending on the web browser that you are using. You can find the various ways to view the browser console for popular web browsers here. - Copy the debug token from the console. - ![Console](./img/console.png) + ![Browser developer console showing the Firebase App Check debug token](./img/enabling-authentication/console.png) - Navigate to your Firebase instance and add the token as shown below: -![Console](./img/firebase_steps/step23.jpg) +![Firebase App Check debug tokens page](./img/enabling-authentication/step28.png) -![Console](./img/firebase_steps/step24.jpg) +![Firebase dialog for adding an App Check debug token](./img/enabling-authentication/step29.png) -![Console](./img/firebase_steps/step25.jpg) +![Firebase App Check page showing the added debug token](./img/enabling-authentication/step30.png) -### Allowing for CORS requests +## Allowing for CORS requests Once that is finished, we'll have to use Google's `gsutil` function in the terminal to set up a CORS policy so that the application can communicate with Firebase storage. Follow these steps on how to install gsutil on your local machine. @@ -193,19 +206,19 @@ Lastly, while still inside this same directory, call the following function: gsutil cors set cors.json gs:// ``` -You can find the link for the storage bucket by navigating to the "storage" product in Firebase. +You can find the link for the storage bucket by navigating to the "Storage" product in Firebase. -![Console](./img/firebase_steps/gsutil_step1.jpg) +![Firebase Storage files page showing the storage bucket URL](./img/enabling-authentication/step31.png) -Assuming that you have already changed the `VITE_STORAGE_ENGINE` variable in the `.env` file to "firebase", you can now call `yarn serve` to launch the server and navigate to http://localhost:8080 to launch any demo study. All data from any participation will automatically be uploaded to the store. +Assuming that you have already changed the `VITE_STORAGE_ENGINE` variable in the `.env` file to "firebase", you can now call `yarn serve` to launch the server and navigate to http://localhost:8080 to launch any demo study. All data from any participant session will automatically be uploaded to Firebase. :::note When running `yarn build`, reVISit automatically uses the Firebase storage engine. ::: -![Demo](./img/demo.png) +![ReVISit demo study page running with Firebase storage enabled](./img/enabling-authentication/demo.png) -### Deployment +## Deployment If you are intending to deploy your reVISit application to a static website, we suggest following our [guide to deploy to GitHub pages](../../deploying-to-static-website). In this, you'll see that there is an additional step that you will need to follow in Firebase so that your custom domain can authorize users. @@ -216,7 +229,7 @@ import StructuredLinks from '@site/src/components/StructuredLinks/StructuredLink referenceLinks={[ {name: "Firebase", url: "https://firebase.google.com/"}, {name: "Firebase Tier Limits", url: "https://cloud.google.com/storage/pricing#cloud-storage-always-free"}, - {name: "Google Recaptcha", url: "https://www.google.com/recaptcha/admin/create"}, + {name: "Google reCAPTCHA", url: "https://www.google.com/recaptcha/admin/create"}, {name: "Deploying to GitHub", url: "../../deploying-to-static-website"} ]} />