From 1176e05b4e2521bcbd8d0db2816632b9c90f1b1c Mon Sep 17 00:00:00 2001 From: Sami Spets <savasp@utu.fi> Date: Wed, 18 Sep 2019 14:23:38 +0300 Subject: [PATCH] JWT working --- web-service/client/services/login.js | 9 ---- web-service/client/src/App.js | 55 ++++++++++----------- web-service/server/package.json | 1 + web-service/server/src/index.js | 6 ++- web-service/server/src/passport/passport.js | 1 + 5 files changed, 33 insertions(+), 39 deletions(-) delete mode 100644 web-service/client/services/login.js diff --git a/web-service/client/services/login.js b/web-service/client/services/login.js deleted file mode 100644 index b7118a600..000000000 --- a/web-service/client/services/login.js +++ /dev/null @@ -1,9 +0,0 @@ -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 diff --git a/web-service/client/src/App.js b/web-service/client/src/App.js index 72edd8cc3..9bf35de7e 100644 --- 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,36 +16,35 @@ const App = () => { window.location.href="/google"; } - if(user === null){ + if(window.localStorage.getItem('token')){ return ( - <div> - <h2>Welcome to Future Technology Lab</h2> - <h3>Please login!</h3> - <a class="button" onClick={handleLogin}> - <div> - <span class="svgIcon t-popup-svg"> - <svg class="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"/> - <path d="M7.744 14.115c-.17-.51-.267-1.055-.267-1.615s.097-1.105.267-1.615V8.683h-2.84A8.488 8.488 0 0 0 4 12.5c0 1.372.328 2.67.904 3.817l2.84-2.202z" fill="#FBBC05"/> - <path d="M12.5 7.38c1.248 0 2.368.43 3.25 1.272l2.437-2.438C16.715 4.842 14.79 4 12.5 4a8.497 8.497 0 0 0-7.596 4.683l2.84 2.202c.668-2.01 2.542-3.504 4.756-3.504z" fill="#EA4335"/> - </g> - </svg> - </span> - <span class="button-label">Sign in with Google</span> - </div> - </a> + <div className="margin: 'auto', text-align: 'center'"> + <h1>IT WORKS!!</h1> + <h2>Namibia here we come!</h2> </div> - - ) - }else { - return( - <div> - <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 className="button" onClick={handleLogin}> + <div> + <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"/> + <path d="M7.744 14.115c-.17-.51-.267-1.055-.267-1.615s.097-1.105.267-1.615V8.683h-2.84A8.488 8.488 0 0 0 4 12.5c0 1.372.328 2.67.904 3.817l2.84-2.202z" fill="#FBBC05"/> + <path d="M12.5 7.38c1.248 0 2.368.43 3.25 1.272l2.437-2.438C16.715 4.842 14.79 4 12.5 4a8.497 8.497 0 0 0-7.596 4.683l2.84 2.202c.668-2.01 2.542-3.504 4.756-3.504z" fill="#EA4335"/> + </g> + </svg> + </span> + <span className="button-label">Sign in with Google</span> + </div> + </a> + </div> + ) } + export default App; \ No newline at end of file diff --git a/web-service/server/package.json b/web-service/server/package.json index 144a1089e..3270a7958 100644 --- 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" diff --git a/web-service/server/src/index.js b/web-service/server/src/index.js index 7576bae18..16c8ba036 100644 --- 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> diff --git a/web-service/server/src/passport/passport.js b/web-service/server/src/passport/passport.js index 35d1fd652..3b855658a 100644 --- 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 -- GitLab