add account deletion to settings (#718)

* add delete account
* fix: test snapshots

src/context/AuthContext.tsx

@@ -61,6 +61,7 @@ type ContextType = {
   handleLoginGoogle: () => void
   handleLoginApple: () => void
   handleLogout: () => Promise<void>
+  handleDeleteAccount: () => Promise<void>
 }
 
 const AuthContext = React.createContext<ContextType | undefined>(undefined)
@@ -125,40 +126,67 @@ function useAppleAuth() {
 export const AuthProvider: React.FC<AuthenticationProviderProps> = ({
   children,
 }) => {
+  const [firebaseUser, setFirebaseUser] = useState<firebase.User>()
   const [loading, setLoading] = useState(true)
   const [user, setUser] = useState<User>()
 
   const handleLoginGoogle = useGoogleAuth()
   const handleLoginApple = useAppleAuth()
 
   useEffect(() => {
-    firebase.auth().onAuthStateChanged(async firebaseUser => {
+    firebase.auth().onAuthStateChanged(newFirebaseUser => {
       setLoading(false)
-      if (!firebaseUser) return
+      setFirebaseUser(newFirebaseUser)
+    })
+  }, [])
 
+  useEffect(() => {
+    const updateUser = async () => {
+      if (!firebaseUser) {
+        setUser(null)
+        return
+      }
+      const idToken = await firebaseUser.getIdToken()
       setUser({
         name: firebaseUser.displayName,
         email: firebaseUser.email,
         uid: firebaseUser.uid,
-        idToken: await firebaseUser.getIdToken(),
+        idToken,
       })
-    })
-  }, [])
+    }
+
+    updateUser()
+  }, [firebaseUser])
 
   const handleLogout = useCallback<ContextType['handleLogout']>(async () => {
     await firebase.auth().signOut()
     setUser(null)
   }, [])
 
+  const handleDeleteAccount = useCallback<
+    ContextType['handleLogout']
+  >(async () => {
+    if (firebaseUser) await firebaseUser.delete()
+    setUser(null)
+  }, [firebaseUser])
+
   const context = useMemo<ContextType>(
     () => ({
       loading,
       user,
       handleLogout,
       handleLoginApple,
       handleLoginGoogle,
+      handleDeleteAccount,
     }),
-    [user, loading, handleLogout, handleLoginGoogle, handleLoginApple]
+    [
+      user,
+      loading,
+      handleLogout,
+      handleLoginGoogle,
+      handleLoginApple,
+      handleDeleteAccount,
+    ]
   )
 
   return <AuthContext.Provider value={context}>{children}</AuthContext.Provider>

src/hooks/use-delete-account.ts

@@ -0,0 +1,38 @@
+import { useCallback, useMemo } from 'react'
+
+import { useAuth } from '../context/AuthContext'
+import { useSecrets } from '../context/SecretsContext'
+import apiFactory from '../lib/api'
+
+export const useDeleteAccount = () => {
+  const { user, handleDeleteAccount } = useAuth()
+  const api = useMemo(() => apiFactory({ idToken: user.idToken }), [user])
+  const { secrets, replace } = useSecrets()
+
+  const deleteAllTokens = useCallback(async () => {
+    const deletePromises = []
+
+    secrets.forEach(({ tokens }) => {
+      if (Array.isArray(tokens)) {
+        tokens.forEach(t => {
+          deletePromises.push(api.revokeToken(t.token))
+        })
+      }
+    })
+    await Promise.all(deletePromises)
+  }, [api, secrets])
+
+  const deleteAllSecrets = useCallback(async () => {
+    await replace([])
+  }, [replace])
+
+  const deleteAccount = useCallback(async () => {
+    await deleteAllTokens()
+    await deleteAllSecrets()
+    await handleDeleteAccount()
+  }, [deleteAllTokens, deleteAllSecrets, handleDeleteAccount])
+
+  return {
+    deleteAccount,
+  }
+}

src/screens/SettingsScreen.test.tsx.snap.android

@@ -553,6 +553,110 @@ exports[`SettingsScreen should match snapshot 1`] = `
                 </View>
               </View>
             </View>
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "transparent",
+                  "borderColor": "transparent",
+                  "borderRadius": 4,
+                  "borderStyle": "solid",
+                  "borderWidth": 0,
+                  "elevation": 0,
+                  "marginTop": 80,
+                  "minWidth": 64,
+                  "shadowColor": "#000000",
+                  "shadowOffset": Object {
+                    "height": 0,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0,
+                  "shadowRadius": 0,
+                }
+              }
+            >
+              <View
+                accessibilityRole="button"
+                accessibilityState={
+                  Object {
+                    "disabled": false,
+                  }
+                }
+                accessible={true}
+                focusable={true}
+                onClick={[Function]}
+                onResponderGrant={[Function]}
+                onResponderMove={[Function]}
+                onResponderRelease={[Function]}
+                onResponderTerminate={[Function]}
+                onResponderTerminationRequest={[Function]}
+                onStartShouldSetResponder={[Function]}
+                style={
+                  Array [
+                    Object {
+                      "overflow": "hidden",
+                    },
+                    Object {
+                      "borderRadius": 4,
+                    },
+                  ]
+                }
+              >
+                <View
+                  style={
+                    Array [
+                      Object {
+                        "alignItems": "center",
+                        "flexDirection": "row",
+                        "justifyContent": "center",
+                      },
+                      undefined,
+                    ]
+                  }
+                >
+                  <Text
+                    numberOfLines={1}
+                    selectable={false}
+                    style={
+                      Array [
+                        Object {
+                          "color": "#6D6D68",
+                          "fontFamily": "sans-serif",
+                          "fontWeight": "normal",
+                        },
+                        Object {
+                          "textAlign": "left",
+                        },
+                        Array [
+                          Object {
+                            "letterSpacing": 1,
+                            "marginHorizontal": 16,
+                            "marginVertical": 9,
+                            "textAlign": "center",
+                          },
+                          undefined,
+                          Object {
+                            "textTransform": "uppercase",
+                          },
+                          Object {
+                            "color": "red",
+                            "fontFamily": "sans-serif-medium",
+                            "fontWeight": "normal",
+                          },
+                          Object {
+                            "fontFamily": "sans-serif-medium",
+                            "fontWeight": "normal",
+                          },
+                          undefined,
+                        ],
+                      ]
+                    }
+                  >
+                    Delete account
+                  </Text>
+                </View>
+              </View>
+            </View>
           </View>
         </View>
       </View>

src/screens/SettingsScreen.test.tsx.snap.ios

@@ -552,6 +552,110 @@ exports[`SettingsScreen should match snapshot 1`] = `
                 </View>
               </View>
             </View>
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "transparent",
+                  "borderColor": "transparent",
+                  "borderRadius": 4,
+                  "borderStyle": "solid",
+                  "borderWidth": 0,
+                  "elevation": 0,
+                  "marginTop": 80,
+                  "minWidth": 64,
+                  "shadowColor": "#000000",
+                  "shadowOffset": Object {
+                    "height": 0,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0,
+                  "shadowRadius": 0,
+                }
+              }
+            >
+              <View
+                accessibilityRole="button"
+                accessibilityState={
+                  Object {
+                    "disabled": false,
+                  }
+                }
+                accessible={true}
+                focusable={true}
+                onClick={[Function]}
+                onResponderGrant={[Function]}
+                onResponderMove={[Function]}
+                onResponderRelease={[Function]}
+                onResponderTerminate={[Function]}
+                onResponderTerminationRequest={[Function]}
+                onStartShouldSetResponder={[Function]}
+                style={
+                  Array [
+                    Object {
+                      "overflow": "hidden",
+                    },
+                    Object {
+                      "borderRadius": 4,
+                    },
+                  ]
+                }
+              >
+                <View
+                  style={
+                    Array [
+                      Object {
+                        "alignItems": "center",
+                        "flexDirection": "row",
+                        "justifyContent": "center",
+                      },
+                      undefined,
+                    ]
+                  }
+                >
+                  <Text
+                    numberOfLines={1}
+                    selectable={false}
+                    style={
+                      Array [
+                        Object {
+                          "color": "#6D6D68",
+                          "fontFamily": "System",
+                          "fontWeight": "400",
+                        },
+                        Object {
+                          "textAlign": "left",
+                        },
+                        Array [
+                          Object {
+                            "letterSpacing": 1,
+                            "marginHorizontal": 16,
+                            "marginVertical": 9,
+                            "textAlign": "center",
+                          },
+                          undefined,
+                          Object {
+                            "textTransform": "uppercase",
+                          },
+                          Object {
+                            "color": "red",
+                            "fontFamily": "System",
+                            "fontWeight": "500",
+                          },
+                          Object {
+                            "fontFamily": "System",
+                            "fontWeight": "500",
+                          },
+                          undefined,
+                        ],
+                      ]
+                    }
+                  >
+                    Delete account
+                  </Text>
+                </View>
+              </View>
+            </View>
           </View>
         </View>
       </View>