class: center, middle # A Send Tab Story 📱 ✈️ 💻 2 ## How **not** to setup an FxA local environment 📈 ##### By Tarik Eshaq --- # Agenda 📓 - Quick overview of **why** we would want a local setup that talks to mobile and desktop ❓ - A little bit of context around how FxA works in mobile 🤓 - The enemies I made along the way 🧑‍🚒 - A quick demo! --- class: center, middle # Why ❓ - We have many features that operate cross platforms, send tab is great example - mobile devices act differently than desktop when it comes to authorizing their APIs - Currently, the only other viable option was to test against stage.. but even that requires an overhead --- class: center, middle # Context 🤔 --- # Context 🤔 <img src="https://docs.google.com/drawings/d/e/2PACX-1vQLsMOFS8NenxTpzu84LlK1L_DLIfYwJdPyUc6qlH1HJ2WJrsLAAUWqw0xXvyEQd1QS464EbksPSpuK/pub?w=960&amp;h=500"> --- class: center, middle # What we need do to get a local setup 🤓 --- # What we need do to get a local setup 🤓 1. Run FxA locally, (it's as simple as downloading some dependencies) then ```sh $ yarn install $ yarn run ``` --- # What we need do to get a local setup 🤓 1. Run FxA locally, (it's as simple as downloading some dependencies) then ```sh $ yarn install $ yarn run ``` 1. Tell the mobile app where the content server is, we have a secret menu or just bake it in the app 1. The content server usually tells us where all the other servers are! --- # What we need do to get a local setup 🤓 1. Run FxA locally, (it's as simple as downloading some dependencies) then ```sh $ yarn install $ yarn run ``` 1. Tell the mobile app where the content server is, we have a secret menu or just bake it in the app 1. The content server usually tells us where all the other servers are! 1. Profit $$ 🤑 --- class: center, middle # If only it was that easy (but it should be!) --- class: center, middle # The enemies I made along the way 🧑‍🚒 --- # The enemies I made along the way 🧑‍🚒 1. WebKit has a bug! It always force upgrades resource `http` requests to `https` on `localhost`.. 🍎 - Lucky for us, firefox-ios uses WebKit, so the FxA content server won't get any of its JavaScript 😞 --- # The enemies I made along the way 🧑‍🚒 1. WebKit has a bug! It always force upgrades resource `http` requests to `https` on `localhost`.. 🍎 - **Solution**: Lets setup a https tunnel to `localhost:3030`! **ngrok** FTW --- # The enemies I made along the way 🧑‍🚒 1. WebKit has a bug! It always force upgrades resource `http` requests to `https` on `localhost`.. 🍎 - **Solution**: Lets setup a https tunnel to `localhost:3030`! **ngrok** FTW 1. WebKit now is trying to send requests from the content-server to the auth server using `https` - But the tunnel is only to port `3030`, auth server runs on `9000` 😠 --- # The enemies I made along the way 🧑‍🚒 1. WebKit has a bug! It always force upgrades resource `http` requests to `https` on `localhost`.. 🍎 - **Solution**: Lets setup a https tunnel to `localhost:3030`! **ngrok** FTW 1. WebKit now is trying to send requests from the content-server to the auth server using https! - **Solution**: Lets also get the auth server a https tunnel, or better, lets setup a reverse proxy **nginx** FTW --- # The enemies I made along the way 🧑‍🚒 1. WebKit has a bug! It always force upgrades resource `http` requests to `https` on `localhost`.. 🍎 - **Solution**: Lets setup a https tunnel to `localhost:3030`! **ngrok** FTW 1. WebKit now is trying to send requests from the content-server to the auth server using https! - **Solution**: Lets also get the auth server a https tunnel, or better, lets setup a reverse proxy **nginx** FTW - Now we must also setup all the environment variables, so the content server knowns to use the new url! 1. Now requests to the auth server are failing with an **invalid signature** --- # The enemies I made along the way 🧑‍🚒 1. WebKit has a bug! It always force upgrades resource `http` requests to `https` on `localhost`.. 🍎 - **Solution**: Lets setup a https tunnel to `localhost:3030`! **ngrok** FTW 1. WebKit now is trying to send requests from the content-server to the auth server using https! - **Solution**: Lets also get the auth server a https tunnel, or better, lets setup a reverse proxy **nginx** FTW - Now we must also setup all the environment variables, so the content server knowns to use the new url! 1. Now requests to the auth server are failing with an **invalid signature** - **Solution**: **manually** disable MAC verification, comment out code in node_modules --- # The enemies I made along the way 🧑‍🚒 1. WebKit has a bug! It always force upgrades resource `http` requests to `https` on `localhost`.. 🍎 - **Solution**: Lets setup a https tunnel to `localhost:3030`! **ngrok** FTW 1. WebKit now is trying to send requests from the content-server to the auth server using https! - **Solution**: Lets also get the auth server a https tunnel, or better, lets setup a reverse proxy **nginx** FTW - Now we must also setup all the environment variables, so the content server knowns to use the new url! 1. Now requests to the auth server are failing with an **invalid signature** - **Solution**: **manually** disable MAC verification, comment out code in node_modules 1. Now code verification calls are failing with **Invalid Token** errors - **Solution** (and this took a while): Change the name of an environment variable in auth server - It was conflicting with an environment variable we have to set in step 2 --- class: center, middle # Profit 💵 🤑 --- class: center, middle # Quick demo 💵 🤑 ---