Block users from signing in with unverified email

Adds an error page for when users attempt to login with an unverified email, along with a couple of TODOs for completing the work. Affects #2023
streetmix · Aug 17, 2021 · 127b4c0 · 127b4c0
1 parent 25f796c
commit 127b4c0
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 3 deletions.
diff --git a/app/controllers/auth0_sign_in_callback.js b/app/controllers/auth0_sign_in_callback.js
@@ -18,6 +18,12 @@ const AccessTokenHandler = function (req, res) {
       const accessToken = body.access_token
       const auth0User = await auth0.getProfile(accessToken)
 
+      if (auth0User.email && !auth0User.email_verified) {
+        // TODO: We don't actually want to send _all_ unverified users there, just the ones we know
+        //       will need to be linked to existing social accounts. #2023
+        res.redirect('/error/unverified-email')
+      }
+
       const apiRequestBody = getUserInfo(auth0User)
       const endpoint = `${config.restapi.protocol}${req.headers.host}/api/v1/users`
       const apiRequestOptions = {
@@ -70,6 +76,7 @@ const getUserAuth0Info = function (user) {
       nickname: user.nickname,
       auth0Id: user.sub,
       email: user.email,
+      emailVerified: user.email_verified,
       profileImageUrl: user.picture
     }
   }

diff --git a/assets/locales/en/main.json b/assets/locales/en/main.json
@@ -96,7 +96,8 @@
       "sign-in": "Sign in again",
       "reload": "Reload the page",
       "try-again": "Try again",
-      "view-example": "View an example street"
+      "view-example": "View an example street",
+      "resend-verification": "Resend verification email"
     },
     "page-not-found-title": "Page not found.",
     "page-not-found-description": "Oh, boy. There is no page with this address!",
@@ -119,6 +120,8 @@
     "access-denied-description": "You cancelled the sign in process.",
     "auth-api-problem-title": "There was a problem with signing you in.",
     "auth-api-problem-description": "There was a problem with authentication.",
+    "auth-unverified-email-title": "Please verify your email address.",
+    "auth-unverified-email-description": "Check your email inbox for a Streetmix verification link. If you need to, you can request a new verification email.",
     "please-try-again": "Please try again later or let us know via <email_link>email</email_link> or <tweet_link>Twitter</tweet_link>.",
     "unsupported-browser-title": "Streetmix doesn’t work on your browser.",
     "unsupported-browser-description": "Sorry about that. You might want to try <chrome_link>Chrome</chrome_link>, <firefox_link>Firefox</firefox_link>, <edge_link>Microsoft Edge</edge_link>, or Safari.",

diff --git a/assets/scripts/app/BlockingError.jsx b/assets/scripts/app/BlockingError.jsx
@@ -21,6 +21,12 @@ function BlockingError (props) {
   let title = ''
   let description = ''
 
+  function doResendVerificationEmail () {
+    // TODO: Wire this into a backend call that actually resends the verification email. #2023
+    alert('This should resend the verification email, but currently does not.')
+    return false
+  }
+
   const homeButton = (
     <button onClick={goHome}>
       <FormattedMessage
@@ -458,6 +464,32 @@ function BlockingError (props) {
         </>
       )
       break
+    case ERRORS.AUTH_PROBLEM_UNVERIFIED_EMAIL:
+      title = (
+        <FormattedMessage
+          id="error.auth-unverified-email-title"
+          defaultMessage="Please verify your email address."
+        />
+      )
+      description = (
+        <>
+          <p>
+            <FormattedMessage
+              id="error.auth-unverified-email-description"
+              defaultMessage="Check your email inbox for a Streetmix verification link. If you need to, you can request a new verification email."
+            />
+          </p>
+          <button onClick={doResendVerificationEmail}>
+            <FormattedMessage
+              id="error.button.resend-verification"
+              defaultMessage="Resend verification email"
+            />
+          </button>
+          {homeButton}
+          {needHelpLink}
+        </>
+      )
+      break
     case ERRORS.UNSUPPORTED_BROWSER:
       title = (
         <FormattedMessage

diff --git a/assets/scripts/app/constants.js b/assets/scripts/app/constants.js
@@ -14,6 +14,7 @@ export const URL_ERROR_NO_TWITTER_ACCESS_TOKEN = 'no-twitter-access-token'
 export const URL_ERROR_NO_ACCESS_TOKEN = 'no-access-token'
 export const URL_ERROR_AUTHENTICATION_API_PROBLEM = 'authentication-api-problem'
 export const URL_ERROR_ACCESS_DENIED = 'access-denied'
+export const URL_ERROR_UNVERIFIED_EMAIL = 'unverified-email'
 
 export const URL_EXAMPLE_STREET = '/streetmix/7'
 

diff --git a/assets/scripts/app/errors.js b/assets/scripts/app/errors.js
@@ -6,7 +6,8 @@ import {
   URL_ERROR_NO_TWITTER_ACCESS_TOKEN,
   URL_ERROR_NO_ACCESS_TOKEN,
   URL_ERROR_AUTHENTICATION_API_PROBLEM,
-  URL_ERROR_ACCESS_DENIED
+  URL_ERROR_ACCESS_DENIED,
+  URL_ERROR_UNVERIFIED_EMAIL
 } from './constants'
 
 export const ERRORS = {
@@ -33,7 +34,8 @@ export const ERRORS = {
   STREET_DATA_FAILURE: 21,
   GALLERY_STREET_FAILURE: 22,
   AUTH_PROBLEM_NO_ACCESS_TOKEN: 23,
-  AUTH_EXPIRED: 24
+  AUTH_EXPIRED: 24,
+  AUTH_PROBLEM_UNVERIFIED_EMAIL: 25
 }
 
 export function showError (errorType, newAbortEverything) {
@@ -64,6 +66,9 @@ export function showErrorFromUrl (errorUrl) {
     case URL_ERROR_ACCESS_DENIED:
       errorType = ERRORS.ACCESS_DENIED
       break
+    case URL_ERROR_UNVERIFIED_EMAIL:
+      errorType = ERRORS.AUTH_PROBLEM_UNVERIFIED_EMAIL
+      break
     default:
       errorType = ERRORS.GENERIC_ERROR
       break