Authentication and authorization is an intimidating part of web app development. I prefer front-end development. Firebase takes care of the backend for you so that you can focus on the core business and value proposition instead of reinventing the wheel.
\nIt turns out that it's super easy to add Facebook login functionality to your React app. If I can do it in 15 minutes, I guarantee it won't be hard for you at all (especially if you're a js pro).
\nIn part I we'll walk through the following:
\nIn part 2, we'll dive into the code:
\nprovider = new firebase.auth.FacebookAuthProvider()this.setState({user: user.result})Here's what they look like:
\n![](\"https://s3.amazonaws.com/contentkit/static/cjeqgfk9lnnn101994ll4ursr/add-firebase-api-keys-1.png\")
\nFor now, just save them for later.
\nHere's where we're at:
\n![](\"https://s3.amazonaws.com/contentkit/static/cjeqgfk9lnnn101994ll4ursr/firebase_click_auth.png\")
\nNext:
\nSelect Facebook as your sign in provider. You'll see a screen like this that prompts you for a Facebook App ID and Secret:
\n![](\"https://s3.amazonaws.com/contentkit/static/cjeqgfk9lnnn101994ll4ursr/facebook_app_id_and_secret.png\")
\nWhich brings us to Step 3.
\nHere's where we're at:
\n![](\"https://s3.amazonaws.com/contentkit/static/cjeqgfk9lnnn101994ll4ursr/facebook_app_id.png\")
\n![](\"https://s3.amazonaws.com/contentkit/static/cjeqgfk9lnnn101994ll4ursr/facebook_app_id_and_secret-2.png\")
\nBack at developers.facebook.com, click Facebook Login in the left sidebar (or click Add Products if you don't see it).
\nPaste the URI provided by Firebase as follows:
\n![](\"https://s3.amazonaws.com/contentkit/static/cjeqgfk9lnnn101994ll4ursr/valid-oauth-redirect-uris.png\")
\nDamn, we're 50% done.
\nOn to part II.
\nLet's start with a clean, barebones react app.
\nnpm install -g create-react-app\ncreate-react-app my-app\ncd my-app/\nnpm startIf everything looks good, kill the server.
\nInstall Firebase and ReactFire:
\nnpm install firebase --saveImport Firebase:
\nMake a new file in the src subdirectory (we'll call it client.js);
\n// src/client.js\nimport firebase from 'firebase'Add your API key from Firebase and initialize Firebase:
\n// src/client.js\nimport firebase from 'firebase'\nconst config = {\n apiKey: \"YOUR API KEY\",\n authDomain: \"YOUR AUTH DOMAIN\",\n databaseURL: \"YOUR DATABASE URL\",\n storageBucket: \"YOUR STORAGE BUCKET\",\n messagingSenderId: \"YOUR MESSAGING SENDER ID\"\n}\nfirebase.initializeApp(config)\nexport const ref = firebase.database().ref()\nexport const auth = firebase.auth\nexport const provider = new firebase.auth.FacebookAuthProvider()Set an initial state:
\nSwitch to src/App.js, which should have been generated by create-react-app;
\nYou can delete the jsx in the render() function.
\n// App.js\nimport React from 'react'\nimport firebase from 'firebase'\n// import provider and auth that we exported from src/client.js\nimport { provider, auth } from './client'\nclass App extends Component {\n this.state = {\n user: null\n }\n render() {\n return (\n <div className=\"App\">\n </div>\n );\n }\n}Create a login and a logout function after we declare initial state:
\n// App.js\nclass App extends React.Component {\n login = () => {\n auth().signInWithPopup(provider)\n .then(({ user }) => {\n this.setState({ user })\n })\n }\n logout = () => {\n auth().signOut().then(() => {\n this.setState({user: null}) \n })\n }\n \n // ...\n}Create login and logout buttons that call each of these functions inside render():
\n// App.js\n...\nrender() {\n const { user } = this.state\n return(\n <div className='app'>\n <p>{user ? `Hi, ${user.displayName}!` : 'Hi!'}</p>\n <button onClick={this.login}>\n Login with Facebook\n </button>\n <button onClick={this.logout}>\n Logout\n </button>\n </div>\n )\n};import React from 'react'\nimport firebase from 'firebase'\nconst config = {\n apiKey: 'YOUR API KEY',\n authDomain: 'YOUR AUTH DOMAIN',\n databaseURL: 'YOUR DATABASE URL',\n storageBucket: 'YOUR STORAGE BUCKET',\n messagingSenderId: 'YOUR MESSAGING SENDER ID'\n}\nfirebase.initializeApp(config)\nconst auth = firebase.auth\nconst provider = new firebase.auth.FacebookAuthProvider();\nclass App extends Component {\n state = {\n user: null\n }\n login = () => {\n auth().signInWithPopup(provider)\n .then(({ user }) => {\n this.setState({ user })\n })\n }\n logout = () => {\n auth().signOut().then(() => {\n this.setState({ user: null }) \n })\n }\n render() {\n const { user } = this.state\n return (\n <div className='App'>\n <p>{user ? `Hi, ${user.displayName}!` : 'Hi!'}</p>\n <button onClick={this.login}>\n Login with Facebook\n </button>\n <button onClick={this.logout}>\n Logout\n </button>\n </div>\n );\n }\n}In its current state, all our app does is launch a login with Facebook modal. When our component mounts, it should check to see if some users are already authorized (so that they aren't prompted to login again).
\nTo accomplish this, we'll use the React lifecycle hook componentDidMount().
\n// src/App.js\ncomponentWillMount() {\n auth.onAuthStateChanged().then(user => {\n if (user) {\n this.setState({ user })\n }\n })\n}