Skip to content

Version 1.4.0 Beta 4 #105

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 9 commits into from
Apr 3, 2017
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion docs/api/compose.md
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,13 @@ Middleware that handles configuration (placed in redux's
profile when logging in. (default: `false`)
- `config.enableRedirectHandling` **[Boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** Whether or not to enable
auth redirect handling listener. (default: `true`)
- `config.onAuthStateChanged` **[Function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function)** Function run when auth state
changes. Argument Pattern: `(authData, firebase, dispatch)`
- `config.onRedirectResult` **[Function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function)** Function run when redirect
result is returned. Argument Pattern: `(authData, firebase, dispatch)`
- `config.profileFactory` **[Function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function)** Factory for modifying how user profile is saved.
- `config.uploadFileDataFactory` **[Function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function)** Factory for modifying how file meta data is written during file uploads
- `config.uploadFileDataFactory` **[Function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function)** Factory for modifying
how file meta data is written during file uploads
- `config.profileParamsToPopulate` **([Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) \| [String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String))** Parameters within
profile object to populate
- `config.autoPopulateProfile` **[Boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** Whether or not to
Expand Down
2 changes: 1 addition & 1 deletion docs/auth.md
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@ export default firebaseConnect()(SomeComponent)


##### Returns
[**Promise**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) with authData in case of success or the error otherwise.
[**Promise**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) with an object containing profile, user, (also credential if using oAuth provider) in case of success or the error otherwise.

##### Examples

Expand Down
142 changes: 141 additions & 1 deletion docs/recipes/react-native.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,47 @@
1. Place the client id into `iosClientId` variable within the example


## Example App Snippet
## Example App Snippets

This snippet is a condensed version of [react-native complete example](/examples/complete/react-native).

**store.js**
```js
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'
Expand Down Expand Up @@ -143,3 +180,106 @@ export default class GoogleSigninSampleApp extends Component {
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.

### Start
1. Make sure you have [`create-react-native-app`](https://github.com/react-community/create-react-native-app) installed, or install it using `npm install -g create-react-native-app`.
1. Run `create-react-native-app Devshare` (again replace Devshare with the name of your project)
1. After that is complete, eject using `yarn eject` or `npm run eject`

### Download Firebase Config
1. Download `GoogleService-Info.plist` file from Firebase
1. Visit Over page and click Add Firebase to iOS

![img](/docs/static/FirebaseOverview.png)

1. Fill in application info in register modal and click register

![img](/docs/static/RegisterApp.png)

1. Download the .plist file and place it in your `ios` folder

![img](/docs/static/PlistDownload.png)

### Add `react-native-google-signin`

1. Add [`react-native-google-signin`](https://github.com/devfd/react-native-google-signin) to the project
1. Run `npm i --save react-native-google-signin` to include it within JS dependencies
1. Download the [`react-native-google-signin`](https://github.com/devfd/react-native-google-signin) zip, and unzip it
1. Drag and drop the `ios/GoogleSdk` folder to your xcode project. (Make sure `Copy items if needed` **IS** ticked)
1. Add RNGoogleSignin to project build phase
1. Click Name in sidebar of Xcode

![img](/docs/static/BuildPhase.png)

1. In your project build phase -> `Link binary with libraries` step, add:
* `libRNGoogleSignin.a`
* `AddressBook.framework`
* `SafariServices.framework`
* `SystemConfiguration.framework`
* `libz.tbd`

**Note:** (May take clicking "Add Other" button then selecting the `GoogleSdk` folder and `RNGoogleSignin` folder)

1. Make sure all dependencies are correctly linked to your project:
[![link config](https://github.com/apptailor/react-native-google-signin/raw/master/img/link-config.png)](#config)

1. Configure URL types in the ```Info``` panel of your xcode project
1. add a URL with scheme set to your ```REVERSED_CLIENT_ID``` (found inside the plist)
1. add a URL with scheme set to your ```bundle id```

![img](/docs/static/UrlTypes.png)

1. Make sure you import `RNGoogleSignin.h` in your `AppDelegate.m` like so:

```objc
// add this line before @implementation AppDelegate
#import <RNGoogleSignin/RNGoogleSignin.h>

// add this method before @end
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url
sourceApplication:(NSString *)sourceApplication annotation:(id)annotation {

return [RNGoogleSignin application:application openURL:url sourceApplication:sourceApplication annotation:annotation];
}

```

At the end of this step, your Xcode config should look similar to this:

[![xcode config](https://github.com/apptailor/react-native-google-signin/raw/master/img/url-config.png)](#config)

### Set Open URLs

Only one `openURL` method can be defined, so if you have multiple listeners which should be defined (for instance if you have both Google and Facebook OAuth), you must combine them into a single function like so:

**AppDelegate.m:**

```objc
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url
sourceApplication:(NSString *)sourceApplication annotation:(id)annotation {

return [[FBSDKApplicationDelegate sharedInstance] application:application
openURL:url
sourceApplication:sourceApplication
annotation:annotation
]
|| [RNGoogleSignin application:application
openURL:url
sourceApplication:sourceApplication
annotation:annotation
];
}
```

### Run It

Now, if everything was done correctly you should be able to do the following:

```bash
react-native run-ios
```
Binary file added docs/static/BuildPhase.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/static/FirebaseOverview.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/static/PlistDownload.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/static/RegisterApp.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/static/UrlTypes.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 2 additions & 0 deletions examples/complete/material/src/constants/formNames.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
export const ACCOUNT_FORM_NAME = 'account'
export const LOGIN_FORM_NAME = 'login'
export const SIGNUP_FORM_NAME = 'signup'
export const RECOVER_CODE_FORM_NAME = 'recoverCode'
export const RECOVER_EMAIL_FORM_NAME = 'recoverEmail'

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import Paper from 'material-ui/Paper'
import { connect } from 'react-redux'
import { reduxForm } from 'redux-form'
import { firebaseConnect, pathToJS, isLoaded } from 'react-redux-firebase'
import { submit } from 'redux-form'
import { reduxFirebase as rfConfig } from 'config'
import { ACCOUNT_FORM_NAME } from 'constants/formNames'
import { UserIsAuthenticated } from 'utils/router'
Expand All @@ -19,11 +18,7 @@ import classes from './AccountContainer.scss'
({ firebase }) => ({
auth: pathToJS(firebase, 'auth'),
account: pathToJS(firebase, 'profile'),
}),
{
// action for submitting redux-form
submitForm: () => (dispatch) => dispatch(submit(ACCOUNT_FORM_NAME))
}
})
)
export default class Account extends Component {
static propTypes = {
Expand All @@ -38,7 +33,7 @@ export default class Account extends Component {
state = { modalOpen: false }

handleLogout = () => {
this.props.firebase.logout()
return this.props.firebase.logout()
}

toggleModal = () => {
Expand All @@ -57,7 +52,7 @@ export default class Account extends Component {
}

render () {
const { account, submitForm } = this.props
const { account } = this.props

if (!isLoaded(account)) {
return <LoadingSpinner />
Expand All @@ -77,7 +72,6 @@ export default class Account extends Component {
<div className={classes.meta}>
<AccountForm
account={account}
submitForm={submitForm}
onSubmit={this.updateAccount}
/>
</div>
Expand All @@ -87,4 +81,3 @@ export default class Account extends Component {
)
}
}
0
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@ export default class Home extends Component {
} else {
newTodo.owner = 'Anonymous'
}
this.props.firebase.push('/todos', newTodo)
return this.props.firebase.push('/todos', newTodo)
}

render () {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,54 +2,50 @@ import React, { PropTypes } from 'react'
import { Link } from 'react-router'
import RaisedButton from 'material-ui/RaisedButton'
import Checkbox from 'material-ui/Checkbox'

import { Field, reduxForm } from 'redux-form'
import { RECOVER_PATH } from 'constants/paths'
import { LOGIN_FORM_NAME } from 'constants/formNames'
import TextField from 'components/TextField'

import classes from './LoginForm.scss'

const validate = values => {
const errors = {}
if (!values.email) errors.email = 'Required'
if (!values.password) errors.password = 'Required'
return errors
}
const required = value => value ? undefined : 'Required'
const email = value =>
value && !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value) ?
'Invalid email address' : undefined

export const LoginForm = ({ handleSubmit, submitting }) => (
<form className={classes['container']} onSubmit={handleSubmit}>
<div>
<Field
name='email'
component={TextField}
label='Email'
/>
</div>
<div>
<Field
name='password'
component={TextField}
label='Password'
type='password'
/>
</div>
<div className={classes['submit']}>
<form className={classes.container} onSubmit={handleSubmit}>
<Field
name='email'
component={TextField}
label='Email'
validate={[required, email]}
/>
<Field
name='password'
component={TextField}
validate={[required]}
label='Password'
type='password'
/>
<div className={classes.submit}>
<RaisedButton
label='Login'
primary
type='submit'
disabled={submitting}
/>
</div>
<div className={classes['options']}>
<div className={classes['remember']}>
<div className={classes.options}>
<div className={classes.remember}>
<Checkbox
name='remember'
value='remember'
label='Remember'
labelStyle={{ fontSize: '.8rem' }}
/>
</div>
<Link className={classes['recover']} to='/recover'>
<Link className={classes.recover} to={RECOVER_PATH}>
Forgot Password?
</Link>
</div>
Expand All @@ -62,6 +58,5 @@ LoginForm.propTypes = {
}

export default reduxForm({
form: 'Login',
validate
form: LOGIN_FORM_NAME
})(LoginForm)
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ export default class Signup extends Component {
snackCanOpen: true
})

this.props.firebase.login(loginData)
return this.props.firebase.login(loginData)
}

providerLogin = (provider) =>
Expand Down
Loading