Docs updates. Start of fix for error using signInWithPhoneNumber - #374

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

@@ -121,7 +121,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,18 +257,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 = getPhoneNumberFromUserInput();
+const recaptchaVerifier = new firebase.auth.RecaptchaVerifier('sign-in-button', {
+  'size': 'invisible',
+  'callback': function(response) {
+    // reCAPTCHA solved, allow signInWithPhoneNumber.
+    onSignInSubmit();
+  }
+});
+firebase.auth().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
@@ -277,3 +307,4 @@ props.firebase.signInWithPhoneNumber('some reset code')
 [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.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-redux-firebase",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "Redux integration for Firebase. Comes with a Higher Order Components for use with React.",
   "main": "lib/index.js",
   "module": "es/index.js",