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 ThingList, we set up authentication via Github OAuth.
Navigate to your project in Firebase console. Click on the ‘Authenticate’ tab on the left and then on the Github logo. Copy the authorization callback URL.
Log in to Github and click on ‘Settings’. On the left hand side, click on ‘OAuth Applications’ under the ‘Developer settings’ menu. Register a new app and fill out the form.
After successfully registering the app, you’ll be taken to your new app’s settings page.
Go back to the Github authentication tab in Firebase and fill in the Client ID and Client Secret that you got from registering your app with Github.
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 GithubAuthProvider.
base.js
import Rebase from 're-base'
import firebase from 'firebase/app'
import database from 'firebase/database'
import 'firebase/auth'
const app = firebase.initializeApp({
apiKey: "",
authDomain: "",
databaseURL: "",
projectId: "",
storageBucket: "",
messagingSenderId: ""
})
const db = database(app)
export const auth = app.auth()
export const githubProvider = new firebase.auth.GithubAuthProvider()
export default Rebase.createClass(db)
Import auth and the githubProvider into whatever component handles the sign-in process. Call signInWithPopup on the auth object, passing the provider as a parameter. Then call an authHandler function when the promise resolves to handle whatever you want to do after authorization is successful.
SignIn.js
import React from 'react'
import { auth, githubProvider } from './base'
const SignIn = ({ authHandler }) => {
const authenticate = (provider) => {
auth
.signInWithPopup(provider)
.then(authHandler)
}
return (
<button className="SignIn" onClick={() => authenticate(githubProvider)}>
Sign In With GitHub
</button>
)
}
export default SignIn
What the authHandler callback does is up to you, but for ThingList, we had it do pretty typical things - save the user ID to state, and initialize syncing our local state for ‘things’ with the data stored on Firebase.
App.js
// ...
authHandler = (authData) => {
this.setState(
{ uid: authData.user.uid },
this.syncThings
)
}
// ...
What happens if auth state changes? Or the user refreshes the page? We should probably set up something to listen for that. In the componentWillMount lifecycle hook that runs when the Component is first getting loaded, we can call the onAuthStateChanged method to set up such a listener.
App.js
// ...
componentWillMount() {
auth.onAuthStateChanged(
(user) => {
if (user) {
this.authHandler({ user })
}
}
)
}
// ...
Signing out when using Firebase for authentication is quite simple - just call auth.signOut()! Once the promise returned by signOut has resolved, you can handle any additional cleanup. In ThingList, we just set state.uid back to null.
App.js
// ...
signOut = () => {
auth
.signOut()
.then(() => this.setState({ uid: null }))
}
// ...
PRACTICE! Extend a project from class. Write a new project. Add a different type of authentication. You know enough to start building things on your own, and it’s definitely the best way to learn once you have the basics down.