v2.0.1 (prescottprue#376)

* fix(auth): `signInWithPhoneNumber` method fixed - prescottprue#374
* feat(auth): `login` supports `signInWithPhoneNumber` by passing `phoneNumber` and `applicationVerifier`
* feat(examples): material example includes example usage of `login` using `phoneNumber` (multi step process unlike other usage of `login`)
* feat(docs): auth docs updated with `signInWithPhoneNumber` and additions to `login`

Author: prescottprue

README.md

@@ -288,15 +288,15 @@ Join us on the [redux-firebase gitter](https://gitter.im/redux-firebase/Lobby).
 
 View docs for recipes on integrations with:
 
-* [redux-firestore](/docs/firestore.md)
-* [redux-thunk](/docs/integrations/thunks.md)
-* [redux-observable](/docs/integrations/epics.md)
-* [redux-saga](/docs/integrations/redux-saga.md)
-* [redux-form](/docs/integrations/redux-form.md)
-* [redux-auth-wrapper](/docs/integrations/routing.md#advanced)
-* [redux-persist](/docs/integrations/redux-persist.md) - [improved integration with `v2.0.0`](http://docs.react-redux-firebase.com/history/v2.0.0/docs/integrations/redux-persist.html)
+* [redux-firestore](http://react-redux-firebase.com/docs/firestore.md)
+* [redux-thunk](http://react-redux-firebase.com/docs/integrations/thunks.md)
+* [redux-observable](http://react-redux-firebase.com/docs/integrations/epics.md)
+* [redux-saga](http://react-redux-firebase.com/docs/integrations/redux-saga.md)
+* [redux-form](http://react-redux-firebase.com/docs/integrations/redux-form.md)
+* [redux-auth-wrapper](http://react-redux-firebase.com/docs/integrations/routing.md#advanced)
+* [redux-persist](http://react-redux-firebase.com/docs/integrations/redux-persist.md) - [improved integration with `v2.0.0`](http://react-redux-firebase.com/docs/integrations/redux-persist.html)
 * [react-native](/docs/integrations/react-native.md)
-* [react-native-firebase](http://docs.react-redux-firebase.com/history/v2.0.0/docs/integrations/react-native.html#native-modules) - requires `v2.0.0`
+* [react-native-firebase](http://react-redux-firebase.com/docs/integrations/react-native.html#native-modules) - requires `v2.0.0`
 
 ## Firestore
 

docs/auth.md

@@ -69,7 +69,7 @@ export default firebaseConnect()(SomeComponent) // or withFirebase(SomeComponent
       * credential (runs `ref.signInWithCredential(credential)`) :
         ```js
         {
-          credential : firebase.auth.AuthCredential // created using specific provider
+          credential : [firebase.auth.AuthCredential](https://firebase.google.com/docs/reference/js/firebase.auth.AuthCredential.html) // created using specific provider
         }
         ```
         The credential parameter is a firebase.auth.AuthCredential specific to the provider (i.e. `firebase.auth.GoogleAuthProvider.credential(null, 'some accessToken')`). For more details [please view the Firebase API reference](https://firebase.google.com/docs/reference/js/firebase.auth.GoogleAuthProvider#methods)
@@ -87,6 +87,13 @@ export default firebaseConnect()(SomeComponent) // or withFirebase(SomeComponent
           profile: Object // required (optional if updateProfileOnLogin: false config set)
         }
         ```
+      * phone number (runs `ref.signInWithPhoneNumber(phoneNumber, applicationVerifier)`). Automatic profile creation is enabled by default if you are using the `userProfile` config option. `updateProfileOnLogin` config option can be set to `false` in order to prevent this behavior.
+        ```js
+        {
+          phoneNumber: String,
+          applicationVerifier: [`firebase.auth.ApplicationVerifier`](https://firebase.google.com/docs/reference/js/firebase.auth.ApplicationVerifier.html)
+        }
+        ```
 
 ##### Returns
 [**Promise**][promise-url] that resolves with the response from firebase's login method (an [**Object**][object-url]). `credential` property is also included if using oAuth provider.
@@ -121,7 +128,7 @@ props.firebase.login({
 
   *Credential*
 ```js
-// `googleUser` from the onsuccess Google Sign In callback.
+// `googleUser` from the onsuccess Google Sign In callback
 props.firebase.login({
   credential: firebase.auth.GoogleAuthProvider.credential(googleUser.getAuthResponse().id_token)
 })
@@ -257,23 +264,48 @@ props.firebase.verifyPasswordResetCode('some reset code')
 
 
 ## signInWithPhoneNumber(code)
-Verify a password reset code from password reset email.
 
-Calls Firebase's `firebase.auth().signInWithPhoneNumber()`. If there is an error, it is added into redux state under `state.firebase.authError`.
+Signs in using a phone number in an async pattern (i.e. requires calling a second method). Calls Firebase's [`firebase.auth().signInWithPhoneNumber()`](https://firebase.google.com/docs/reference/js/firebase.auth.Auth#signInWithPhoneNumber). If there is an error, it is added into redux state under `state.firebase.authError`.
+
+From Firebase's docs:
+
+> Asynchronously signs in using a phone number. This method sends a code via SMS to the given phone number, and returns a [firebase.auth.ConfirmationResult](https://firebase.google.com/docs/reference/js/firebase.auth.ConfirmationResult.html). After the user provides the code sent to their phone, call [firebase.auth.ConfirmationResult#confirm](https://firebase.google.com/docs/reference/js/firebase.auth.ConfirmationResult.html#confirm) with the code to sign the user in.
+
+For more info, check out the following:
+* [Firebase's phone-auth guide](https://firebase.google.com/docs/auth/web/phone-auth)
+* [Firebase's auth docs reference for signInWithPhoneNumber](https://firebase.google.com/docs/reference/js/firebase.auth.Auth#signInWithPhoneNumber)
 
 ##### Examples
 
 ```js
-props.firebase.signInWithPhoneNumber('some reset code')
+const phoneNumber = "+11234567899" // for US number (123) 456-7899
+const recaptchaVerifier = new firebase.auth.RecaptchaVerifier('sign-in-button', {
+  'size': 'invisible',
+});
+firebase.signInWithPhoneNumber(phoneNumber, appVerifier)
+    .then((confirmationResult) => {
+      // SMS sent. Prompt user to type the code from the message, then sign the
+      // user in with confirmationResult.confirm(code).
+      const verificationCode = window.prompt('Please enter the verification ' +
+          'code that was sent to your mobile device.');
+      return confirmationResult.confirm(verificationCode);
+    })
+    .catch((error) => {
+      // Error; SMS not sent
+      // Handle Errors Here
+      return Promise.reject(error)
+    });
 ```
 
 ##### Parameters
-  * `code` [**String**][string-url] - Password reset code
+  * `phoneNumber` [**String**][string-url] - The user's phone number in E.164 format (e.g. `+16505550101`).
+  * `applicationVerifier` [**firebase.auth.ApplicationVerifier**][firebase-app-verifier] `required` - App verifier made with Firebase's `RecaptchaVerifier`
 
 ##### Returns
-  [**Promise**][promise-url] - Email associated with reset code
+  [**Promise**][promise-url] - Resolves with [firebase.auth.ConfirmationResult](https://firebase.google.com/docs/reference/js/firebase.auth.ConfirmationResult.html)
 
 
 [promise-url]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise
 [string-url]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String
 [object-url]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object
+[firebase-app-verifier]: https://firebase.google.com/docs/reference/js/firebase.auth.ApplicationVerifier.html

docs/getting_started.md

@@ -2,11 +2,6 @@
 
 ## Before Use
 
-## Install
-```bash
-npm install --save react-redux-firebase
-```
-
 ### Peer Dependencies
 
 Install peer dependencies: `npm i --save redux react-redux`

docs/integrations/react-native.md

@@ -46,7 +46,7 @@ Passing in an instance also allows for libraries with similar APIs (such as [`re
   };
   ```
 
-Full `react-native-firebase` example app source with styling available [in the react-native-firebase complete example](https://github.com/prescottprue/react-redux-firebase/tree/v2.0.0/examples/complete/react-native-firebase).
+Full `react-native-firebase` example app source with styling available [in the react-native-firebase complete example](https://github.com/prescottprue/react-redux-firebase/tree/master/examples/complete/react-native-firebase).
 
 ### Setup
 1. Run `create-react-native-app my-app`
@@ -77,195 +77,6 @@ Instantiate a Firebase instance outside of `react-redux-firebase` then pass it i
 1. Copy your client id out of the `GoogleService-info.plist` file (should end in `.apps.googleusercontent.com`)
 1. Place the client id into `iosClientId` variable within the example
 
-## Example App Snippets
-
-This snippet is a condensed version of [react-native complete example](/examples/complete/react-native).
-
-**NOTE**: The API used in this snippet [changes in `v2.0.0`](http://docs.react-redux-firebase.com/history/v2.0.0/docs/recipes/react-native.html#jsweb), if you are starting a new project, the new syntax is suggested
-
-**store.js**
-```js
-import * as firebase from 'firebase/app'
-import 'firebase/auth'
-import 'firebase/database'
-import 'firebase/storage'
-
-const fbConfig = {} // object containing Firebase config
-firebase.initializeApp(fbConfig) // initialize firebase instance
-const reduxConfig = {
-  enableRedirectHandling: false // required
-}
-
-const store = createStore(
- reducer,
- undefined,
- compose(
-   reactReduxFirebase(firebase, reduxConfig), // pass in firebase instance instead of config
-   applyMiddleware(...middleware)
- )
-)
-```
-import { createStore, compose } from 'redux'
-import rootReducer from './reducer'
-import { firebase as fbConfig } from './config'
-import { reactReduxFirebase } from 'react-redux-firebase'
-import { AsyncStorage } from 'react-native'
-
-export default function configureStore (initialState, history) {
-  // use compose to make a function that will create store
-  const createStoreWithMiddleware = compose(
-    reactReduxFirebase(fbConfig,
-      {
-        userProfile: 'users',
-        enableLogging: false,
-        ReactNative: { AsyncStorage },
-      }
-    )
-  )(createStore)
-
-  // create store
-  const store = createStoreWithMiddleware(rootReducer)
-
-  // Enable Webpack hot module replacement for reducers
-  if (module.hot) {
-    module.hot.accept('./reducer', () => {
-      const nextRootReducer = require('./reducer')
-      store.replaceReducer(nextRootReducer)
-    })
-  }
-
-  return store
-}
-```
-
-**App.js**:
-
-```js
-import React, { Component } from 'react'
-import { GoogleSignin, GoogleSigninButton } from 'react-native-google-signin'
-import { firebaseConnect, pathToJS, isLoaded } from 'react-redux-firebase'
-import { connect } from 'react-redux'
-import {
-  AppRegistry,
-  StyleSheet,
-  Text,
-  View,
-  TouchableOpacity,
-} from 'react-native'
-import configureStore from './store'
-const initialState = { firebase: { authError: null, auth: undefined }}
-const store = configureStore(initialState)
-
-const iosClientId = '499842460400-teaflfd8695oilltk5qkvl5688ebgq6b.apps.googleusercontent.com' // get this from plist file
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#F5FCFF',
-  },
-  welcome: {
-    fontSize: 20,
-    textAlign: 'center',
-    margin: 10,
-  },
-  instructions: {
-    textAlign: 'center',
-    color: '#333333',
-    marginBottom: 5,
-  },
-})
-
-@firebaseConnect()
-@connect(({ firebase }) => ({
-  auth: pathToJS(firebase, 'auth', undefined)
-}))
-export default class GoogleSigninSampleApp extends Component {
-  componentDidMount() {
-    this._setupGoogleSignin()
-  }
-
-  render() {
-    const { auth } = this.props
-    if (!isLoaded(auth)) {
-      return (
-        <View style={styles.container}>
-          <Text>Loading...</Text>
-        </View>
-      )
-    }
-    if (!this.props.auth) {
-      return (
-        <View style={styles.container}>
-          <GoogleSigninButton
-            style={{width: 212, height: 48}}
-            size={GoogleSigninButton.Size.Standard}
-            color={GoogleSigninButton.Color.Auto}
-            onPress={() => this._signIn()}
-          />
-        </View>
-      )
-    }
-    return (
-      <View style={styles.container}>
-        <Text style={{fontSize: 18, fontWeight: 'bold', marginBottom: 20}}>
-          Welcome {this.props.auth.displayName}
-        </Text>
-        <Text>
-          Your email is: {this.props.auth.email}</Text>
-
-        <TouchableOpacity onPress={() => {this._signOut() }}>
-          <View style={{marginTop: 50}}>
-            <Text>Log out</Text>
-          </View>
-        </TouchableOpacity>
-      </View>
-    )
-  }
-
-  // based on react-native-google-signin example
-  async _setupGoogleSignin() {
-    try {
-      await GoogleSignin.hasPlayServices({ autoResolve: true })
-      await GoogleSignin.configure({
-        iosClientId,
-        offlineAccess: false
-      })
-
-      const user = await GoogleSignin.currentUserAsync()
-      const creds = this.props.firebase.auth.GoogleAuthProvider.credential(null, user.accessToken)
-      await this.props.firebase.auth().signInWithCredential(creds)
-    }
-    catch(err) {
-      console.log("Google signin error", err.code, err.message)
-    }
-  }
-
-  _signIn() {
-    const { auth } = this.props.firebase
-    return GoogleSignin.signIn()
-      .then((user) => {
-        const creds = auth.GoogleAuthProvider.credential(null, user.accessToken)
-        return auth().signInWithCredential(creds)
-      })
-      .catch((err) => {
-        console.error('error authing with firebase:', err)
-        return Promise.reject(err)
-      })
-  }
-
-  _signOut() {
-    return GoogleSignin.revokeAccess()
-      .then(() => GoogleSignin.signOut())
-      .then(() => this.props.firebase.logout())
-  }
-}
-
-AppRegistry.registerComponent('GoogleSigninSampleApp', () => GoogleSigninSampleApp)
-
-```
-
 ## Creating Your Own
 
 We are going to use the project name Devshare for example here. For your project, use your project name everywhere where Devshare is used.

examples/complete/material/src/constants.js

@@ -7,6 +7,7 @@ export const SIGNUP_PATH = '/signup'
 export const ACCOUNT_FORM_NAME = 'account'
 export const LOGIN_FORM_NAME = 'login'
 export const SIGNUP_FORM_NAME = 'signup'
+export const PHONE_FORM_NAME = 'phone'
 export const NEW_PROJECT_FORM_NAME = 'newProject'
 export const RECOVER_CODE_FORM_NAME = 'recoverCode'
 export const RECOVER_EMAIL_FORM_NAME = 'recoverEmail'
@@ -16,6 +17,7 @@ export const formNames = {
   account: ACCOUNT_FORM_NAME,
   signup: SIGNUP_FORM_NAME,
   login: LOGIN_FORM_NAME,
+  phone: PHONE_FORM_NAME,
   recoverCode: RECOVER_CODE_FORM_NAME,
   recoverEmail: RECOVER_EMAIL_FORM_NAME,
   newTodo: NEW_TODO_FORM_NAME

examples/complete/material/src/modules/notification/components/withNotifications.js

@@ -6,6 +6,7 @@ const withNotifications = compose(
   withStore,
   withHandlers({
     showError: ({ store }) => err => actions.showError(err)(store.dispatch),
+    showSuccess: ({ store }) => err => actions.showSuccess(err)(store.dispatch),
     dismissNotification: ({ store }) => id =>
       actions.dismissNotification(id)(store.dispatch)
   })

examples/complete/material/src/routes/Home/components/TodosList/TodosList.js

@@ -2,20 +2,18 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { map } from 'lodash'
 import { compose, withHandlers } from 'recompose'
-import { isLoaded, isEmpty, withFirebase } from 'react-redux-firebase'
+import { isEmpty, withFirebase } from 'react-redux-firebase'
 import { List } from 'material-ui/List'
-import CircularProgress from 'material-ui/CircularProgress'
 import Paper from 'material-ui/Paper'
 import Subheader from 'material-ui/Subheader'
 import { withNotifications } from 'modules/notification'
+import { spinnerWhileLoading } from 'utils/components'
 import TodoItem from '../TodoItem'
 import classes from './TodosList.scss'
 
 const TodosList = ({ todos, toggleDone, deleteTodo }) => (
   <Paper className={classes.container}>
-    {!isLoaded(todos) ? (
-      <CircularProgress />
-    ) : !isEmpty(todos) ? (
+    {!isEmpty(todos) ? (
       <div>
         <Subheader>Todos</Subheader>
         <List className={classes.list}>
@@ -31,7 +29,7 @@ const TodosList = ({ todos, toggleDone, deleteTodo }) => (
         </List>
       </div>
     ) : (
-      <div className={classes.list}>No Todos</div>
+      <div className={classes.empty}>No Todos</div>
     )}
   </Paper>
 )
@@ -46,6 +44,7 @@ TodosList.propTypes = {
 export default compose(
   withFirebase, // firebaseConnect() can also be used
   withNotifications, // adds props.showError from notfication module
+  spinnerWhileLoading(['todos']),
   withHandlers({
     toggleDone: props => (todo, id) => {
       const { firebase, auth } = props

examples/complete/material/src/routes/Home/components/TodosList/TodosList.scss

@@ -4,3 +4,6 @@
   min-width: 300px;
   margin-bottom: 2rem;
 }
+.empty {
+  @extend .flex-row-center;
+}