Hemant Vishwakarma

Problem with magic link in iOS when opening within mobile in-app browser

So the usual flow for magic link is:

User clicks on the link in their email (e.g. https://ift.tt/2nZRJ4Q)
Page is opened in the email’s in-app browser.
Token is stored in the in-app browser’s local storage and token is removed from the URL (either by redirection or some other method).
User is logged-in (in the in-app browser).

The problem happens if the user then clicks the “Open this app in Safari” (or another browser) in a mobile's in-app browser. The user will be logged-out since the local storage state is not carried over and the token was already removed from URL parameter. Unless the token is present as a query / parameter on every page URL which is unsecure and defeats the purpose of using local storage.

What is the best solution for this use case without providing a typical login flow (username/pw)? (Or is that the only way?) Seems like you cannot browse any app in iOS using a magic link via an actual browser app since the magic link will always come from your email app (and hence, will always be opened using the in-app browser).

from Problem with magic link in iOS when opening within mobile in-app browser

Format Phone Number in JavaScript for internal use

I am trying to format phone numbers for internal use, I found this code off another thread and it seems really close to what I want to use but is lacking

function phoneFormatter() {
  $('.phone').on('input', function() {
    var number = $(this).val().replace(/[^\d]/g, '')
    if (number.length == 7) {
      number = number.replace(/(\d{3})(\d{4})/, "$1-$2");
      //US & Canada Formatting
    } else if (number.length == 10) {
      number = number.replace(/(\d{3})(\d{3})(\d{4})/, "($1) $2-$3");
    }
      //France Formatting
      else if (number.length == 11) {
      number = number.replace(/(\d{2})(\d{1})(\d{2})(\d{2})(\d{2})(\d{2})/, "+$1 $2 $3 $4 $5 $6");
    }
      //German Formattiing 
      else if (number.length == 13) {
      number = number.replace(/(\d{2})(\d{3})(\d{8})/, "+$1 $2 $3");
    }
    $(this).val(number)
  });
};

$(phoneFormatter);

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
 <p><label>Phone Number<br>               
 <input name="phone"    class="phone" id="phone"     type="text"     required></label></p>

</body>
</html>

After reading https://en.wikipedia.org/wiki/National_conventions_for_writing_telephone_numbers

is there a library or a set of code that already has the proper formatting for all the countries? I lack the Javascript knowledge to write all that myself.

from Format Phone Number in JavaScript for internal use

How to use yarn workspaces with typescript and out folders?

I'm trying to set up a monorepo using yarn. I'm confused as to how to set up typescript with project references such that things resolve properly.

For example, if I have a folder structure like

/cmd
/client

And I want cmd to depend on client I could have:

cmd/tsconfig.json:

{
  "compilerOptions": {
    "types": ["reflect-metadata", "jest"],
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "moduleResolution": "node",
    "declaration": true,
    "importHelpers": true,
    "composite": true,
    "target": "esnext"
    "sourceRoot": "src",
    "outDir": "dist"
  },
  "references": [
    {
      "path": "../client"
    }
  ],
  "include": [
    "src/**/*"
  ]
}

with a package.json

{
  "name": "cmd",
  "version": "1.0.0",
  "dependencies": {
    "client": "^1.0.0",
  }
}

In this model both cmd and client get compiled with an outDir and sourceRoot field set in their tsconfig. This means all their compiled javascript goes into the dist/ subfolder of cmd/dist and client/dist

If now I try and reference a class from client into cmd like

import Foo from 'client/src/foo'

The IDE is perfectly happy to resolve this since it seems that its mapped via the typescript references property.

However, the compiled javascript boils down to a

const foo_1 = require("client/src/foo");

However, the actual built javascript is in client/dist/src/foo, so at runtime this never works.

On the flip side, if I don't use sourceRoots and outDirs and have the javascript inlined with the typescript files at the same folder everything does work (but makes the repo dirty and requires custom gitignores to exclude things)

Can anyone shed any light on how to properly set up a typescript 3.x monorepo with yarn workspaces such that things just work?

from How to use yarn workspaces with typescript and out folders?

Tuesday, 1 October 2019

Problem with magic link in iOS when opening within mobile in-app browser

Format Phone Number in JavaScript for internal use

How to use yarn workspaces with typescript and out folders?