Commit b921e330 authored by Alexander Kotov's avatar Alexander Kotov

add Google authentication

parent fcf4717e
This diff is collapsed.
......@@ -3,6 +3,7 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"firebase": "^5.4.1",
"react": "^16.4.2",
"react-dom": "^16.4.2",
"react-scripts": "1.1.4"
......@@ -13,4 +14,4 @@
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
\ No newline at end of file
}
......@@ -4,6 +4,8 @@ import './App.css';
import Header from './components/Header'
import Messages from './components/Messages'
import MessageForm from './components/MessageForm';
import authWithGoogle from './authWithGoogle';
import firebase from './firebase'
class App extends Component {
state = {
......@@ -23,6 +25,17 @@ class App extends Component {
]
}
componentDidMount() {
firebase.auth().onAuthStateChanged(authUser => {
let user = authUser && {
photoURL: authUser.photoURL,
displayName: authUser.displayName,
email: authUser.email
}
this.setState({ user });
})
}
sendMessage = (message) => {
this.setState({
messages: [
......@@ -54,13 +67,12 @@ class App extends Component {
}
onLogin = () => {
this.setState({user: {
name: 'Alexander'
}})
authWithGoogle()
}
onLogout = () => {
this.setState({user: null})
firebase.auth().signOut()
.catch(console.error)
}
}
......
import firebase from './firebase'
export default function authWithGoogle() {
let provider = new firebase.auth.GoogleAuthProvider();
provider.setCustomParameters({
prompt: 'select_account'
});
firebase.auth().signInWithPopup(provider)
.then(result => updateUserInfo(result.user))
.catch(console.error)
}
let database = firebase.database();
let usersRef = database.ref('users');
function updateUserInfo({uid, displayName, photoURL}) {
usersRef.child(uid).set({displayName, photoURL})
.then(console.log)
.catch(console.error);
}
import React from 'react'
const Header = (props) => {
let {email, displayName} = props.user
return (
<header>
<div className="user">
<img src="" alt="" />
<span className="name">{props.user.name}</span>
<span className="name">
{displayName} ({email})
</span>
</div>
<button className="logout" onClick={props.onLogout}>Logout</button>
</header>
......
import firebase from 'firebase/app'
import 'firebase/database'
import 'firebase/auth'
const config = {
apiKey: "AIzaSyBxqvTte2GdcVc6aT6ZwcGMKsh0oUEYFPs",
authDomain: "in6k-meetup-firebase-alexko.firebaseapp.com",
databaseURL: "https://in6k-meetup-firebase-alexko.firebaseio.com",
projectId: "in6k-meetup-firebase-alexko",
storageBucket: "in6k-meetup-firebase-alexko.appspot.com",
messagingSenderId: "655535700820"
}
firebase.initializeApp(config)
export default firebase
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment