feat: deprecate magic link login #2023

It turns out that the new Universal Login experience at Auth0 doesn’t yet support passwordless login, something I unfortunately didn’t catch during 336f4b7. Given the choice between abandoning new Universal Login or migrating all email users to passworded accounts, we prefer the latter. This change comments-out (with DEPRECATED notes) the magic link code and changes the sign in dialog language. We will eventually remove the deprecated code once we’re sure of the permanency of this decision.
streetmix · Jun 4, 2021 · 63df4cf · 63df4cf
1 parent ccb17bd
commit 63df4cf
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 49 deletions.
diff --git a/assets/locales/en/main.json b/assets/locales/en/main.json
@@ -243,9 +243,9 @@
       "email-label": "Email",
       "email-description": "We’ll send you a link to sign in. No password is required.",
       "email-invalid": "Oops! That didn’t look like a valid email address. Please try again.",
-      "password-transition": "👋 {callout} If you don't have a password yet, {signUpLink} with your existing email. (All your streets will carry over.) You can use either method at any time.",
-      "password-transition-callout": "You can now sign in with a password!",
-      "password-transition-sign-up-link-label": "sign up here",
+      "password-transition": "👋 {callout} Don’t have a password yet? {signUpLink} with your existing email, and all your streets will carry over.",
+      "password-transition-callout": "Heads up, email users. You now sign in with a password!",
+      "password-transition-sign-up-link-label": "Sign up",
       "social-heading": "or",
       "button": {
         "email": "Continue with email",

diff --git a/assets/scripts/app/routing.js b/assets/scripts/app/routing.js
@@ -66,20 +66,22 @@ export function goUniversalSignIn (loginHint, screenHint) {
   })
 }
 
-export function goEmailSignIn (email, callback) {
-  const auth0 = Authenticate()
-  auth0.passwordlessStart(
-    {
-      send: 'link',
-      email: email,
-      connection: 'email',
-      authParams: {
-        redirectUri: AUTH0_SIGN_IN_CALLBACK_URL,
-        responseType: 'code'
-      }
-    },
-    (err, res) => {
-      callback(err, res)
-    }
-  )
-}
+// DEPRECATED: We are disabling magic link login, and will remove it as soon as the dust settles.
+//             See https://github.com/streetmix/streetmix/issues/2023
+// export function goEmailSignIn (email, callback) {
+//   const auth0 = Authenticate()
+//   auth0.passwordlessStart(
+//     {
+//       send: 'link',
+//       email: email,
+//       connection: 'email',
+//       authParams: {
+//         redirectUri: AUTH0_SIGN_IN_CALLBACK_URL,
+//         responseType: 'code'
+//       }
+//     },
+//     (err, res) => {
+//       callback(err, res)
+//     }
+//   )
+// }
diff --git a/assets/scripts/dialogs/SignInDialog.jsx b/assets/scripts/dialogs/SignInDialog.jsx
@@ -1,7 +1,9 @@
 import React from 'react'
 import { FormattedMessage } from 'react-intl'
 import {
-  goEmailSignIn,
+  // DEPRECATED: We are disabling magic link login, and will remove it as soon as the dust settles.
+  //             See https://github.com/streetmix/streetmix/issues/2023
+  // goEmailSignIn,
   goTwitterSignIn,
   goFacebookSignIn,
   goGoogleSignIn,
@@ -73,22 +75,24 @@ export default class SignInDialog extends React.Component {
     goTwitterSignIn()
   }
 
-  handleMagicLinkClick = (event) => {
-    event.preventDefault()
+  // DEPRECATED: We are disabling magic link login, and will remove it as soon as the dust settles.
+  //             See https://github.com/streetmix/streetmix/issues/2023
+  // handleMagicLinkClick = (event) => {
+  //   event.preventDefault()
 
-    // Since this is not the native form submission, we manually trigger the native validation.
-    if (!this.emailFormEl.current.reportValidity()) {
-      return
-    }
+  //   // Since this is not the native form submission, we manually trigger the native validation.
+  //   if (!this.emailFormEl.current.reportValidity()) {
+  //     return
+  //   }
 
-    const { email } = this.state
+  //   const { email } = this.state
 
-    goEmailSignIn(email, this.handleGoEmailSignIn)
+  //   goEmailSignIn(email, this.handleGoEmailSignIn)
 
-    this.setState({
-      sendingEmail: true
-    })
-  }
+  //   this.setState({
+  //     sendingEmail: true
+  //   })
+  // }
 
   handleGoEmailSignIn = (error, res) => {
     if (error) {
@@ -301,23 +305,22 @@ export default class SignInDialog extends React.Component {
                 <p className="sign-in-email-password-note">
                   <FormattedMessage
                     id="dialogs.sign-in.password-transition"
-                    defaultMessage="👋 {callout} If you don't have a password yet, {signUpLink} with
-                      your existing email. (All your streets will carry over.) You can use either
-                      method at any time."
+                    defaultMessage="👋 {callout} Don’t have a password yet? {signUpLink} with
+                      your existing email, and all your streets will carry over."
                     values={{
                       callout: (
                         <strong>
                           <FormattedMessage
                             id="dialogs.sign-in.password-transition-callout"
-                            defaultMessage="You can now sign in with a password!"
+                            defaultMessage="Heads up, email users. You now sign in with a password!"
                           />
                         </strong>
                       ),
                       signUpLink: (
                         <a onClick={this.handleSignUpClick}>
                           <FormattedMessage
                             id="dialogs.sign-in.password-transition-sign-up-link-label"
-                            defaultMessage="sign up here"
+                            defaultMessage="Sign up"
                           />
                         </a>
                       )
@@ -335,15 +338,19 @@ export default class SignInDialog extends React.Component {
                   />
                 </button>
 
-                <button
+                {/*
+                  DEPRECATED: We are disabling magic link login, and will remove it as soon as the
+                              dust settles. See https://github.com/streetmix/streetmix/issues/2023
+                */}
+                {/* <button
                   className="button-tertiary sign-in-button sign-in-email-button"
                   onClick={this.handleMagicLinkClick}
                 >
                   <FormattedMessage
                     id="dialogs.sign-in.button.magic-link"
                     defaultMessage="Continue with email link"
                   />
-                </button>
+                </button> */}
               </form>
 
               <div className="sign-in-social-heading">

diff --git a/assets/scripts/dialogs/__tests__/__snapshots__/SignInDialog.test.js.snap b/assets/scripts/dialogs/__tests__/__snapshots__/SignInDialog.test.js.snap
@@ -55,25 +55,20 @@ exports[`SignInDialog renders 1`] = `
             >
               👋 
               <strong>
-                You can now sign in with a password!
+                Heads up, email users. You now sign in with a password!
               </strong>
-               If you don't have a password yet, 
+               Don’t have a password yet? 
               <a>
-                sign up here
+                Sign up
               </a>
-               with your existing email. (All your streets will carry over.) You can use either method at any time.
+               with your existing email, and all your streets will carry over.
             </p>
             <button
               class="button-primary sign-in-button sign-in-email-button"
               type="submit"
             >
               Continue with password
             </button>
-            <button
-              class="button-tertiary sign-in-button sign-in-email-button"
-            >
-              Continue with email link
-            </button>
           </form>
           <div
             class="sign-in-social-heading"