- This browser is not supported or 3rd party cookies and data may be disabled (on Chrome)<\/li><\/ul>\n\n\n\n
![\"3rd](\"https:\/\/heisbudi.com\/wp-content\/uploads\/2021\/08\/Screen-Shot-2021-08-30-at-2.03.41-PM.png\")
3rd Party Cookie Warning on Chrome<\/figcaption><\/figure>\n\n\n\n - Invalid SSL. I have a valid SSL setup for my domain, but when users are trying to login, they are getting an invalid SSL saying that my domain’s certificate is not issued by firebaseapp.com. Basically the URL on the browser is your custom domain (e.g. example.com), but the authentication is happening against firebaseapp.com. Hence the warning.<\/li><\/ul>\n\n\n\n
![\"Invalid](\"https:\/\/heisbudi.com\/wp-content\/uploads\/2021\/08\/Screen-Shot-2021-08-30-at-3.04.52-PM-1024x776.png\")
Invalid SSL Error when Logging in<\/figcaption><\/figure>\n\n\n\n - Authorization and Redirect error<\/li><\/ul>\n\n\n\n
![\"Authorization](\"https:\/\/heisbudi.com\/wp-content\/uploads\/2021\/08\/Screen-Shot-2021-08-30-at-3.12.59-PM-1-704x1024.png\")
Authorization and Redirect Error<\/figcaption><\/figure>\n\n\n\n What This Post is NOT<\/h2>\n\n\n\n
This post is NOT a tutorial on how setup each environment separately. This post assume you have the following setup successfully, but you are experiencing one (or more) error mentioned above. <\/p>\n\n\n\n
- Firebase authentication<\/a><\/li>
- Your own domain (e.g. example.com)<\/li>
- Access to add your own resource records<\/a> (e.g. CNAME, AAAA, MX, etc) from your domain provider<\/li>
- Custom domain<\/a> for your web app on Google AppEngine (e.g. https:\/\/example.com as opposed to https:\/\/project-id.ue.r.appspot.com\/) <\/li>
- SSL<\/a> either using Google Managed SSL, purchased separately, or issued by Let’s Encrypt<\/a>, an open-source Certificate Authority. <\/li><\/ul>\n\n\n\n
Each corresponding link above will guide you to setup each environment.<\/p>\n\n\n\n
Tips for Faster Debugging<\/h2>\n\n\n\n
The setup shown on this post requires readers to add domain resource records<\/a> (e.g. CNAME, AAAA, MX, etc) from a domain provider. Although a DNS record eventually propagate to other DNS providers, this process usually takes time (up to 72 hours<\/a>). For debugging purpose, it’s a good idea to change the DNS server on the computer you are using to debug to the DNS server provided by your domain provider. This way you don’t need to wait too long.<\/p>\n\n\n\n
Wiring Everything up<\/h2>\n\n\n\n
- Setup Custom Domain on App Engine
Follow the instruction<\/a> listed on Google’s documentation on how to accomplish this. You can also setup www subdomain (e.g. www.example.com and example.com will lead to the same landing page) if you choose to do so.
<\/li>- Create Domain Resource Records
At the end of the Step 1 above, Google will prompt you to add domain resource records. If you purchase your domain from Google Domain, you can follow the instruction here<\/a>. If you purchase your domain somewhere else, consult with your domain’s registrar on how to add resource records for the domain you purchase. Example of domain resource records that needs to be added are as follow![\"Domain](\"https:\/\/heisbudi.com\/wp-content\/uploads\/2021\/08\/Screen-Shot-2021-08-31-at-12.18.51-PM.png\")
<\/figcaption><\/figure><\/div><\/li> - Create a Custom Domain using Firebase Hosting
This is the crucial part I was missing. When this step wasn’t done or or done incorrectly, it causes clients’ browser to think that Firebase authentication is not coming from your custom domain, which results in 3rd party cookie warning shown above.
From the Firebase web console<\/a>, go to the hosting section, and add a custom domain. You might need to click through all the tutorial steps, but you don’t have to actually do the setup process laid out in the tutorial.
![\"Adding](\"https:\/\/heisbudi.com\/wp-content\/uploads\/2021\/09\/del-1-1024x558.png\")
Adding a Custom Domain to Firebase Hosting<\/figcaption><\/figure>
Do NOT<\/em> use your second level domain (e.g. example.com). Instead, use a subdomain so that the clients’ browsers see a single domain for the redirect login. For example, use signin.example.com<\/em> when adding a custom domain to be hosted by Firebase in this step. This way the browser will see one domain both when a user lands on the main page (e.g. example.com), and will again see the same domain (i.e. signin.example.com) when they are prompted to login. Without this setup, when users visit a landing page (e.g. example.com) and attempt a login, the login will be redirected to firebaseapp.com and cookies will also be set by firebaseapp.com.
Once this step is done, you will be prompted to add an A record in your domain. Go ahead and do so. It might take some time for the domain to propagate through. Once the setup is done, the custom domain will look like the following, indicating that the custom domain is connected. Make sure to wait until the status is changed to “Connected” before proceeding to Step 4..![\"Connected](\"https:\/\/heisbudi.com\/wp-content\/uploads\/2021\/09\/Screen-Shot-2021-09-10-at-3.11.30-PM-1-1024x516.png\")
Connected Custom Domain<\/figcaption><\/figure><\/li> - Add an Authorized redirect URIs on Google API Console
When this step isn’t done (properly), Authorization and Redirect error pictured above will appear when users attempt to sign-in. Go to Google API Console<\/a> for your project, go to Credentials section and edit the OAuth 2.0 Client IDs as pictured below.![\"Editing](\"https:\/\/heisbudi.com\/wp-content\/uploads\/2021\/09\/Screen-Shot-2021-09-13-at-10.35.26-AM-1024x641.png\")
Editing OAuth 2.0 Client IDs<\/figcaption><\/figure>
Go to the Authorized URIs Redirect session, add the custom sub-domain created in Step 3. above and suffix it with \/__\/auth\/handler<\/strong>. For example, if your domain is example.com<\/em>, in Step 3. above you would create a sub-domain called signin.example.com<\/em> and in this step, the URI you would add is https:\/\/signin.example.com\/__\/auth\/handler<\/em>.![\"Authorized](\"https:\/\/heisbudi.com\/wp-content\/uploads\/2021\/09\/Screen-Shot-2021-09-13-at-10.54.33-AM.png\")
Authorized Redirect URI with Custom Domain<\/figcaption><\/figure><\/li> - Firebase Configuration on HTML page(s)
Now that everything is setup on the backend, we’ll need to change the Firebase configuration on HTML page(s) that uses Firebase to reflect the changes above. By default the domain use for authorization in Firebase is:
authDomain: “<project-id>.firebaseapp.com”<\/strong>
Change the default value with the custom subdomain value specified in Step 3. above. An example is shown below.![\"Firebase](\"https:\/\/heisbudi.com\/wp-content\/uploads\/2021\/09\/Screen-Shot-2021-09-13-at-1.48.24-PM-1024x541.png\")
Firebase Custom Domain Configuration<\/figcaption><\/figure><\/li><\/ol>\n\n\n\n At this point everything should work properly<\/p>\n\n\n\n
<\/p>\n
<\/a><\/a><\/a><\/a><\/div><\/a><\/a><\/a><\/a><\/div>","protected":false},"excerpt":{"rendered":"What This Post is This post will show you how to correctly and securely (using SSL) set up your web app hosted on Google App Engine (written in Python) using Firebase Authentication and a custom domain (as opposed to project-id.firebaseapp.com). Correctly is highlighted because I spent days trying to set this up with no luck. […]<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[47,48,44,45,46],"_links":{"self":[{"href":"https:\/\/heisbudi.com\/index.php?rest_route=\/wp\/v2\/posts\/1068"}],"collection":[{"href":"https:\/\/heisbudi.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/heisbudi.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/heisbudi.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/heisbudi.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1068"}],"version-history":[{"count":14,"href":"https:\/\/heisbudi.com\/index.php?rest_route=\/wp\/v2\/posts\/1068\/revisions"}],"predecessor-version":[{"id":1102,"href":"https:\/\/heisbudi.com\/index.php?rest_route=\/wp\/v2\/posts\/1068\/revisions\/1102"}],"wp:attachment":[{"href":"https:\/\/heisbudi.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1068"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/heisbudi.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1068"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/heisbudi.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1068"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
- Create Domain Resource Records
- Firebase authentication<\/a><\/li>
- Authorization and Redirect error<\/li><\/ul>\n\n\n\n
- Invalid SSL. I have a valid SSL setup for my domain, but when users are trying to login, they are getting an invalid SSL saying that my domain’s certificate is not issued by firebaseapp.com. Basically the URL on the browser is your custom domain (e.g. example.com), but the authentication is happening against firebaseapp.com. Hence the warning.<\/li><\/ul>\n\n\n\n