refactor: remove authPassword from store (#2360)

fix(boilerplate): removes authPassword from authenticationStore -fixes #2223 (#2360 by @lodev09 )
infinitered · Mar 14, 2023 · 1d41cf5 · 1d41cf5
1 parent 9010bd8
commit 1d41cf5
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 44 deletions.
diff --git a/boilerplate/app/models/AuthenticationStore.ts b/boilerplate/app/models/AuthenticationStore.ts
@@ -5,27 +5,17 @@ export const AuthenticationStoreModel = types
   .props({
     authToken: types.maybe(types.string),
     authEmail: "",
-    authPassword: "",
   })
   .views((store) => ({
     get isAuthenticated() {
       return !!store.authToken
     },
-    get validationErrors() {
-      return {
-        authEmail: (function () {
-          if (store.authEmail.length === 0) return "can't be blank"
-          if (store.authEmail.length < 6) return "must be at least 6 characters"
-          if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(store.authEmail))
-            return "must be a valid email address"
-          return ""
-        })(),
-        authPassword: (function () {
-          if (store.authPassword.length === 0) return "can't be blank"
-          if (store.authPassword.length < 6) return "must be at least 6 characters"
-          return ""
-        })(),
-      }
+    get validationError() {
+      if (store.authEmail.length === 0) return "can't be blank"
+      if (store.authEmail.length < 6) return "must be at least 6 characters"
+      if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(store.authEmail))
+        return "must be a valid email address"
+      return ""
     },
   }))
   .actions((store) => ({
@@ -35,25 +25,11 @@ export const AuthenticationStoreModel = types
     setAuthEmail(value: string) {
       store.authEmail = value.replace(/ /g, "")
     },
-    setAuthPassword(value: string) {
-      store.authPassword = value.replace(/ /g, "")
-    },
     logout() {
       store.authToken = undefined
       store.authEmail = ""
-      store.authPassword = ""
     },
   }))
-  .preProcessSnapshot((snapshot) => {
-    // remove sensitive data from snapshot to avoid secrets
-    // being stored in AsyncStorage in plain text if backing up store
-    const { authToken, authPassword, ...rest } = snapshot // eslint-disable-line @typescript-eslint/no-unused-vars
-
-    // see the following for strategies to consider storing secrets on device
-    // https://reactnative.dev/docs/security#storing-sensitive-info
-
-    return rest
-  })
 
 export interface AuthenticationStore extends Instance<typeof AuthenticationStoreModel> {}
 export interface AuthenticationStoreSnapshot extends SnapshotOut<typeof AuthenticationStoreModel> {}

diff --git a/boilerplate/app/screens/LoginScreen.tsx b/boilerplate/app/screens/LoginScreen.tsx
@@ -10,18 +10,13 @@ interface LoginScreenProps extends AppStackScreenProps<"Login"> {}
 
 export const LoginScreen: FC<LoginScreenProps> = observer(function LoginScreen(_props) {
   const authPasswordInput = useRef<TextInput>()
+
+  const [authPassword, setAuthPassword] = useState("")
   const [isAuthPasswordHidden, setIsAuthPasswordHidden] = useState(true)
   const [isSubmitted, setIsSubmitted] = useState(false)
   const [attemptsCount, setAttemptsCount] = useState(0)
   const {
-    authenticationStore: {
-      authEmail,
-      authPassword,
-      setAuthEmail,
-      setAuthPassword,
-      setAuthToken,
-      validationErrors,
-    },
+    authenticationStore: { authEmail, setAuthEmail, setAuthToken, validationError },
   } = useStores()
 
   useEffect(() => {
@@ -31,13 +26,13 @@ export const LoginScreen: FC<LoginScreenProps> = observer(function LoginScreen(_
     setAuthPassword("ign1teIsAwes0m3")
   }, [])
 
-  const errors: typeof validationErrors = isSubmitted ? validationErrors : ({} as any)
+  const error = isSubmitted ? validationError : ""
 
   function login() {
     setIsSubmitted(true)
     setAttemptsCount(attemptsCount + 1)
 
-    if (Object.values(validationErrors).some((v) => !!v)) return
+    if (validationError) return
 
     // Make a request to your server to get an authentication token.
     // If successful, reset the fields and set the token.
@@ -92,8 +87,8 @@ export const LoginScreen: FC<LoginScreenProps> = observer(function LoginScreen(_
         keyboardType="email-address"
         labelTx="loginScreen.emailFieldLabel"
         placeholderTx="loginScreen.emailFieldPlaceholder"
-        helper={errors?.authEmail}
-        status={errors?.authEmail ? "error" : undefined}
+        helper={error}
+        status={error ? "error" : undefined}
         onSubmitEditing={() => authPasswordInput.current?.focus()}
       />
 
@@ -108,8 +103,6 @@ export const LoginScreen: FC<LoginScreenProps> = observer(function LoginScreen(_
         secureTextEntry={isAuthPasswordHidden}
         labelTx="loginScreen.passwordFieldLabel"
         placeholderTx="loginScreen.passwordFieldPlaceholder"
-        helper={errors?.authPassword}
-        status={errors?.authPassword ? "error" : undefined}
         onSubmitEditing={login}
         RightAccessory={PasswordRightAccessory}
       />