set up firebase config:
var firebaseConfig = {
apiKey: "super secret keys.....asgvegxgevergfvr",
authDomain: "tallans-imageupload-tutorial.firebaseapp.com",
databaseURL: "https://tallans-imageupload-tutorial.firebaseio.com",
projectId: "tallans-imageupload-tutorial",
storageBucket: "tallans-imageupload-tutorial.appspot.com",
messagingSenderId: "super secret keys.....asgvegxgevergfvr",
appId: "super secret app id....adsfa;lsdkjf",
measurementId: "super secret as;dlkfjal;dskjf"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();
then ::
make npx-create-react-app client
and ::
npm i or yarn add firebase
and react-router-dom
now::
cd client
cd src
mkdir componets/login.js
App.js::
==========
import React from 'react'
import './App.css'
import Login from './components/Login'
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'
import Logout from './components/Logout'
import Welcome from './components/Welcome'
const App = () => {
return (
<div>
<Router>
<Switch>
<Route exact path="/" component={Login} />
<Route exact path="/home" component={Logout} />
<Route exact path="/welcome" component={Welcome} />
</Switch>
</Router>
</div>
)
}
export default App
login.js::
import React from 'react'
import firebase from '../services/firebase'
import {useHistory} from 'react-router-dom'
import './Login.css'
const Login = () => {
const history = useHistory();
const signInWithGoogle = () => {
const provider = new firebase.auth.GoogleAuthProvider();
firebase.auth().signInWithPopup(provider)
.then((success) => {
let user = success.user;
const obj = {
username : user.displayName,
email:user.email,
uid:user.uid,
img:user.photoURL
}
console.log(obj)
localStorage.setItem('codecaamp',JSON.stringify(obj))
history.push('/welcome')
})
.catch(err => err.message)
}
return (
<div className="login-buttons">
<div className="ikmg"><img width="200px" src="https://res.cloudinary.com/codecaamp/image/upload/v1610815107/Purple_Modern_Technology_Gaming_Logo_gqpbv2.png" alt="codecaamp"/></div>
<h2 style={{fontFamily:"monospace",fontSize:"40px"}}>Welcome to Codecaamp</h2>
<h3>Continue With</h3>
<button className="login-provider-button" onClick={signInWithGoogle}>
<img src="https://img.icons8.com/ios-filled/50/000000/google-logo.png" alt="google icon" />
<span> Continue with Google</span>
</button>
</div>
)
}
export default Login
Top comments (0)