completed the firebase auth

Author: junip

.gitignore

@@ -102,3 +102,4 @@ dist
 
 # TernJS port file
 .tern-port
+.env

package.json

@@ -4,7 +4,7 @@
   "description": "Project to practice the Graphql with react",
   "main": "index.js",
   "scripts": {
-    "dev": "parcel src/index.html",
+    "dev": "parcel src/index.html --open --port 5050",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {

src/App.js

@@ -2,42 +2,33 @@ import React from 'react'
 import ReactDOM from 'react-dom';
 import {
   BrowserRouter as Router,
-  Switch,
   Route,
-  Link
 } from "react-router-dom";
 
-
 // paths
 import Login from './components/Login'
 import Register from './components/Register'
-
+import AuthenticatedApp from './components/AuthenticatedApp'
 import './scss/main.scss'
 
+import PrivateRoute from '../src/Routes/PrivateRoute'
 
-// router
-
-import { ApolloProvider } from '@apollo/react-hooks'
-import ShowCountries from '../src/components/ShowCountries'
-import ApolloClient from 'apollo-boost'
+import { AuthProvider } from './context/AuthContext'
 
-const client = new ApolloClient({
-  uri: 'https://countries-274616.ew.r.appspot.com/'
-})
+// const client = new ApolloClient({
+//   uri: 'https://countries-274616.ew.r.appspot.com/'
+// })
 
 const App = () => {
 
   return (
-    <Router>
-      <Route path="/login" component={Login} />
-      <Route path="/signup" component={Register} />
-    </Router>
-   
-  //  <ApolloProvider client={client}>
-  //    <div className=""> 
-  //       {/* <ShowCountries/> */}
-  //    </div>
-  //  </ApolloProvider>
+    <AuthProvider>
+      <Router >
+        <PrivateRoute exact path="/" component={AuthenticatedApp} />
+        <Route path="/login" component={Login} />
+        <Route path="/signup" component={Register} />
+      </Router>
+    </AuthProvider>
   )
 }
 

src/Firebase/config.js

@@ -1,21 +1,19 @@
-// Firebase App (the core Firebase SDK) is always required and
-// must be listed before other Firebase SDKs
 import * as firebase from "firebase/app";
 
 // Add the Firebase services that you want to use
 import "firebase/auth";
 
 const config = {
-  apiKey: "AIzaSyAcPbOBP9js9jC6LGtm9ZjqwXjVpQjBQxM",
-  authDomain: "react-firebase-fc06e.firebaseapp.com",
-  databaseURL: "https://react-firebase-fc06e.firebaseio.com",
-  projectId: "react-firebase-fc06e",
-  storageBucket: "react-firebase-fc06e.appspot.com",
-  messagingSenderId: "564100058598",
-  appId: "1:564100058598:web:8c6ebd5ba04dc4faab1a27",
-  measurementId: "G-GZNMEDXZPH"
+  apiKey: process.env.FIREBASE_API_KEY,
+  authDomain: process.env.FIREBASE_AUTH_DOMAIN,
+  databaseURL: process.env.FIREBASE_DATABASE_URL,
+  projectId: process.env.FIREBASE_PROJECT_ID,
+  storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
+  messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
+  appId: process.env.FIREBASE_APP_ID,
+  measurementId: process.env.FIREBASE_MESUREMENT_ID
 };
 
-firebase.initializeApp(config)
+const app = firebase.initializeApp(config)
 
-export default config;
+export default app;

src/Routes/PrivateRoute.js

@@ -1,22 +1,22 @@
-// import React from 'react';
-// import { Route, Redirect } from 'react-router-dom'
-// import { AuthContext } from "../context/AuthContext";
+import React, { useContext} from 'react';
+import { Route, Redirect } from 'react-router-dom'
+import { AuthContext } from "../context/AuthContext";
 
-// const PrivateRoute = ({ component: RouteComponent, ...rest }) => {
-//   const {currentUser} = useContext(AuthContext);
-//   return (
-//     <Route
-//       {...rest}
-//       render={routeProps =>
-//         !!currentUser ? (
-//           <RouteComponent {...routeProps} />
-//         ) : (
-//           <Redirect to={"/login"} />
-//         )
-//       } 
-//     />
-//   );
-// };
+const PrivateRoute = ({ component: RouteComponent, ...rest }) => {
+  const { currentUser } = useContext(AuthContext);
+  
+  return (
+    <Route
+      {...rest}
+      render={routeProps =>
+        !!currentUser ? (
+          <RouteComponent {...routeProps} />
+        ) : (
+          <Redirect to={"/login"} />
+        )
+      } 
+    />
+  );
+};
 
-
-// export default PrivateRoute
+export default PrivateRoute

src/components/AuthenticatedApp.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import app from '../firebase/config'
+import { useHistory } from 'react-router-dom'
+
+
+const AuthenticatedApp = () => {
+  let history = useHistory()
+
+const logOut = () => {
+
+  app.auth().signOut().then((response) => {
+    console.log(response)
+    history.push('/login');
+  }).catch((error) =>{
+    console.log(error)
+  })
+}
+
+  return(
+    <div>
+      Authenticated
+      <button className="" onClick={logOut}>Logout</button>
+    </div>
+  )
+}
+
+export default AuthenticatedApp;

src/components/HomePage.js

@@ -1,9 +1,56 @@
-import React from 'react';
-
+import React, { useState } from 'react';
+import app from '../firebase/config'
+import { useHistory } from 'react-router-dom'
 const Login  = () => {
-  return(<div>
 
-  </div>)
+  let history = useHistory()
+
+  const [email, setEmail] = useState('')
+  const [pass, setPass] = useState('')
+
+  const onInputChange = (e, name) => {
+    let inputValue = e.target.value
+    if(name === 'pass') { 
+      setPass(inputValue)
+    } if(name === 'email') {
+      setEmail(inputValue)
+    }
+  }
+
+  const loginUser = () => {
+    app.auth().signInWithEmailAndPassword(email, pass).then((response) => {
+      history.push('/')
+    }).catch(error => {
+      // Handle Errors here.
+      var errorCode = error.code;
+      var errorMessage = error.message;
+      console.log(errorMessage);
+      console.log(errorCode)
+    });
+  }
+
+  const registerUser = () => {
+    history.push('/signup')
+  }
+
+  return (
+    <div className="form">
+      <div className="form-row">
+        <label>Email</label>
+        <input name="email" onChange={(e) => onInputChange(e,'email')}></input>
+      </div>
+      <div className="form-row">
+        <label>Password</label>
+        <input name="password" type="password" onChange={(e) => onInputChange(e, 'pass')}></input>
+      </div>
+      <button className="form-row" onClick={loginUser}>
+        Login
+      </button>
+      <button className="form-row" onClick={registerUser}>
+        Register
+      </button>
+    </div>
+  )
 }
 
 export default Login

src/components/Login.js

@@ -1,7 +1,9 @@
 import React, { useState } from 'react';
+import app from '../firebase/config';
+import { useHistory } from 'react-router-dom';
 
 const Register  = () => {
-
+  let history = useHistory()
   const [email, setEmail] = useState('')
   const [pass, setPass] = useState('')
 
@@ -14,9 +16,19 @@ const Register  = () => {
     }
   }
 
-
   const registerUser = () => {
-    
+    app.auth().createUserWithEmailAndPassword(email, pass).then((response) => {
+      if(response) {
+        console.log("----",response)
+        history.push('/login')
+      }
+    }).catch(function(error) {
+      // Handle Errors here.
+      var errorCode = error.code;
+      var errorMessage = error.message;
+      // ...
+      console.log(errorMessage, errorCode);
+    })
   }
 
   return(
@@ -29,10 +41,9 @@ const Register  = () => {
       <label>Password</label>
       <input name="password" type="password" onChange={(e) => onInputChange(e, 'pass')}></input>
     </div>
-    <button className="form-row">
-      Login
+    <button className="form-row" onClick={registerUser}>
+      Register
     </button>
-   
   </div>)
 }
 

src/components/Register.js

@@ -1,21 +1,28 @@
 import React, { useEffect, useState } from 'react';
-import authConfig from '../Firebase/config'
+import app from '../firebase/config'
 
 export const AuthContext = React.createContext();
-
 export const AuthProvider = ({ children }) => {
   const [currentUser, setCurrentUser] = useState(null);
   const [pending, setPending] = useState(true);
 
   useEffect(() => {
-    authConfig.auth().onAuthStateChanged((user) => {
-      setCurrentUser(user)
-      setPending(false)
+    app.auth().onAuthStateChanged((user) => {
+      setPending(true)
+      if (user) {
+        console.log("__",user)
+        setCurrentUser(user)
+        setPending(false)
+      } else {
+        console.log("err",user)
+        setCurrentUser(null)
+        setPending(false)
+      }
     });
   }, []);
 
   if(pending){
-    return <>Loading...</>
+    return <>Verifying Login.....</>
   }
 
   return (