+ - 0:00:00
Notes for current slide
Notes for next slide

A Send Tab Story 📱 ✈️ 💻 2

How not to setup an FxA local environment 📈

By Tarik Eshaq
1 / 21

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!
2 / 21

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
3 / 21

Context 🤔

4 / 21

Context 🤔

5 / 21

What we need do to get a local setup 🤓

6 / 21

What we need do to get a local setup 🤓

  1. Run FxA locally, (it's as simple as downloading some dependencies) then
    $ yarn install
    $ yarn run
7 / 21

What we need do to get a local setup 🤓

  1. Run FxA locally, (it's as simple as downloading some dependencies) then
    $ yarn install
    $ yarn run
  2. 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!
8 / 21

What we need do to get a local setup 🤓

  1. Run FxA locally, (it's as simple as downloading some dependencies) then
    $ yarn install
    $ yarn run
  2. 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!
  3. Profit $$ 🤑
9 / 21

If only it was that easy (but it should be!)

10 / 21

The enemies I made along the way 🧑‍🚒

11 / 21

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 😞
12 / 21

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
13 / 21

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
  2. 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 😠
14 / 21

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
  2. 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
15 / 21

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
  2. 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!
  3. Now requests to the auth server are failing with an invalid signature
16 / 21

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
  2. 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!
  3. Now requests to the auth server are failing with an invalid signature
    • Solution: manually disable MAC verification, comment out code in node_modules
17 / 21

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
  2. 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!
  3. Now requests to the auth server are failing with an invalid signature
    • Solution: manually disable MAC verification, comment out code in node_modules
  4. 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
18 / 21

Profit 💵 🤑

19 / 21

Quick demo 💵 🤑

20 / 21
21 / 21

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!
2 / 21
Paused

Help

Keyboard shortcuts

↑, ←, Pg Up, k Go to previous slide
↓, →, Pg Dn, Space, j Go to next slide
Home Go to first slide
End Go to last slide
Number + Return Go to specific slide
b / m / f Toggle blackout / mirrored / fullscreen mode
c Clone slideshow
p Toggle presenter mode
t Restart the presentation timer
?, h Toggle this help
Esc Back to slideshow