Auth

[ZacCrumpton]

USER STORY

as a devloper, i need a way to authorize my users so that they can use the website

AC

WHEN a users first loads the site THEN they should only a basic site AND they should not be able to do anything except log in AND when they click the log in button they will sign in with google AND once signed in the user will have full reign of the site

DEV NOTES

1. In App.js
   • import firebase from 'firebase/app' and import 'firebase/auth' in App.js
   • create a PiblicRoute and a PrivateRoute (see more in comments below)
   • set state
   • create a componentDidMount that removesListner for firebase.auth().onAuthStateChange
     • this should be an if statement that changes the auth state from true to false.
   • make a componentWillUnmount that calls removeListener
2. create a file named connection.js in this directory ../helpers/data/
   • in this file create a function that connects your authorized users to firebase
   • example: const firebaseApp = () => { if (!firebase.apps.length) { firebase.initializeApp(firebaseConfig.firebaseKeys); } };
3. in Auth.js
   • first create a new component in ../components/shared/ called Auth
   • this will need a js and scss file
   • import 'firebase/app'
   • make a click event for logging in called loginClickEvent
     • more info in the comments below
4. in MyNavbar
   • set state to isOpen: false,
   • create a logout click event called logMeOut
     • more in the comments below
   • create a toggle that will swap the state isOpen: false to isOpen: !this.state.isOpen
   • under render() create a var for { isOpen } and set it to this.state;
   • see #1 for more information regarding the Navbar

[ZacCrumpton]

logMeOut function example:

logMeOut = (e) => {
    e.preventDefault();
    firebase.auth().signOut();
  }

[ZacCrumpton]

on the Logout NavLink need to set an onClick that calls the logMeOut function.