Created
June 29, 2018 11:46
-
-
Save viniciusCamargo/439ca1f2b6540938bedf2e91764098ec to your computer and use it in GitHub Desktop.
Firebase with React login and sign up
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, { Component, Fragment } from 'react' | |
import firebase from 'firebase/app' | |
import 'firebase/auth' | |
import './style.css' | |
// TODO: whitelist the domain in the API manager: | |
// https://plus.google.com/u/0/+MichaelPrentice/posts/7T65U83ncfT?sfc=true | |
// "This is found in https://console.cloud.google.com under API Manager -> Credentials -> Browser Key -> Key | |
// Restrictions. Of course you have to select an active project before performing this navigation." | |
// use different keys for development and production: swap keys during the build process | |
// use production modules, of course only the modules you need: | |
// For the CDN builds, these are available in the following manner | |
// (replace <PACKAGE> with the name of a component - i.e. auth, database, etc): | |
// https://www.gstatic.com/firebasejs/5.0.0/firebase-<PACKAGE>.js | |
class App extends Component { | |
render() { | |
if (this.state.loading) { | |
return <p>loading...</p> | |
} | |
return ( | |
<div className="main"> | |
{this.state.loggedIn ? ( | |
<p>User: {this.state.email}</p> | |
) : ( | |
<Fragment> | |
<label htmlFor="email"> | |
<input id="email" type="text" onChange={this._handleChange} /> | |
</label> | |
<label htmlFor="password"> | |
Password | |
<input | |
id="password" | |
type="password" | |
onChange={this._handleChange} | |
/> | |
</label> | |
</Fragment> | |
)} | |
{this.state.loggedIn ? ( | |
<button onClick={this._logout}>logout</button> | |
) : ( | |
<Fragment> | |
<button onClick={this._login}>log in</button> | |
<button onClick={this._signup}>sign up</button> | |
</Fragment> | |
)} | |
</div> | |
) | |
} | |
_login = async () => { | |
try { | |
const { email, password } = this.state | |
await firebase.auth().signInWithEmailAndPassword(email, password) | |
} catch (error) { | |
console.error(error) | |
} | |
} | |
_signup = async () => { | |
try { | |
const { email, password } = this.state | |
await firebase.auth().createUserWithEmailAndPassword(email, password) | |
} catch (error) { | |
console.error(error) | |
} | |
} | |
_logout = async () => { | |
firebase.auth().signOut() | |
} | |
_handleChange = ({ target }) => this.setState({ [target.id]: target.value }) | |
componentDidMount() { | |
firebase.initializeApp({ | |
apiKey: '', | |
authDomain: '', | |
databaseURL: '', | |
storageBucket: '' | |
}) | |
firebase.auth().onAuthStateChanged(user => { | |
if (user) { | |
console.log(user) | |
this.setState({ loggedIn: true, email: user.email }) | |
} else { | |
console.log('not logged in') | |
this.setState({ loggedIn: false }) | |
} | |
this.setState({ loading: false }) | |
}) | |
} | |
state = { email: '', password: '', loggedIn: false, loading: true } | |
} | |
export default App |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment