Refactor authentication logic. Fix re-authentication.

__tests__/utils/mockStore.ts

@@ -56,16 +56,18 @@ export default {
   warn: jest.fn(),
   firebaseStore: {
     phone: '1234567890',
-    token: null,
+    token: undefined as any,
     resource: null,
     inviteCode: null,
     buttonText: 'Verify',
     registered: false,
     errorMessage: '',
+    providerName: 'firebaseStore',
     setState: jest.fn(),
     reset: jest.fn(),
     setInviteCode: jest.fn(),
     afterAttach: jest.fn(),
+    getLoginCredentials: jest.fn(),
     logout: jest.fn(),
     beforeDestroy: jest.fn(),
     verifyPhone: jest.fn(),

src/components/Connectivity.tsx

@@ -4,11 +4,10 @@ import {reaction, observable} from 'mobx'
 import {inject} from 'mobx-react/native'
 import {Actions} from 'react-native-router-flux'
 import * as log from '../utils/log'
-
-// TODO: need to export declaration file to make this work as expected?
 import {IWocky} from 'wocky-client'
 import {IHomeStore} from '../store/HomeStore'
 import {ILocationStore} from '../store/LocationStore'
+import {IAuthStore} from 'src/store/AuthStore'
 
 type Props = {
   wocky?: IWocky
@@ -17,9 +16,10 @@ type Props = {
   locationStore?: ILocationStore
   log?: any
   analytics?: any
+  authStore?: IAuthStore
 }
 
-@inject('wocky', 'homeStore', 'notificationStore', 'locationStore', 'log', 'analytics')
+@inject('wocky', 'homeStore', 'notificationStore', 'locationStore', 'log', 'analytics', 'authStore')
 export default class Connectivity extends React.Component<Props> {
   @observable lastDisconnected = Date.now()
   retryDelay = 1000
@@ -35,12 +35,14 @@ export default class Connectivity extends React.Component<Props> {
       this.props.log('NETINFO INITIAL:', reach, {level: log.levels.INFO})
       this._handleConnectionInfoChange(reach)
     })
+    // todo: refactor. Since interval is hardcoded here exponential backoff won't work...it checks every second regardless of changes to retryDelay
     this.intervalId = setInterval(async () => {
       const model = this.props.wocky!
       if (
         this.isActive &&
         !model.connected &&
         !model.connecting &&
+        this.props.authStore!.canLogin &&
         Date.now() - this.lastDisconnected >= this.retryDelay
       ) {
         await this.tryReconnect(`retry: ${this.retryDelay}`)
@@ -69,26 +71,20 @@ export default class Connectivity extends React.Component<Props> {
   tryReconnect = async reason => {
     const info = {reason, currentState: AppState.currentState}
     const model = this.props.wocky!
-    if (
-      AppState.currentState === 'active' &&
-      !model.connected &&
-      !model.connecting &&
-      (model.phoneNumber || model.accessToken) &&
-      model.username &&
-      model.password &&
-      model.host
-    ) {
+    const {authStore} = this.props
+    if (AppState.currentState === 'active' && !model.connected && !model.connecting) {
       try {
         this.props.analytics.track('reconnect_try', {
           ...info,
           delay: this.retryDelay,
           connectionInfo: this.connectionInfo,
         })
-        await model.login({})
+        await authStore!.login()
         this.props.analytics.track('reconnect_success', {...info})
         this.retryDelay = 1000
       } catch (e) {
         this.props.analytics.track('reconnect_fail', {...info, error: e})
+        // todo: error message will be different with GraphQL (?)
         if (e.toString().indexOf('not-authorized') !== -1 || e.toString().indexOf('invalid')) {
           this.retryDelay = 1e9
           Actions.logout()

src/components/Router.tsx

@@ -50,6 +50,7 @@ import { IStore } from 'src/store'
 import { IPersistable } from 'src/store/PersistableModel'
 import OnboardingSwiper from './Onboarding/OnboardingSwiper'
 import ChatTitle from './Chats/ChatTitle'
+import { IAuthStore } from 'src/store/AuthStore';
 const iconClose = require('../../images/iconClose.png')
 const sendActive = require('../../images/sendActive.png')
 
@@ -62,11 +63,12 @@ type Props = {
   iconStore?: IconStore
   store?: IStore & IPersistable
   onceStore?: IOnceStore
+  authStore?: IAuthStore
   analytics?: any
   log?: any
 }
 
-@inject('store', 'wocky', 'locationStore', 'iconStore', 'analytics', 'navStore', 'log', 'onceStore')
+@inject('store', 'wocky', 'locationStore', 'iconStore', 'analytics', 'navStore', 'log', 'onceStore', 'authStore')
 @observer
 class TinyRobotRouter extends React.Component<Props> {
   componentDidMount() {
@@ -98,19 +100,19 @@ class TinyRobotRouter extends React.Component<Props> {
   }
 
   render() {
-    const {store, iconStore, wocky, navStore, onceStore} = this.props
+    const {store, iconStore, wocky, navStore, onceStore, authStore} = this.props
 
     return (
       <Router onStateChange={() => navStore!.setScene(Actions.currentScene)} {...navBarStyle} uriPrefix={uriPrefix} onDeepLink={this.onDeepLink}>
         <Tabs hideNavBar hideTabBar>
           <Stack hideNavBar lightbox type="replace">
             <Scene key="load" component={Launch} on={store!.hydrate} success="checkCredentials" failure="preConnection" />
-            <Scene key="checkCredentials" on={() => wocky!.username && wocky!.password && wocky!.host} success="checkProfile" failure="preConnection" />
-            <Scene key="connect" on={this.login} success="checkHandle" failure="preConnection" />
+            <Scene key="checkCredentials" on={() => authStore!.canLogin} success="checkProfile" failure="preConnection" />
+            <Scene key="connect" on={authStore!.login} success="checkHandle" failure="preConnection" />
             <Scene key="checkProfile" on={() => wocky!.profile} success="checkHandle" failure="connect" />
             <Scene key="checkHandle" on={() => wocky!.profile!.handle} success="checkOnboarded" failure="signUp" />
             <Scene key="checkOnboarded" on={() => onceStore!.onboarded} success="logged" failure="onboarding" />
-            <Scene key="logout" on={store!.logout} success="preConnection" />
+            <Scene key="logout" on={authStore!.logout} success="preConnection" />
           </Stack>
           <Lightbox>
             <Stack initial hideNavBar key="main">
@@ -211,17 +213,6 @@ class TinyRobotRouter extends React.Component<Props> {
     this.props.store!.searchStore.setGlobal('')
     Actions.pop()
   }
-
-  // TODO: Move it outside
-  login = async (data = {}) => {
-    try {
-      await this.props.wocky!.login(data) // Remove that after new typings for MST3
-      return true
-    } catch (error) {
-      this.props.analytics.track('error_connection', {error})
-    }
-    return false
-  }
 }
 
 export default TinyRobotRouter

src/components/TestRegister.tsx

@@ -6,20 +6,22 @@ import {k, width} from './Global'
 import {colors} from '../constants'
 import {INavStore} from '../store/NavStore'
 import {IWocky} from 'wocky-client'
+import {IAuthStore} from 'src/store/AuthStore'
 
 type Props = {
   wocky?: IWocky
   analytics?: any
   navStore?: INavStore
   name: string
   warn?: any
+  authStore: IAuthStore
 }
 
 type State = {
   text: string
 }
 
-@inject('wocky', 'analytics', 'warn', 'navStore')
+@inject('wocky', 'analytics', 'warn', 'navStore', 'authStore')
 @observer
 class TestRegister extends React.Component<Props, State> {
   state: State = {
@@ -30,7 +32,9 @@ class TestRegister extends React.Component<Props, State> {
     if (this.props.navStore!.scene !== this.props.name) {
       return
     }
-    Actions.connect({phoneNumber: `+1555${this.state.text}`})
+
+    this.props.authStore!.register(`+1555${this.state.text}`, 'bypass')
+    Actions.connect()
   }
 
   render() {

src/store/AuthStore.ts

@@ -0,0 +1,55 @@
+import {types, Instance, getParent, flow, applySnapshot} from 'mobx-state-tree'
+import analytics from 'src/utils/analytics'
+import strategies, {AuthStrategy, Strategy} from './authStrategies'
+
+const AuthStore = types
+  .model('AuthStore', {
+    phone: types.maybe(types.string),
+    strategyName: types.optional(types.enumeration(['firebase', 'bypass']), 'firebase'),
+  })
+  .views(self => ({
+    get canLogin(): boolean {
+      return !!self.phone
+    },
+  }))
+  .actions(self => {
+    const store = getParent<any>(self)
+    const {wocky, homeStore, locationStore} = store
+    let strategy: AuthStrategy | null = null
+
+    return {
+      register: (phone: string, s: Strategy) => {
+        self.phone = phone
+        self.strategyName = s
+      },
+
+      login(): Promise<boolean> {
+        try {
+          if (!self.canLogin) {
+            throw new Error('Phone number must be set before login.')
+          }
+          strategy = strategies[self.strategyName]
+          return strategy.login(store)
+        } catch (error) {
+          analytics.track('error_connection', {error})
+        }
+        return Promise.resolve(false)
+      },
+
+      logout: flow(function*() {
+        homeStore.logout()
+        locationStore.logout()
+        if (strategy) {
+          yield strategy.logout(store)
+        }
+        applySnapshot(self, {})
+        strategy = null
+        yield wocky.logout()
+        return true
+      }),
+    }
+  })
+
+export default AuthStore
+
+export interface IAuthStore extends Instance<typeof AuthStore> {}

src/store/FirebaseStore.ts

@@ -1,28 +1,29 @@
 import {types, getEnv, flow, getParent} from 'mobx-state-tree'
 import {when} from 'mobx'
-import {IWocky} from 'wocky-client'
+import {IWocky, Credentials} from 'wocky-client'
 import {IEnv} from '.'
 import {settings} from '../globals'
+import {RNFirebase} from 'react-native-firebase'
+import {IAuthStore} from './AuthStore'
 
 type State = {
-  phone?: string
-  token?: string
   resource?: string
   buttonText?: string
   registered?: boolean
   errorMessage?: string
+  token?: string
 }
 
 const codeUrlString = '?inviteCode='
 
 const FirebaseStore = types
   .model('FirebaseStore', {
-    phone: '',
-    token: types.maybeNull(types.string),
     resource: types.maybeNull(types.string),
     inviteCode: types.maybeNull(types.string),
+    token: types.maybeNull(types.string),
   })
   .volatile(() => ({
+    phone: '',
     buttonText: 'Verify',
     registered: false,
     errorMessage: '', // to avoid strange typescript errors when set it to string or null,
@@ -42,6 +43,7 @@ const FirebaseStore = types
   }))
   .actions(self => {
     const {firebase, auth, logger, analytics}: IEnv = getEnv(self)
+    const {authStore} = getParent<any>(self)
     let wocky: IWocky
     let confirmResult: any
     let unsubscribe: any
@@ -95,9 +97,10 @@ const FirebaseStore = types
       if (user) {
         try {
           await auth!.currentUser!.reload()
-          const token = await auth!.currentUser!.getIdToken(true)
-          self.setState({token})
-          // await firebase.auth().currentUser.updateProfile({phoneNumber: user.providerData[0].phoneNumber, displayName: '123'});)
+          // self.token = await auth!.currentUser!.getIdToken(true)
+          self.setState({
+            token: await auth!.currentUser!.getIdToken(true),
+          })
         } catch (err) {
           logger.warn('Firebase onAuthStateChanged error:', err)
           analytics.track('auth_error_firebase', {error: err})
@@ -110,6 +113,20 @@ const FirebaseStore = types
       }
     }
 
+    const getLoginCredentials = flow(function*() {
+      if (!self.token) {
+        return null
+      }
+      // Refresh firebase token if less than 5 minutes from expiry
+      const tokenResult: RNFirebase.IdTokenResult = yield auth.currentUser!.getIdTokenResult(false)
+      // todo: use moment instead of Date
+      if (tokenResult.claims.exp - Date.now() / 1000 < 300) {
+        self.token = yield auth.currentUser!.getIdToken(true)
+      }
+
+      return {typ: 'firebase', sub: self.token, phone_number: self.phone}
+    }) as () => Promise<Credentials | null>
+
     const logout = flow(function*() {
       analytics.track('logout')
       if (self.token) {
@@ -121,12 +138,7 @@ const FirebaseStore = types
           logger.warn('firebase logout error', err)
         }
       }
-      try {
-        yield wocky.logout()
-      } catch (err) {
-        analytics.track('error_wocky_logout', {error: err})
-        logger.warn('wocky logout error', err)
-      }
+
       self.reset()
       confirmResult = null
       return true
@@ -197,7 +209,8 @@ const FirebaseStore = types
     const registerWithToken = flow(function*() {
       try {
         self.setState({buttonText: 'Connecting...'})
-        yield wocky.login({accessToken: self.token!})
+        authStore.register(self.phone, 'firebase')
+        yield (authStore as IAuthStore).login()
         self.setState({buttonText: 'Verify', registered: true})
       } catch (err) {
         logger.warn('RegisterWithToken error', err)
@@ -206,6 +219,7 @@ const FirebaseStore = types
       } finally {
         self.setState({
           buttonText: 'Verify',
+          // todo: shouldn't overwrite errorMessage here
           errorMessage: '',
         })
       }
@@ -249,6 +263,7 @@ const FirebaseStore = types
 
     return {
       afterAttach,
+      getLoginCredentials,
       logout,
       beforeDestroy,
       verifyPhone,

src/store/LocationStore.ts

@@ -6,7 +6,6 @@ import DeviceInfo from 'react-native-device-info'
 import {settings} from '../globals'
 import {Location, IWocky} from 'wocky-client'
 import _ from 'lodash'
-import {IStore} from '.'
 
 export const BG_STATE_PROPS = [
   'elasticityMultiplier',
@@ -299,7 +298,8 @@ const LocationStore = types
     }
   })
   .actions(self => {
-    const {wocky, onceStore} = getRoot<IStore>(self)
+    // const {wocky, onceStore} = getRoot<IStore>(self)
+    const {wocky, onceStore} = getRoot<any>(self)
     let reactions: IReactionDisposer[] = []
     const {logger} = getEnv(self)