welcome to: Latinx Tech PDX agenda: October 25th 2017 6:15 - doors open 6:30 - member intros 6:40 - tech rise pdx 6:50 - intro to firebase 8:00 - Q&A

member intros What is your name? What technologies are you currently excited about? What attracted you to our Meet-up?

Tech Rise PDX Raquel Dorshkind http://www.techrisepdx.org/

fabio valentino @fabiovalentino_ Intro to Firebase auth & db

What is Firebase? real-time database user authentication serverless functions storage analytics performance tools test tools and more … It’s a set of cloud based products by google Firebase evolved from Envolve, a prior startup founded by James Tamplin and Andrew Lee in 2011. -wikipedia

We will look at Creating the Firebase project online Reading data real-time with on vs once writing, updating, deleting data Authentication (user sign-up, login, via email, google, FB) Firebase read/write rules (public, private, semi-private) Firebase server-less functions Additional resources Q & A We will use a create-react-app project to walk through the code and view results

Firebase database

Creating and Connecting a Firebase project to our Web project Go to firebase.google.com to create a project and copy the Web/JS configuration json Add the firebase dependency to the JS project: npm -install firebase —save Create a firebaseUtils.js file and set the contents of the JSON object into a firebaseConfiguration const In your firebase rules json replace auth!=null with true

Reading from firebase Db Import your firebase object Read data by referencing the path to your data within firebase: In the web console, manually add a new item to the path you’re reading (ie members). Note the immediate update to your feed. Now change the membersRef.on to membersRef.once and note the immediate updates are no longer in effect.

Write, Update & Delete data to/from firebase db Write new data to a path in your firebase db using .set() Update existing data in your path using .set() Delete an item via its Reference using .remove()

Firebase authentication

User sign-up & login via Email & Password firebase Auth Use firebase.auth() to create a user w/ email & password User login with email & password, then use: firebase.auth().currentUser to fetch the user object

NOTICE: the use of firebase.auth vs firebaseUtils.auth() Login using Google firebase Auth You must import the firebase object from the firebase library as well as your firebaseUtils object NOTICE: the use of firebaseUtils for my import vs the real firebase from ‘firebase’ Enable Google Authentication on your firebase project Setup a provider object from firebase.auth.GoogleAuthProvider() and call the signInWithPopup from your object’s auth() NOTICE: the use of firebase.auth vs firebaseUtils.auth()

Firebase rules

A look at firebase Rules and the simulator By default firebase secures access to the database. Allowing only logged in users to read/write. firebase Rules is a JSON object that uses cascading permissions in order to allow location (ie path) specific access (read / write). Use a $<variable> to match an element’s key, and auth.uid to match the user’s uid attempting the operation vs secure not secure

Detailed permissions firebase Rules Using .child(), .hasChild(), .val() we can accomplish some more detailed permissions data refers to existing data already in the path you’re at. newData refers to incoming data. (ie. data you’re trying to write) Get comfortable using the Rules Simulator

Firebase server functions

Server Functions via Firebase CLI tool Install firebase cli by running this command on your terminal: npm install -g firebase-tools Then run firebase login Change into the directory for your server function code and then run firebase init Select Functions option, and select your project by name Press Y to install dependencies and open the /functions/index.js file Uncomment the helloWorld function and run: firebase deploy

What we covered today what is firebase connecting to your web project real-time database user authentication serverless functions

Great Resources firebase YouTube channel: https://www.youtube.com/channel/UCP4bf6IHJJQehibu6ai__cg firebase Rules: https://www.youtube.com/watch?v=PUBnlbjZFAI firebase Server Functions: https://www.youtube.com/watch?v=EvV9Vk9iOCQ Contraindications - Firebase is excellent for prototyping and even many production scenarios, but it’s also not the best for certain security or business reasons . I recommend you put your server logic in a `utils` file or module, in order to minimize any future refactoring efforts. https://crisp.chat/blog/why-you-should-never-use-firebase-realtime-database

Firebase Q&A thank you! -fabio valentino