JWT working

1176e05b · Sami Spets · d72e211b · d72e211b · 1176e05b · 1176e05b
Commit 1176e05b authored 5 years ago by Sami Spets
--- a/web-service/client/services/login.js
+++ b/web-service/client/services/login.js
-import axios from 'axios'
-const baseUrl = 'http://localhost:8080/google'
-
-const login = async credentials => {
-  const response = await axios.post(baseUrl)
-  return response.data
-}
-
-export default { login }
\ No newline at end of file
--- a/web-service/client/src/App.js
+++ b/web-service/client/src/App.js
@@ -7,7 +7,7 @@ const App = () => {
    const [user, setUser] = useState(null);
    const [username, setUsername] = useState('');

-    const handleLogin = () => {
+    const handleLogin = async() => {
        /* User clicks on the image of either Haka login or Google Oauth
        Server redirects the user then to google oauths site or to the haka site */

@@ -16,15 +16,22 @@ const App = () => {
        window.location.href="/google";
    }

-    if(user === null){
+    if(window.localStorage.getItem('token')){
        return (
-            <div>
+            <div className="margin: 'auto', text-align: 'center'">
+                <h1>IT WORKS!!</h1>
+                <h2>Namibia here we come!</h2>
+            </div>
+        )
+    }
+    return (
+        <div className='loginForm'>
            <h2>Welcome to Future Technology Lab</h2>
            <h3>Please login!</h3>
-                <a class="button" onClick={handleLogin}>
+            <a className="button" onClick={handleLogin}>
                <div>
-                        <span class="svgIcon t-popup-svg">
-                            <svg class="svgIcon-use" width="25" height="37" viewBox="0 0 25 25">
+                    <span className="svgIcon t-popup-svg">
+                        <svg className="svgIcon-use" width="25" height="37" viewBox="0 0 25 25">
                            <g fill="none" fill-rule="evenodd">
                            <path d="M20.66 12.693c0-.603-.054-1.182-.155-1.738H12.5v3.287h4.575a3.91 3.91 0 0 1-1.697 2.566v2.133h2.747c1.608-1.48 2.535-3.65 2.535-6.24z" fill="#4285F4"/>
                            <path d="M12.5 21c2.295 0 4.22-.76 5.625-2.06l-2.747-2.132c-.76.51-1.734.81-2.878.81-2.214 0-4.088-1.494-4.756-3.503h-2.84v2.202A8.498 8.498 0 0 0 12.5 21z" fill="#34A853"/>
@@ -33,19 +40,11 @@ const App = () => {
                            </g>
                        </svg>
                    </span>
-                        <span class="button-label">Sign in with Google</span>
+                    <span className="button-label">Sign in with Google</span>
                </div>
            </a>
        </div>
-            
-        )
-    }else {
-        return(
-        <div>
-            <h1>IT WORKS!!</h1>
-            <h2>Namibia here we come!</h2>
-        </div>
    )
 }
-}
+
 export default App;   
\ No newline at end of file
--- a/web-service/server/package.json
+++ b/web-service/server/package.json
@@ -16,6 +16,7 @@
  "dependencies": {
    "express": "^4.16.4",
    "express-ws": "^4.0.0",
+    "jsonwebtoken": "^8.5.1",
    "msgpack5": "^4.2.1",
    "passport": "^0.4.0",
    "passport-google-oauth20": "^2.0.0"

--- a/web-service/server/src/index.js
+++ b/web-service/server/src/index.js
@@ -4,10 +4,10 @@ const expressWs = require('express-ws')(app);
 const Peer = require('./peer.js');
 const passport = require('passport');
 const passportSetup = require('./passport/passport');
+const jwt = require('jsonwebtoken');

 // ---- INDEXES ----------------------------------------------------------------
 app.use(passport.initialize());
-app.use(passport.session());
 app.use(express.static('build'))

 passport.serializeUser((user, done) => {
@@ -164,11 +164,13 @@ app.get('/google', passport.authenticate('google', {
 * Sets the JWT to clients browser and redirects the user back to React app.
 */
 app.get('/auth/google/redirect', passport.authenticate('google'), (req, res) => {
+	console.log(req.user)
+	const token = jwt.sign(req.user.id, 'Somesecretkey14madlh£$');
 	const htmlWithEmbeddedJWT = `
    <html>
        <body><h3> You will be automatically redirected to next page.<h3><body>
        <script>
-			window.localStorage.setItem('token', 'bearer token');
+			window.localStorage.setItem('token', 'bearer ${token}');
 			window.location.href = '/';
        </script>
    <html>

--- a/web-service/server/src/passport/passport.js
+++ b/web-service/server/src/passport/passport.js
@@ -10,6 +10,7 @@ passport.use(
        passReqToCallback: true
    }, (req, accessToken, refreshToken, profile, done) => {

+//        console.log(profile)
        return done(null, profile)
    })
 )
\ No newline at end of file