Morning:
Afternoon:
authWithPopupFirebase isn’t just a real-time database. It can also provide authentication services via email/password, phone, or common third-party services like Github, Facebook, and Google. For Chatarang, we set up authentication via Google.
Go to your Firebase console and click on the “Authentication” tab in the “Develop” sidebar, then click on “Sign-in method.” You’ll see a list of the authentication methods allowed by Firebase. Click on “Google” and then enable with the toggle switch.
Note: This step assumes you already have your Firebase database added to your app.
Import firebase/auth into your app’s firebase setup. Enable firebase auth and also create an instance of GoogleAuthProvider.
base.js
import firebase from 'firebase/app'
import Rebase from 're-base'
import 'firebase/auth'
import 'firebase/database'
const app = firebase.initializeApp({
apiKey: "YOURAPIKEY",
authDomain: "YOURAUTHDOMAIN",
databaseURL: "YOURDATABASEURL",
projectId: "YOURPROJECTID",
storageBucket: "YOURSTORAGEBUCKET",
messagingSenderId: "YOURSENDERID"
})
const app = firebase.initializeApp(config)
export const googleProvider = new firebase.auth.GoogleAuthProvider()
export const auth = firebase.auth()
const db = app.database()
export default Rebase.createClass(db)
Import auth and the googleProvider into whatever component handles the sign-in process. Call signInWithPopup on the auth object, passing the provider as a parameter. This will launch a popup screen that will prompt the user to sign in using the provider you have specified.
SignIn.js
import React, { Component } from 'react'
import { auth, googleProvider } from './base'
class SignIn extends Component {
state = {
email: '',
}
authenticate = () => {
auth.signInWithPopup(googleProvider)
.then(result => this.props.handleAuth(result.user))
.catch(error => console.log(error))
}
render() {
return (
<button className="SignIn" onClick={this.authenticate}>
Sign In With Google
</button>
)
}
}
export default SignIn
Once the user has authenticated via the popup, the state of our authorization has changed (we now have an authenticated user). Other events that can cause auth state changes are signing out, timeouts, and page refreshes. We should probably set up something to listen for these events. In the componentWillMount lifecycle hook that runs when the Component is first getting loaded, we can call the onAuthStateChanged method provided on the global auth object to set up such a listener.
App.js
// ...
componentWillMount() {
const user = JSON.parse(localStorage.getItem('user'))
if (user) {
this.setState({ user })
}
auth.onAuthStateChanged(
user => {
if (user) {
this.handleAuth(user)
} else {
this.handleUnauth()
}
}
)
}
// ...
What the authHandler callback does is up to you, but for Chatarang, we had it do pretty typical things - save the user ID to state, and initialize syncing our local state for ‘rooms’ with the data stored on Firebase.
App.js
// ...
handleAuth = (oauthUser) => {
const user = {
email: oauthUser.email,
uid: oauthUser.uid,
displayName: oauthUser.displayName,
}
this.setState({ user })
localStorage.setItem('user', JSON.stringify(user))
}
// ...
Signing out when using Firebase for authentication is also simple - just call auth.signOut()!
App.js
// ...
signOut = () => {
auth.signOut()
}
handleUnauth = () => {
this.setState({ user: {} })
localStorage.removeItem('user')
}
// ...
For your Firebase database, you can set up rules (written in JSON) that specify the conditions under which data is allowed to be read or written. By default, a newly generated project will require that a user be authenticated to read or write any data.
{
"rules": {
".read": "auth != null",
".write": "auth != null"
}
}
If you do not have authentication set up yet, these values can be set to true. This allows anyone to read or write any data in the database. This can be convenient, but probably not a good idea long-term (and you will get a warning if you do that).
Additional rules can be applied per endpoint:
{
"rules": {
"emails": {
".read": true,
".write": "auth != null"
},
"texts": {
".read": true,
".write": "auth != null"
},
"users": {
"$userId": {
".read": "auth != null && auth.uid == $userId",
".write": "auth != null && auth.uid == $userId"
}
}
}
}
The above rules translate to:
uid matches the $userId of that item