Authentication Methods
Authentication data is attached to auth
, profile is attached to profile
if you provide a value to the userProfile
config option. You can get them within components like so:
import { connect } from 'react-redux'
connect(
// Map state to props
({ firebase: { auth, profile } }) => ({
auth,
profile
})
)
If you need access to methods that are not available at the top level, you can access Firebase's Full Auth API using props.firebase.auth()
or getFirebase().auth()
.
NOTE
All examples below assume you have passed firebase
from context
to props. Wrapping your component with with the withFirebase
or firebaseConnect
Higher Order Components will make props.firebase
available within your component:
import React from 'react'
import PropTypes from 'prop-types'
import { withFirebase } from 'react-redux-firebase'
const SomeComponent = (props) => (
// use props.firebase
)
export default withFirebase(SomeComponent) // or firebaseConnect()(SomeComponent)
Works same with class components (make sure you import Component
from react):
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { firebaseConnect } from 'react-redux-firebase'
class SomeComponent extends Component {
render() {
// use this.props.firebase
}
}
export default firebaseConnect()(SomeComponent) // or withFirebase(SomeComponent)
login(credentials)
Parameters
credentials
(Object)- Object - cases:
- email and password (runs
ref.authWithPassword(credentials)
) :{ email: String, password: String }
- provider (runs
ref.authWithOAuthPopup(provider)
orref.authWithOAuthRedirect(provider)
) :{ provider: "facebook | google | twitter", type: "popup | redirect" // popup is default }
- credential (runs
ref.signInWithCredential(credential)
) :
The credential parameter is a firebase.auth.AuthCredential specific to the provider (i.e.{ credential : firebase.auth.AuthCredential // created using specific provider }
firebase.auth.GoogleAuthProvider.credential(null, 'some accessToken')
). For more details please view the Firebase API reference - provider and token (runs
ref.authWithOAuthToken(provider, token)
) NOTE: Deprecated as of v1.5.0 :{ provider: "facebook | google | twitter", token : String }
- custom token (runs
ref.authWithCustomToken(credentials)
).profile
is required if automatic profile creation is enabled (which it is by default if you are usinguserProfile
).config.updateProfileOnLogin
config option can be set tofalse
in order to prevent this behavior.{ token : String, profile: Object // required (optional if updateProfileOnLogin: false config set) }
- email and password (runs
- Object - cases:
Returns
Promise that resolves with the response from firebase's login method (an Object). credential
property is also included if using oAuth provider.
NOTE: For email authentication in v1.4.*
and earlier - The user's UID (a String) is returned instead of an object. This has been changed in v1.5.0
for consistency across all auth types.
Examples
props.firebase.login({
email: 'test@test.com',
password: 'testest1'
})
OAuth Provider Redirect
props.firebase.login({
provider: 'google',
type: 'redirect'
})
OAuth Provider Popup
props.firebase.login({
provider: 'google',
type: 'popup'
})
Credential
// `googleUser` from the onsuccess Google Sign In callback.
props.firebase.login({
credential: firebase.auth.GoogleAuthProvider.credential(googleUser.getAuthResponse().id_token)
})
// or using an accessToken
props.firebase.login({
credential: firebase.auth.GoogleAuthProvider.credential(null, 'some access token')
})
Token
props.firebase.login({
token: 'someJWTAuthToken',
profile: { email: 'rick@sanchez.com' }
})
After logging in, profile and auth are available in redux state:
import { connect } from 'react-redux'
connect((state) => ({
auth: state.firebase.auth,
profile: state.firebase.profile
}))(SomeComponent)
For more information on how best to use these methods, visit the auth recipes
createUser(credentials, profile)
Similar to Firebase's ref.createUser(credentials)
but with support for automatic profile setup (based on your userProfile config).
NOTE This does not need to be used when using external authentication providers (Firebase creates the user automatically), and is meant to be used with email authentication only.
Parameters
Examples
const createNewUser = ({ email, password, username }) => {
firebase.createUser(
{ email, password },
{ username, email }
)
}
// Call with info
createNewUser({
email: 'test@test.com',
password: 'testest1',
username: 'tester'
})
Returns
Promise with userData
logout()
Logout from Firebase and delete all data from the store (state.firebase.data
and state.firebase.auth
are set to null
).
Looking to preserve data on logout? v2.0.0
supports the preserve
config option, which preserves data under the specified keys in state on logout.
Examples
// logout and remove profile and auth from state
props.firebase.logout()
resetPassword(credentials)
Calls Firebase's firebase.auth().resetPassword()
. If there is an error, it is added into redux state under state.firebase.authError
.
Examples
props.firebase.resetPassword({
email: 'test@test.com',
password: 'testest1',
username: 'tester'
})
Parameters
credentials
Object - Credentials same as described in firebase docsprofile
Object - if initialized with userProfile support then profile will be saved into${userProfile}/${auth.uid}
Returns
Promise with user's UID in case of success or the error otherwise. Always authenticate the new user in case of success
confirmPasswordReset(code, newPassword)
Calls Firebase's firebase.auth().confirmPasswordReset()
. If there is an error, it is added into redux state under state.firebase.authError
.
Examples
props.firebase.confirmPasswordReset('some reset code', 'myNewPassword')
Parameters
Returns
verifyPasswordResetCode(code)
Verify a password reset code from password reset email.
Calls Firebase's firebase.auth().verifyPasswordResetCode()
. If there is an error, it is added into redux state under state.firebase.authError
.
Examples
props.firebase.verifyPasswordResetCode('some reset code')
Parameters
code
String - Password reset code
Returns
Promise - Email associated with 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
.
Examples
props.firebase.signInWithPhoneNumber('some reset code')
Parameters
code
String - Password reset code
Returns
Promise - Email associated with reset code