Auth

[aleshakay]

UserStory

As a user, I need to have the ability to authenticate into the website.

AC

WHEN THEN

DevNotes

• [x] create apiKeys.json and apiKeys.example.json file
• [x] add the keys from firebase
• [x] import firebase to the files App.js, Auth.js, authData.js, connection.js
• [x] connection.js in helpers/data. Similar to the below

  
  import firebaseConfig from '../apiKeys.json';

const firebaseApp = () => { if (!firebase.apps.length) { firebase.initializeApp(firebaseConfig.firebaseKeys); } };

export default firebaseApp;```

• [ ] create a helpers/data/authData.js file for the getUid function ```import firebase from 'firebase/app'; import 'firebase/auth';

const getUid = () => firebase.auth().currentUser.uid;

export default { getUid };

- [x] add the auth state to App.js 
- [x] add componentDidMount 
```   this.removeListner = firebase.auth().onAuthStateChanged((user) => {
      if (user) {
        this.setState({ authed: true });
      } else {
        this.setState({ authed: false });
      }
    });
  }```

- [ ] also in App.js import Auth component
- [ ] NavBar will use auth to App.js render #5 

[aleshakay]

import firebase from 'firebase/app';
import 'firebase/auth';

import './Auth.scss';

class Auth extends React.Component {
  loginClickEvent = (e) => {
    e.preventDefault();
    const provider = new firebase.auth.GoogleAuthProvider();
    firebase.auth().signInWithPopup(provider);
  }

  render() {
    return (
      <div className="Auth">
        <h1>Auth Page</h1>
        <button className="btn button-big" onClick={this.loginClickEvent}>Login with Google</button>
      </div>
    );
  }
}

export default Auth;```