689 authentication

.eslintrc.js

@@ -74,6 +74,7 @@ module.exports = {
         "@typescript-eslint/require-await": "off",
         "@typescript-eslint/restrict-template-expressions": "off",
         "@typescript-eslint/unbound-method": "off",
+        "arrow-body-style": "off",
         "no-unused-expressions": "off",
         "no-unused-vars": "off",
         "no-use-before-define": "off",

app/App.tsx

@@ -10,7 +10,7 @@ import Intercom from "react-intercom";
 import { Helmet } from "react-helmet-async";
 import { Redirect, Route, Switch, useHistory } from "react-router-dom";
 
-import { AppContext, GeoCoordinates, getLocation, whiteLabel } from "./utils";
+import { GeoCoordinates, getLocation, whiteLabel, AppProvider } from "./utils";
 import {
   Banner,
   HamburgerMenu,
@@ -19,6 +19,7 @@ import {
   PopupMessageProp,
   UserWay,
 } from "./components/ui";
+
 import config from "./config";
 import MetaImage from "./assets/img/sfsg-preview.png";
 
@@ -43,6 +44,9 @@ import OrganizationEditPage from "./pages/OrganizationEditPage";
 import { EditBreakingNewsPage } from "./pages/EditBreakingNewsPage";
 import { ServiceDiscoveryForm } from "./pages/ServiceDiscoveryForm";
 import { ServiceDiscoveryResults } from "./pages/ServiceDiscoveryResults";
+import { LoginPage } from "./pages/Auth/LoginPage";
+import { SignUpPage } from "./pages/Auth/SignUpPage";
+import { LogoutPage } from "./pages/Auth/LogoutPage";
 
 import styles from "./App.module.scss";
 
@@ -99,8 +103,7 @@ export const App = () => {
 
   return (
     <div id={outerContainerId} className={styles.outerContainer}>
-      {/* eslint-disable-next-line react/jsx-no-constructed-context-values */}
-      <AppContext.Provider value={{ userLocation }}>
+      <AppProvider userLocation={userLocation}>
         <Helmet>
           <title>{title}</title>
           <meta property="og:url" content={siteUrl} />
@@ -144,7 +147,6 @@ export const App = () => {
               />
               <Route exact path="/about" component={AboutPage} />
               <Route exact path="/demo/listing" component={ListingDebugPage} />
-
               {/* NB: /organizations/new must be listed before /organizations/:id or else the /new
                 step will be interpreted as an ID and will thus break the OrganizationEditPage */}
               <Route
@@ -219,14 +221,16 @@ export const App = () => {
                 path="/breaking-news/edit"
                 component={EditBreakingNewsPage}
               />
+              <Route exact path="/log-in" component={LoginPage} />
+              <Route exact path="/sign-up" component={SignUpPage} />
+              <Route exact path="/log-out" component={LogoutPage} />
 
               {/* UCSF white label paths */}
               <Route
                 exact
                 path="/find-services/:selectedResourceSlug"
                 component={UcsfDiscoveryForm}
               />
-
               {/* Legacy redirects */}
               <Redirect path="/resource/new" to="/organizations/new" />
               <Route
@@ -239,13 +243,12 @@ export const App = () => {
                 path="/resource"
                 component={RedirectToOrganizations}
               />
-
               <Redirect to="/" />
             </Switch>
           </div>
           {popUpMessage && <PopUpMessage popUpMessage={popUpMessage} />}
         </div>
-      </AppContext.Provider>
+      </AppProvider>
     </div>
   );
 };

app/components/ui/Navigation.tsx

@@ -2,8 +2,8 @@ import React, { FormEvent, useState } from "react";
 import { Link, useHistory } from "react-router-dom";
 import cn from "classnames";
 import qs from "qs";
+import { useAppContext, whiteLabel } from "utils";
 import Translate from "./Translate";
-import whiteLabel from "../../utils/whitelabel";
 import styles from "./Navigation.module.scss";
 
 const {
@@ -89,46 +89,59 @@ const SiteLogo = () =>
     </Link>
   );
 
-const SiteLinks = () => (
-  <ul className={styles.navRight}>
-    <li>
-      <Link to="/about">About</Link>
-    </li>
-    <li>
-      <a
-        href="https://help.sfserviceguide.org"
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        FAQ
-      </a>
-    </li>
-    <li>
-      <a
-        href="https://help.sfserviceguide.org/en/collections/1719243-contact-us"
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        Contact Us
-      </a>
-    </li>
-    {showReportCrisis && (
+const SiteLinks = () => {
+  const { authState } = useAppContext();
+
+  return (
+    <ul className={styles.navRight}>
+      {/* Todo: This will eventually be replaced by a user icon with a dropdown menu of account related options.
+          The designs are still forthcoming. For now, it serves as a basic log-out functionality for the purposes
+          of development and testing.
+      */}
+      {authState && (
+        <li>
+          <Link to="/log-out">Log Out</Link>
+        </li>
+      )}
+      <li>
+        <Link to="/about">About</Link>
+      </li>
+      <li>
+        <a
+          href="https://help.sfserviceguide.org"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          FAQ
+        </a>
+      </li>
       <li>
         <a
-          type="button"
-          aria-label="report street crisis"
-          href="https://sf.gov/information/reporting-concerns-about-street-crises-and-conditions"
-          className={styles.buttonLink}
-          target="blank"
+          href="https://help.sfserviceguide.org/en/collections/1719243-contact-us"
+          target="_blank"
           rel="noopener noreferrer"
         >
-          Report Street Crisis
+          Contact Us
         </a>
       </li>
-    )}
-    <Translate />
-  </ul>
-);
+      {showReportCrisis && (
+        <li>
+          <a
+            type="button"
+            aria-label="report street crisis"
+            href="https://sf.gov/information/reporting-concerns-about-street-crises-and-conditions"
+            className={styles.buttonLink}
+            target="blank"
+            rel="noopener noreferrer"
+          >
+            Report Street Crisis
+          </a>
+        </li>
+      )}
+      <Translate />
+    </ul>
+  );
+};
 
 const SiteSearch = ({
   query,

app/config.ts

@@ -3,20 +3,35 @@ declare global {
 }
 
 interface Config {
+  ALGOLIA_APPLICATION_ID: string;
+  ALGOLIA_INDEX_PREFIX: string;
+  ALGOLIA_READ_ONLY_API_KEY: string;
+  AUTH0_AUDIENCE: string;
+  AUTH0_CLIENT_ID: string;
+  AUTH0_DOMAIN: string;
+  AUTH0_REDIRECT_URI: string;
   GOOGLE_ANALYTICS_ID: string;
   GOOGLE_ANALYTICS_GA4_ID: string;
+  GOOGLE_API_KEY: string;
+  INTERCOM_APP_ID: string;
   LINKSF_DOMAIN: string;
   MOHCD_DOMAIN: string;
   MOHCD_SUBDOMAIN: string;
+  SENTRY_PROJECT_ID: string;
+  SENTRY_PUBLIC_KEY: string;
   SFFAMILIES_DOMAIN: string;
+  SFFAMILIES_USERWAY_APP_ID: string;
   UCSF_DOMAIN: string;
-  [key: string]: any;
 }
 
 const config: Config = {
   ALGOLIA_APPLICATION_ID: CONFIG.ALGOLIA_APPLICATION_ID,
   ALGOLIA_INDEX_PREFIX: CONFIG.ALGOLIA_INDEX_PREFIX,
   ALGOLIA_READ_ONLY_API_KEY: CONFIG.ALGOLIA_READ_ONLY_API_KEY,
+  AUTH0_AUDIENCE: CONFIG.AUTH0_AUDIENCE,
+  AUTH0_CLIENT_ID: CONFIG.AUTH0_CLIENT_ID,
+  AUTH0_DOMAIN: CONFIG.AUTH0_DOMAIN,
+  AUTH0_REDIRECT_URI: CONFIG.AUTH0_REDIRECT_URI,
   // When GA sunsets Universal Analytics wit GA4 in July 2023, this prop can be removed
   GOOGLE_ANALYTICS_ID:
     process.env.NODE_ENV === "production" ? "UA-116318550-1" : "UA-116318550-2",

app/pages/Auth/Auth.module.scss

@@ -0,0 +1,28 @@
+@import "~styles/utils/_helpers.scss";
+
+.authPage {
+  display: grid;
+  grid-column: 2 / span 10;
+  gap: 10px;
+  margin: 20px;
+}
+
+.verificationDigits {
+  display: flex;
+  width: 400px;
+}
+
+.title {
+  font-size: 24px;
+}
+
+.authForm {
+  width: 66%;
+  display: grid;
+  gap: 8px;
+}
+
+.authFormButton {
+  max-width: 300px;
+  margin-top: 8px;
+}

app/pages/Auth/LoginPage.tsx

@@ -0,0 +1,57 @@
+import React, { useState } from "react";
+import { Link } from "react-router-dom";
+import { Button } from "components/ui/inline/Button/Button";
+import { useAppContext, passwordlessLogin, passwordlessStart } from "utils";
+
+import { VerificationModal } from "./VerificationModal";
+
+import styles from "./Auth.module.scss";
+
+export const LoginPage = () => {
+  const [modalIsOpen, setModalIsOpen] = useState(false);
+  const [email, setEmail] = useState("");
+  const { authClient } = useAppContext();
+
+  const logIn = (evt: React.SyntheticEvent) => {
+    evt.preventDefault();
+    passwordlessStart(authClient, email).then(() => {
+      setModalIsOpen(true);
+    });
+  };
+
+  return (
+    <div className={styles.authPage}>
+      <h1 className={styles.title}>For Case Managers</h1>
+      <Link to="/sign-up">New here? Sign up!</Link>
+      <p>
+        We want to make sure that your account information is safe, so you will
+        be sent a verification code to your email each time you log in. Please
+        enter in your email address and then check your email to find a 6 digit
+        verification code.
+      </p>
+      <form className={styles.authForm} onSubmit={logIn}>
+        <input
+          type="text"
+          name="email"
+          placeholder="Email address"
+          value={email}
+          onChange={(evt) => {
+            setEmail(evt.target.value);
+          }}
+        />
+        <Button addClass={styles.authFormButton} buttonType="submit">
+          Sign In
+        </Button>
+      </form>
+
+      <VerificationModal
+        email={email}
+        modalIsOpen={modalIsOpen}
+        setModalIsOpen={setModalIsOpen}
+        verifyCode={(code) => passwordlessLogin(authClient, email, code)}
+        resendCode={() => passwordlessStart(authClient, email)}
+        buttonText="Log in"
+      />
+    </div>
+  );
+};

app/pages/Auth/LogoutPage.tsx

@@ -0,0 +1,18 @@
+import React, { useEffect } from "react";
+import { Redirect } from "react-router-dom";
+import * as AuthService from "utils/AuthService";
+import { useAppContext } from "../../utils";
+
+import Config from "../../config";
+
+export const LogoutPage = () => {
+  const context = useAppContext();
+  const { setAuthState } = context;
+  const { authClient } = context;
+
+  useEffect(() => {
+    AuthService.logout(authClient, Config.AUTH0_CLIENT_ID, setAuthState);
+  });
+
+  return <Redirect to="/" />;
+};